Avri Blog

Lady and gentleman, this is the AvriComet !
It's very very inspired by moo-comet (Benjamin Hutchins) who have done a realy great work !
I have add a new method for comet for Firefox and make some changes.
If you have no idea of what is comet, you can see an exemple of the moo-comet on Benjamin Hutchins' web site
If you want more information about each solution used for each browser, check here : step by step comet tutorial

Download uncompressed 

/*
* @project AvriComet- Mootools 1.2.1> Request.Queue Class (in the function send), Can be found on www.clientcide.com
* @author : Quentin Ambard
* @version : 0.1
* @url http://www.avricot.com/blog
* @license MIT Style License
*
 
it will create 4 differents types of tunnels, using the lasts specifications :
it's -i think- the best solution, but the server will have to send all the informations in 4 differents ways...
	->Trident : iframeForever (using ActiveXObject) 
			Server : 
				Specific Header :
				  Content-Type: text/html; charset=utf-8
				Push :
				  <script type="text/javascript">parent._cometObject.fireEvent('dataPushed', {JSON: "DATA TO PUSH"})</script>
				  You must flush the buffer, sending some noise when you start the connexion, for exemple :"<span></span><span></span><span></span><span></span><span></span>"
	->presto  : source-event
			Server : 
				Specific Header :
				  Content-Type: application/x-dom-event-stream
				Push :
				  Event: "+this.cometName+"\ndata: {JSON: "DATA TO PUSH"}\n\n    (cometName is send on each Bayeux Publish request on the field ex )
	->gecko   : xhr object using multipart 
			Server : 
				Specific Header :
				  Content-Type: multipart/x-mixed-replace;boundary=XXoXoX
				Push :
					Content-Type: text/json\r\n\r\n{JSON: "DATA TO PUSH"}\r\n\r\n--XXoXoX\r\n
 
	->Others  : addCallback
			Server : 
				Specific Header :
				  none
				Push :
					{JSON: "DATA TO PUSH"}
 
 
 
	AvriComet will fire 2 events :
	- error ('error text') ;
	- push (Object)
	When you send data to the server, you can do it throught the method send(whateverYouHaveToSend).
	It will catch the answer and fire the event :
	- answer (theAnswer)
 
*/	
var AvriComet = new Class ({
	Implements: [Options, Events],
	options: {
		cometName: "MooComet", //name of the comet connexion, essential for presto engine.
		urlServer: '' //Url of the server.
	},
	length: 0,
	initialize: function(_options){
		this.setOptions(_options);
 
		this.sender = new Request.Queue({
			concurrent : 2
		});
 
 
		this.cometType = (Browser.Engine.trident ? 3 : (Browser.Engine.presto ? 2 : (Browser.Engine.gecko ? 1 : 0)));
 
		//ie
		if (this.cometType == 3) {
			this.tunnel = new ActiveXObject("htmlfile");
		}
		//presto (opera)
		else if (this.cometType == 2){
			this.tunnel = document.createElement("event-source");
		}
		//gecko (firefox)
		else if (this.cometType == 1){
			this.tunnel = new Request({
				url: this.options.urlServer,
				method: 'get',
				header: ''
			});
			this.tunnel.xhr.multipart = true ;
			this.tunnel.xhr.onload = function (event) {
				if (event.target.readyState == 4 ) {
					this.decodeJSON(event.target.responseText) ;
					//this.fireEvent('dataPushed', [event.target.responseText, event.target.responseXML]) ;
				}
				else {
					this.fireEvent('error', "Error xhr : readyState: "+event.target.readyState) ;
				}
			}.bind(this.tunnel);
		}
		//webkit (chrome/safari)
		else if (this.cometType == 0){
			this.tunnel = new Request.XHR(this.options);
			this.tunnel.addCallback(this.onChange.bind(this), {readyState: false, status: false});
		}
		return this;
	},
	/**
	 * Have to be invoked when you want to close the connection
	 */
	cancel: function() {
		if (this.cometType == 3) {
		   this.tunnel.body.innerHTML="<iframe src='about:blank'></iframe>";
		}
		//default iframe forever for all broswer or just for browser != than presto && gecko
		else if (this.cometType == 2) {
		   document.body.removeChild(this.tunnel);
		}
		else {
		   this.tunnel.cancel();
		}
		return this;
	},
	/**
	 * Create the tunnel with the server.
	 * 3 differents type of tunnel, depends of the browser's engine:
	 *		trident => iframe with ActiveXObject object
	 *		presto  => event-source (html5)
	 *		firefox => XMLHttpRequest  with multipart
	 * post the information with : src="'+this.options.urlServer+_post'"
	 **/
	initTunnel: function(_post) {
		//Trident Engine (ie)
		if (this.cometType == 3) {
			this.tunnel.open();
			this.tunnel.write("<html><body></body></html>");
			this.tunnel.close();
			this.tunnel.parentWindow._cometObject = this;
			this.tunnel.parentWindow._cometObject.addEvent('dataPushed', this.firePush.bindWithEvent(this));
			this.tunnel.body.innerHTML = "<iframe id='test' src='"+this.options.urlServer+'?cometType='+this.cometType+'&cometName='+this.options.cometName+'&'+_post+"'></iframe>";
		}
		//Presto Engine (opera)
		else if (this.cometType == 2) {
			this.tunnel.addEventListener(this.options.cometName, this.decodeJSON.bindWithEvent(this), false);
			this.tunnel.setAttribute("src", this.options.urlServer+'?cometType='+this.cometType+'&cometName='+this.options.cometName+'&'+_post);
		}
		//gecko Engine (Firefox)
		else //if (this.cometType == 1)
			{
			//this.tunnel.addEvent('dataPushed', this.decodeJSON.bindWithEvent(this));
			this.tunnel.send('cometType='+this.cometType+'&cometName='+this.options.cometName+'&'+_post);
		}
		//safari+chrome
		/*else {
			this.tunnel.send({data: {'cometType': this.cometType, 'cometName': this.options.cometName}});
		}*/
	},
	send: function (_post) {
		var req = new Request.JSON({url: this.options.urlServer, link: 'cancel', method: 'get'});
		req.addEvent('complete', this.answerSender.bindWithEvent(this));
		this.sender.addRequest('sender', req);
		req.send(_post);
	},
	decodeJSON: function (_textResponse) {
		if(this.cometType == 2) {
			_textResponse = _textResponse.data ;
		}
		else if (_textResponse != "") {
			var newLength = text.length ;
			if (newLength>this.length) {//fix firefox behaviour when push 2 information in the same time.
				_textResponse = text.substring(this.length,newLength-1) ;
				/* possible implementation for FF answer (be carreful with the final "," : {JSON: DATA TO PUSH},
				 * 
				 * 				text = "["+text.substring(this.length,newLength-1)+"]" ; //So you have [{objectData1},{objectData2},{objectData3}]
								var listAction = JSON.decode(text); //you get the array with all the json object from the server
								var size = listAction.length ;
								for(i=0;i<size;i++) {
									this.firePush(listAction[i]);
								}
								this.length = newLength ;
 
				 */
			}
		}
		this.firePush(_textResponse);
	},
	firePush: function (_object) {
		try {
			if (typeof _object != "object") {
				_object = JSON.decode(_object);
			}
		}
		catch (e) {
			this.fireEvent('error', 'transmission error or server error. Sometimes the last bracket has a little bug : '+_object);
		}
		this.fireEvent('push', JSON.decode(_object));
	},
	answerSender: function (_answer) {
		if (typeof(_answer) != "undefined") {
			this.fireEvent('answer', _answer);
		}
	}
 
}) ;
 
