Linking Socket.IO to Qooxdoo

Qooxdoo is a great framework, but sometimes you need to add extra content to it, and this is not so simple.

Here is a basic class and idea to link Socket.IO client API to Qooxdoo framework :

Before playing

Before doing anything with Socket.IO, you first need to include thooses files into your project.
Start getting Node.JS, and installing Socket.IO using « npm install ». This should install in node_module (in node.js root folder) folder. Inside this node_module, you should find the client API of Socket.IO here :

The dist folder should contains 4 files :

  • WebSocketMain.swf
  • WebSocketMainInsecure.swf

Regarding what you want, you need only 3 files : choose between the and the min version. I will prefer here the minimal but it does not change so much things after all.

I didn’t find the good way to put thooses files in the qooxdoo main project, but this should do the trick :
On resource folder, create a script folder, create inside this folder a « socket » (what you want for this one) folder. Put 3 files into this one.

Now you have the resource folder on your Qooxdoo app. But it’s not enough for now.

On the config.json file, you need to force the system to copy it, I use here the « build-script » which is the remapped default build folder :

		"copy-files" :{
			"source" : "./source/resource/",
			"target"  : "./build/"

The add-script is the most important part, it force the system to load the script as part of the qooxdoo launch. The script will be launched around Application.main start (I didn’t check exactly but before it’s too early and at the end of main it’s available).

Now you can play with Socket.IO over Qooxdoo, here is a basic class to deal with inside Qooxdoo system (under LGPLv3, like all sources I post here) :

 * This class is a direct link with
	extend : qx.core.Object,

	// events
	events :{
		/** connect event */
		"connect"			: "qx.event.type.Event",
		/** connecting event */
		"connecting"		: "qx.event.type.Data",
		/** connect_failed event */
		"connect_failed"	: "qx.event.type.Event",
		/** message event */
		"message"			: "qx.event.type.Data",
		/** close event */
		"close"				: "qx.event.type.Data",
		/** disconnect event */
		"disconnect"		: "qx.event.type.Event",
		/** reconnect event */
		"reconnect"			: "qx.event.type.Data",
		/** reconnecting event */
		"reconnecting"		: "qx.event.type.Data",
		/** reconnect_failed event */
		"reconnect_failed"	: "qx.event.type.Event",
		/** error event */
		"error"				: "qx.event.type.Data"

		 * The url used to connect to
			nullable:	false,
			init:		"http://"+window.location.hostname+"/",
			check:		"String"
		/** The port used to connect */
			nullable:	false,
			init:		8080,
			check:		"Number"
		/** The namespace ( namespace), can be empty */
			nullable:	true,
			init:		"",
			check:		"String"
		/** The socket (, can be null */
			nullable:	true,
			init:		null,
			check:		"Object"
		/** Parameter for indicating if we should reconnect or not */
			nullable:	true,
			init:		true,
			check:		"Boolean"
			nullable:	true,
			init:		10000,
			check:		"Number"
		/** Reconnection delay for */
			nullable:	false,
			init:		500,
			check:		"Number"
		/** Max reconnection attemps */
			nullable:	false,
			init:		1000,
			check:		"Number"

	/** Constructor
	 * @param namespace {string ? null} The namespace to connect on
	construct: function(namespace){
		if(namespace !== null){
		this.__name = [];

		//The name store an array of events
		__name : null,

		 * Trying to using to connect and plug every event from to qooxdoo one
			if(this.getSocket() != null){
			this.setSocket(io.connect(this.getUrl()+this.getNamespace(), {
				'port': this.getPort(),
				'reconnect': this.getReconnect(),
				'connect timeout' : this.getConnectTimeout(),
				'reconnection delay': this.getReconnectionDelay(),
				'max reconnection attempts': this.getMaxReconnectionAttemps(),
				'force new connection':true

			this.on("connect",			function(){		this.fireEvent("connect");					}, this);
			this.on("connecting",		function(e){	this.fireDataEvent("connecting", e);		}, this);
			this.on("connect_failed",	function(){		this.fireEvent("connect_failed");			}, this);
			this.on("message",			function(e){	this.fireDataEvent("message", e);			}, this);
			this.on("close",			function(e){	this.fireDataEvent("close", e);				}, this);
			this.on("disconnect",		function(){		this.fireEvent("disconnect");				}, this);
			this.on("reconnect",		function(e){	this.fireDataEvent("reconnect", e);			}, this);
			this.on("reconnecting",		function(e){	this.fireDataEvent("reconnecting", e);		}, this);
			this.on("reconnect_failed",	function(){		this.fireEvent("reconnect_failed");			}, this);
			this.on("error",			function(e){	this.fireDataEvent("error", e);				}, this);

		 * Emit an event using
		 * @param name {string} The event name to send to Node.JS
		 * @param jsonObject {object} The JSON object to send to as parameters
		emit:function(name, jsonObject){
			this.getSocket().emit(name, jsonObject);

		 * Connect and event from like qooxdoo event
		 * @param name {string} The event name to watch
		 * @param fn {function} The function wich will catch event response
		 * @param that {mixed} A link to this
		on:function(name, fn, that){
			if(typeof(that) !== "undefined" && that !== null){
				this.getSocket().on(name, qx.lang.Function.bind(fn, that));
				this.getSocket().on(name, fn);

	 * Destructor
	destruct : function(){
		if(this.getSocket() != null){
			//Deleting listeners
			if(this.__name !== null && this.__name.length >= 1){
				for(var i=0; i<this.__name.length; ++i){
			this.__name = null;


			try {
			} catch(e) {}

			try {
			} catch(e) {}


This class can be used like this :

var ws = new myapp.api.WebSocket();
//Here you should customize port, hostname, ...

//Connect with previous setted properties

ws.emit("achannel", "hello");
ws.on("achannel", function(result){
}, this);

Simple as this !


Un commentaire

  1. Very nice article. Concerning placing the script files, it is simpler and a bit more idiomatic to locate them as true resources of the app, eg. under a path like ‘source/resource/myapp/socket’, where they are included under the app’s proper namespace. Then, add a generator hint to the top of the class file of myapp.api.Websocket:


    This will save you the extra « copy-files » entry in config.json, as declared resources are automatically copied to the build version.

    The « add-script » key is a good way to make the script available, which can now be given the value « resource/myapp/socket/ ». This URI will now work for both ‘source’ and ‘build’ versions of the app (so you can e.g. put it in an own job definition and « extend » source-script and build-script with it).

    Scripts loaded with « add-script » are loaded ahead of all normal qooxdoo class definitions, whether they are framework or application classes (so it’s way before Application.main start).

    Consider making a qooxdoo contribution out of this. I’m sure many would be interested.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:


Vous commentez à l'aide de votre compte Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )


Connexion à %s

%d blogueurs aiment cette page :