Utiliser les websocket

La question qui brûle les lèvres est « peut-on l'utiliser, là tout de suite ? »

Oui, d'ailleurs nous le faisons. Coté navigateur, utiliser les websockets directement comporte les même soucis que faire du JavaScript pur, c'est-à-dire qu'il y a un certain nombre d'implémentations.

D'autre part la fonctionnalité a été désactivé dans Firefox 4 et 5 (puis réactivée), suite à la découverte d'une faille de sécurité.

Opera 11 l'a aussi désactivé pour cette raison tandis qu'Internet Explorer ne la supporte pas encore.

Une nouvelle version corrige cette faille du protocole. Elle est implémentée par Firefox 6+ et Chrome 14+.

Pourquoi l'utiliser si ce n'est pas encore supporté partout ?

Comme pour HTML5 ou CSS3, sa prise en charge sera croissante et tous les navigateurs vont être amenés à l'implémenter (même IE 10).

Il existe aussi des outils capables de mettre en œuvre des mécanismes de substitution quand la fonctionnalité n'est pas présente ou activée.

socket.io

socket.io est un outil fantastique, capable d'utiliser plusieurs fallback si les websockets ne sont pas disponibles :

  • socket flash ;
  • ajax ;
  • iframe ;
  • jsonp.

Cela vous ouvre la porte à tous les navigateurs, même mobiles.

L'utilisation est vraiment simple. On démarre une écoute côté serveur, on récupère côté client le fichier socket.io.js livré par le serveur (grâce à une balise script) et les deux parties sont prêtes à discuter.

socket.io vous permet de faire facilement du broadcast ou de la gestion de channel. Quant à la déconnexion, elle est prévue de base par le protocole.

Sécurité

On a vu plus tôt que la spécification évolue pour prendre en compte la sécurité.

Mais comme HTTP, HTTPS, WS a son pendant WSS qui permet d'ouvrir une connexion sécurisée.

En route vers le temps réel

Les websockets ne sont pas comparables à AJAX, elles permettent l'ouverture d'un canal de communication entre le client et le serveur. Du coup le serveur peut devenir une passerelle entre clients, par exemple pour réaliser un tchat.

De même les weksockets peuvent permettre de communiquer entre serveurs, ce n'est pas une technologie utilisable uniquement par les navigateurs.

De nombreuses implémentations existent dans différents langages, que ce soit PHP, Java ou encore Ruby et JavaScript (Node.js).

Il existe même un framework bâti avec Ruby, cramp.

Démonstration

Plutôt que de vous ennuyer avec un tchat j'ai écrit un puissance 4, afin que deux joueurs puissent s'affronter.

Le code est disponible sur GitHub.

Puissance 4

L'essentiel du code est dans src et il n'est pas énorme, environ 160 lignes de code de coffeescript pour le serveur et une centaine pour le client.

À propos du code

La présence d'un Gemfile est simplement liée au fait que j'utilise un guardfile pour compiler mon coffeescript en JavaScript.

La couche serveur est gérée en Node.js, la page Web est statique.

Pour faire tourner le jeu, vous avez uniquement besoin de Node, npm et du module socket.io.

Le jeu est en fait représenté par une classe game. Le client n'a pas de référence sur le jeu, toute la logique du jeu est gérée par le serveur.

Le serveur est en attente de connexion. Une fois qu'un client se connecte il vérifie qu'un jeu est disponible et le signifie au client si c'est le cas en lui indiquant s'il est le joueur 1 ou 2.

Si aucun jeu n'est démarré et que la limite (2 actuellement) n'est pas atteinte, un jeu est créé et la matrice initialisée.

Une fois que les deux utilisateurs sont enregistrés, on envoie aux deux joueurs un message indiquant que le jeu démarre.

Le premier inscrit commence. À chaque coup joué, on vérifie s'il est gagnant ou non, plutôt que de parcourir la grille entière et on change de joueur.

Si le coup est gagnant on notifie le gagnant et le perdant et on réactive le bouton permettant de lancer un jeu tout en supprimant la référence sur le serveur.

Le jeu est simplement un exemple de la puissance des websockets. Il ne vise pas à implémenter complètement la logique du jeu, mais si l'envie vous en prend, n'hésitez à proposer une pull request !

Remerciements

Cet article a été publié avec l'aimable autorisation de Synbioz, l'article original peut être vu sur le blog de Synbioz.

Nous tenons à remercier djibril pour sa relecture attentive de cet article.