Request.XHR = new Class({
	Extends: Request,
	callbacks: [],
	check: function() {
		return true;
		/*if (!this.timer) return true;
		switch (this.options.link){
			case 'cancel': this.cancel(); return true;
			case 'chain': this.chain(this.start.bind(this, arguments)); return false;
		}
		return false;*/
	},
	addCallback: function(fn, options){
		options = $extend({
			fn: $empty,
			readyState: 4,
			status: 200
		}, options);
		this.callbacks.push($extend(options, {fn: fn}));
		return this;
	},
	onStateChange: function(){
		//if (!this.running) return;
		this.status = 0;
		$try(function(){
			this.status = this.xhr.status;
		}, this);
		this.response = {text: this.xhr.responseText, xml: this.xhr.responseXML};
		this.callbacks.forEach(function(callback) {
			if (callback.readyState != false && callback.readyState != this.xhr.readyState)
				return;
			if (callback.status != false && callback.status != this.status)
				return;
			callback.fn(this.processScripts(this.response.text), this.response.xml);
		}, this);
	}
});

Coming soon :)
This isn't the final version....

Back to the main tutorial

This is a powerfull solution for Firefox ! (better than listen the xhr object).
The idea is very simple. We are going to send the data as a multipart data. So for each part of the data sent by the server, we will specify the type of the data, and add a specific separator.
We will use the string separator "XXoXoX" (can be anything)

