XMLHttpRequest vs WebSocket

En 2001, Microsoft introduit l'objet XMLHTTP dans le navigateur Internet Explorer 5. C'est un objet Active X. Il deviendra XMLHttpRequest dans le navigateur Mozilla.
Microsoft renomme l'objet dans Internet Explorer 6, mais cela reste Active X.

Websocket vs Ajax
Comparaison de XMLHttpRequest et WebSocket

Le 18 février 2005, l'article Ajax, une nouvelle approche pour les Applications Web de J.J Garrett lance le mot Ajax.
La seule existence du terme suffit à rendre ce mode de conception de page Web très populaire, et depuis lors on ne compte plus le nombre de sites web consacré à Ajax.

En août 2011, WebSocket est implémenté et activé par défaut dans Firefox 6 alors que le standard est toujours en cours de définition. Après le mode asynchrone fournit par l'objet XHR, c'est un nouveau progrès: des communications bi-directionnelles.

Mode asynchrone vs. mode bidirectionnel

Dans une application Web traditionnelle, lorsque l'utilisateur effectue une action, celle-ci est exécutée et le navigateur attend le résultats pour rendre la main à l'utilisateur. Lorsque cette action requiert un échange avec le serveur et une mise à jour de la page, cela occasionne des délais et une attente pour l'utilisateur.

Le mode asynchrone élimine cette attente. Les requêtes au serveur sont lancées sans que soit suspendue l'interaction avec le navigateur et la page est mise à jour lorsque les données requises sont disponibles. Le coté asynchrone est obtenu avec l'objet XMLHttpRequest.

Alors que le protocole HTTP opère par une succession de requêtes et réponses alternatives, WebSocket est bidirectionnel: une connexion statique s'établit entre le serveur et le client et les deux parties envoient des données à leur convenance.

Obtenir des données avec l'objet XMLHttpRequest

Cela commence par la création d'un objet Active X pour Internet Explorer et d'un objet natif pour les autres navigateurs. Pour obtenir la compatibilité, on tente la création de l'un puis de l'autre en cas d'échec.

Création d'une instance:

try {
   xhr = new ActiveXObject("Microsoft.XMLHTTP");   // pour Internet Explorer
}
catch(e)  // Echec
{
  xhr = new XMLHttpRequest();   // pour les autres navigateurs
}

Pour faire fonctionner l'objet, on assigne à un gestionnaire d'évènement une fonction à exécuter lorsque le server a répondu à une requête, laquelle se fait par l'appel des méthodes open() et send().

xhr.onreadystatechange = function() { ... };
xhr.open(...);
xhr.send();

La commande GET

Elle permet de récupérer un fichier sur le serveur.

xhr.open('GET',  url);                  
xhr.send(null);

Dans ce cas la méthode send() n'a aucun paramètre, tandis que le fichier à lire est la paramètre url de la méthode open.

La commande POST

Elle convient pour envoyer des données à un script sur le serveur.

xhr.open("POST", url, true);
xhr.send(data);

Le script est le paramètre url, la valeur true impose le mode asynchrone et les données sont fournies en argument de data sous forme de chaîne de variables et de valeurs comme ceci:

var data = "nom1=valeur1&nom2=valeur2...";

Comme avec GET, dans le corps de la fonction associée à onreadystatechange on appelle une fonction a exécuter lorsque la requête est reçue et la réponse obtenue est fournie en paramètre à cette fonction.

Echanger des données avec une connexion WebSocket

On établit une connexion à l'initiative du client avec cette commande:

var connection = new WebSocket('ws://scriptol.fr');

Puis on peut envoyer des données:

connection.onopen=function() 
{
   connection.send('Message xxx');
}; 

Et en recevoir de la part du serveur:

connection.onmessage=function(e) 
{
    console.log('Received: ' + e.data);  
};

L'évènement onmessage est en attente des données envoyées par le serveur, elle sont stockées dans la variable data de l'objet e.

On voit que WebSocket est un peu plus simple que XMLHttpRequest mais il amplifie les problèmes créés avec le mode asynchrone: les données sont reçues a tout moment sans rapport avec l'ordre dans lequel on fait la demande avec le serveur. Au client de mettre de l'ordre dans ce qu'il reçoit.

Application: Gimp dans le navigateur

gimp dans le navigateur

GTK 3.2 offre la capacité d'afficher des applications dans le navigateur, alors qu'elle tournent soit localement, soit sur un serveur. Cela permet donc de faire fonctionner Gimp sans l'avoir installé s'il fonctionne sur un serveur auquel le navigateur est connecté par un protocole comme WebSocket.

Cela grâce à une API en développement, HTML 5 GDK, version 3.2.
Pour le tester sur Firefox 4, il faut télécharger le code source de GTK 3.0 et le compiler avec cette directive:

–enable-x11-backend –enable-broadway-backend

Il faut aussi activer websocket dans Firefox 4. Taper about:config dans la barre d'adresse activer les deux drapeaux suivant:

network.websocket.enabled=true
network.websocket.override-security-block=true

Vidéo de démonstration.

Un autre exemple d'application est fourni sur ce site avec le gestionnaire de fichiers Advanced Explorer qui communique avec le système à travers une connection WebSocket gérée par Node.js. L'interface aussi bien que le backend sont écrits en JavaScript. Il n'y a pas de différence de fonctionnement entre cette version et la précédente écrite en Java.

Références: la spécification XMLHttpRequest du W3C et la spécification WebSocket.