Inovia Blog

L’actualité des technologies innovantes

La communication temps-réel avec Socket.IO - 1/2

Par Kadda SAHNINE

Publié le | 27 octobre 2012 |

Socket.IO logoAprès avoir publié en 2009 une étude très complète portant sur les techniques du Web asynchrone (ou Web temps-réel), nous revenons vers cette thématique en portant notre attention sur Socket.IO, probablement une des meilleures librairies de communication temps-réel bi-directionnelle à ce jour.
Les champs d’application vont du développement de jeux en réseau à la supervision de systèmes en temps-réel, en passant par les applications de communication (messagerie instantanée ou vidéo).

Tout utilisateur de la librairie jQuery est séduit par la facilité avec laquelle on manipule un arbre DOM ou l’on gère un appel AJAX. Par analogie, disons que Socket.IO est le jQuery de la programmation d’application web temps-réel, la conception de son API rendant effectivement la tâche beaucoup plus simple qu’il n’y paraît.

Dans le second volet de cet article, nous développerons une application affichant en temps-réel un fil d’actualité sur Twitter, dont le résultat est visible en vidéo.

Le positionnement de Socket.IO par rapport à WebSocket

WebSocket est un protocole (et une API) de communication bi-directionnelle temps-réel, constituant un des éléments de la spécification HTML5.
Or, les navigateurs ne supportant pas encore le protocole sont légion (IE 6+). Plus problématique, les navigateurs Opera et Safari ne supportent qu’une version dépréciée et non sécurisée du protocole.
Rappelons qu’à ce jour, seuls Chrome et IE10 implémentent une version à jour, Firefox n’intégrant qu’une version propriétaire (MozWebSocket).
La réalité est donc à une fragmentation des protocoles WebSocket, lorsque ceux-ci sont supportés.

Développé par Guillermo Rauch, Socket.IO vient à la rescousse en uniformisant l’écriture du code client et serveur quel que soit le navigateur et ce, en dépit de cette fragmentation des protocoles ou de l’absence du support WebSocket (la librairie bascule alors en Comet voire long polling). Plus exactement, la couche d’abstraction est gérée par Websocket.IO, un composant utilisé par Socket.IO.
Nous pourrions nous contenter de n’utiliser que Websocket.IO bien sûr, mais ce serait se priver de la grande valeur ajoutée de Socket.IO, pouvant se résumer principalement en :

  • l’exposition d’une API cliente et serveur suffisamment simple pour rendre la programmation d’applications web temps-réel aisée
  • le multiplexage, c’est à dire la possibilité de faire passer plusieurs informations dans le même canal de communication (1 seul socket par client)
  • la reconnexion automatique (timeout, déconnexion)
  • la scalabilité horizontale

Installation

Socket.IO est packagé sous la forme d’un module Node.js dont l’installation est un pré-requis.
La procédure d’installation de Socket.IO via NPM est des plus simples :

npm install socket.io

Utilisation de l’API

L’API cliente et serveur est identique dans la gestion des messages émis ou reçus :

  • réception d’un message associé à un évènement : socket.on("evenement", callback_function)
  • publication d’un message associé à un évènement : socket.emit("autre evenement", donnees)

A titre d’illustration, voyons comment développer une application web temps-réel de type écho, le serveur renvoyant en temps-réel la saisie du client.
Il y a 2 artefacts à développer :

  • Le code serveur en JavaScript dans le fichier serveur.js s’exécutant sur un serveur node.JS
  • Le code client en HTML/JavaScript dans le fichier client.html s’exécutant dans un navigateur (bureau ou mobile)

L’intégralité des sources consultable en ligne.

Etape 1 : créer un serveur

Côté serveur, les traitements sont implémentés en JavaScript et exécutés sur un serveur node.JS.
Le code ci-dessous consiste à créer un serveur web écoutant sur le port 8081 et retournant le code HTML client.html implémentant l’IHM, et ce, quelle que soit la ressource demandée.

Le code ci-dessus nécessite le framework Express.JS que l’on peut installer via npm :

npm install express

Etape 2 : créer le gestionnaire d’évènement côté serveur

Lorsque des données associées à l’évènement saisie sont reçues du client, le serveur publie le même message préfixé par >>ECHO : associé à l’évènement info.

Etape 3 : écrire l’interface cliente

Le document HTML charge la librairie Socket.IO cliente :

L’IHM est constituée :

  • d’un champ de saisie (inField)
  • d’un bouton (sendBtn) pour l’envoi des données
  • d’une zone d’affichage des messages reçus du serveur (out)

Etape 4 : créer le gestionnaire d’évènement côté client

Le code suivant décrit les traitements de :

  • connexion au serveur
  • réception de données provenant du serveur et associées à l’évènement info
  • émission des données saisies par l’utilisateur, associées à l’évènement saisie et déclenchée lorsque l’utilisateur clique sur le bouton

Exécution du code

Se positionner dans le répertoire à partir duquel les modules Socket.IO et Express ont été installés (contient le sous-répertoire node_modules) puis démarrer le serveur :

node serveur.js

L’ensemble du code source est disponible en ligne.

Abonnez vous !
  • RSS
  • Yahoo
  • Netvibes

Suivez l'auteur sur Twitter !
  • Suivre sur Twitter

A propos de l'auteur

Kadda SAHNINE
Architecte technique Java EE
#JavaEE #Linux #vim addict #OpenSoftware #OpenHardware
Voir le profil de Kadda Sahnine sur LinkedIn

Flux RSS

Rechercher

Administration