Server side :

The header send by the server has to be :

this.pw.print("Content-Type: multipart/x-mixed-replace;boundary=XXoXoX");

So the server has to send for each new part the content type of the part, then the data you want to push, and at the end the separator.
When firefox will read the separator, he will know that he has receveid a new part.

this.pw.print("Content-Type: text/json\r\n\r\n"+_the_data_to_push+"\r\n\r\n--XXoXoX\r\n");

(dont forget the -- befor the string separator)

Client side

On the client side, you just have to use a normal xhr object, but you have to active the multipart option.
Let's do it !

//we create a norma xhr object (this is the mootools way but can be anything)
this.tunnel = new Request({
	url: this.options.urlServer,
	method: 'get',
	header: ''
});
//we active the multipart option of the xhr object
this.tunnel.xhr.multipart = true ;
//we change the onload function, and everytime we got a readyState == 4, it means that we get a new part of data !
this.tunnel.xhr.onload = function (event) {
	if (event.target.readyState == 4 ) {
		alert('data pushed :'+event.target.responseText) ;
		this.fireEvent('dataPushed', [event.target.responseText, event.target.responseXML])
	}
	else {
		this.fireEvent('error', "Error xhr : readyState: "+event.target.readyState)
	}
}.bind(this.tunnel);

Conclusion :

easy to implement, powerfull, but just for Firefox !

Back to the main tutorial

Back to the main tutorial

Solution

With IE, the idea is to create an iframe forever.
The server has to send the data "chunked".
Every data pushed has to be something like : <script type="text/javascript">alert('I have push something !')</script>
If you want to avoid the "click" on each actualisation, you have to create the iframe with an activeXObject !

Client side

this.openTunnel = function () {
   this.tunnel = new ActiveXObject("htmlfile");
   this.tunnel.open();
   this.tunnel.write("<html><body></body></html>");
   this.tunnel.close();	
   this.tunnel.parentWindow._cometObject = this;
   this.tunnel.parentWindow._cometObject.addEvent('dataPushed', this.firePush.bindWithEvent(this));
   this.tunnel.body.innerHTML = "<iframe id='test' src='the url of the server. Have to use an Apache reverse proxy for exemple?type=ie'></iframe>";
}
this.firePush = function (_data) {
   alert('server push : '+_data);
}
//if we want to close the tunnel :
   this.closeTunnel = function () {
   this.tunnel.body.innerHTML="<iframe src='about:blank'></iframe>";
}

Server Side

opening the tunnel : header :
Transfer-Encoding: chunked
Content-Type: text/html; charset=utf-8

the data : <script type="text/javascript">parent._cometObject.fireEvent('dataPushed', "THE DATA")</script>

An important point is to flush IE's buffer. You need at least -+10ko of data if you want a reaction from IE.
So the best solution is to send some noise during the initialization of the tunnel :

this.write("<span></span><span></span><span></span><span></span><span></span><span></span><span></span>");

One of the problem with this solution is that all the data are kept on memory on the iframe
So if you will have a hudge memory leak.
The only solution is to close the iframe, and to re-open it every X data received by the server.

Back to the main tutorial

We have a quite big problem with comet : if you try to ask for an ajax request on the same domain but on a different port, it will be forbidden by your navigator because it's an unsecure cross-domain request.
So how to fix it ?
Basicly i found 3 solutions !

1° : an Iframe loaded by the server

One of the solution could be to create an iframe with the server. On this iframe, you have to load all the javascript.
It result that the javascript comes from the same domain/port than the ajax request, and there wont be any cross-domain...
This solution is pretty ugly, because you won't be able to interfer with the iframe and the rest of the page.
It can be a good solution if you can't do the solution 3°, but I will assume that if you can load a java Server, you can use solution 3° :)

2° : using comet cross-domain

You can use comet cross-domain request, but I don't know how to manage it with IE, so good luck !
It shouldn't be impossible but seems quite hard !

3° : using a reverseProxy

This is the best solution :
Very easy to use, powerfull and fast !
Basicly you can do it with apache if you use it for the rest of your server.

First of all you have to load this two modules on apache :

• LoadModule proxy_module modules/mod_proxy.so
• LoadModule proxy_http_module modules/mod_proxy_http.so

then you just have to create a rule for the reverseProxy :

ProxyRequests Off
ProxyPass /directory_reached_by_the_comet_request http://localhost:9090
ProxyPassReverse /directory_reached_by_the_comet_request  http://localhost:9090

!!!The full solution : Comment écrire correctement les headers d'une réponse http pour une appliquation comet ?
Le principal inconvenant de Comet est que l'on ne connait pas la taille de l'element à renvoyer. Il est donc impossible de placer dans le header un "Content-length: taille".
La solution toute trouvée serait d'utiliser le header "Transfer-Encoding: chunked" qui spécifie que le message sera envoyé par petit chunk (=morceau).
Seulement voila, les antivirus qui scannent les headers http trouvent qu'un header comme-suivant est insuffisant :

Content-Type text/javascript; charset=ISO-8859-1
Transfer-Encoding chunked

La requête se retrouve alors bloquée par l'antivirus, "en attente", et la réponse ne parvient jamais.

Pour remédier à cela, avast white-list depuis peu les headers ayant dans le nom du serveur le mot clé : DWR-Reverse-Ajax.
Il suffit donc de rajouter "Server: DWR-Reverse-Ajax" pour que avast arrête de bloquer la réponse.

Voici l'ensemble du code qui envoie les headers de avriChat :

public static final byte[] EOL = {(byte)'\r', (byte)'\n' };
/*************************************/
public void send () {
	Calendar c = Calendar.getInstance();
	String date = c.get(Calendar.DAY_OF_MONTH) + "/" + c.get(Calendar.MONTH) + "/" + c.get(Calendar.YEAR);
	try {
		this.pw.print("HTTP/1.1 200 OK");
		this.pw.write(Server.EOL);
		this.pw.print("Date: "+date);
		this.pw.write(Server.EOL);
		this.pw.print("Server: DWR-Reverse-Ajax Comet AvriChatServer");
		this.pw.write(Server.EOL);
		this.pw.print("Vary: Accept-Encoding");
		this.pw.write(Server.EOL);
		this.pw.print("Connection: Keep-Alive");
		this.pw.write(Server.EOL);
		this.pw.print("Content-Type: text/html");
		this.pw.write(Server.EOL);
		this.pw.write(Server.EOL);
	} catch (IOException e) {
		e.printStackTrace();
	}
	System.out.println(this.content);
	this.pw.flush();
}

(Attention, this.pw = new PrintWriter(this.socket.getOutputStream()) ne fonctionne pas.
Il faut envoyer les /r/n en byte avec un write() en utilisant un this.pw = new PrintStream(this.socket.getOutputStream());

Cela fonctionne (pour le moment) pour avast, il faudra voir si d'autres antivirus posent le même problème ou pas...