Les WebSockets et la révolution des communications serveur sur le Web

Je vous introduis aujourd’hui à une nouvelle technologie qui changera radicalement la façon dont une application Web communique avec le serveur : les WebSockets.

En gros, cette nouvelle plate-forme de communication propose une méthode native et unifiée de conserver une connexion continue et bidirectionnelle entre le client et le serveur. Voici un schéma qui illustre par exemple comment fonctionne une application de clavardage en ligne :

Schéma communication via WebSocket

Cela permet d’améliorer la performance d’un module ou d’une application dans le navigateur qui doit constamment demander des mises à jour au serveur. L’amélioration de la performance ne se situera pas seulement au niveau des transferts réseaux, mais aussi au niveau de l’utilisation du CPU. Voici une brève vidéo qui le démontre :

Compatibilité

J’ai abordé le sujet aujourd’hui car malgré le fait que la spécification ne soit pas présentement officiellement complétée, les WebSockets sont maintenant supportés par tous les majeurs navigateurs à jour :

Cela inclut Internet Explorer, Firefox, Google Chrome, Opera et Safari. Vous avez bien lu et ce n’est pas une erreur : Internet Explorer est bien dans la liste (source).

Limitations

Les nouvelles fonctionnalités présentées jusqu’à maintenant sont très emballantes, mais voici quelques points importants à mentionner :

Un hébergement standard ne permettra pas d’ouvrir correctement une connexion WebSocket. Dans les règles, on doit implémenter un service tel que WebSocket4J, pywebsocket, jWebSocket ou QtWebsocket sur le serveur. Java, C++, PHP et Python présentent chacuns leurs alternatives.

Autre point, il est important d’oublier immédiatement toute idée d’application Web P2P avec les WebSockets. Ce protocole n’est pas prédestiné à permettre l’échange de données directement entre les clients. Tout échange doit passer par le serveur.

Il est aussi important de comprendre que les WebSockets ne remplaceront jamais les requêtes AJAX d’un site Web. Les WebSockets doivent être utilisés uniquement dans le cas où on veut afficher de l’information qui doit être actualisée constamment ou en temps réel.

Type de données

Par défaut, on envoie et reçoit du texte via le socket. Il sera alors pratique d’effectuer les transferts vers le serveur en une chaîne au format JSON pour structurer les données.

Expérimenter une application qui utilise les WebSockets

De tous les exemples et démos disponibles, je vous ai sélectionné ma préférée, une application amusante qui combine un système de clavardage avec un simili-jeu multijoueur : RumpleTroll. J’espère que vous avez apprécié le billet, maintenant connectez-vous au démo avec un ami ou un collègue et amusez-vous!


3 réponses à Les WebSockets et la révolution des communications serveur sur le Web
  1. Kamel Répondre

    Bonjour M.Guillaume St-Jean
    Je vous remerci pour ce travail d’explication
    Bonne continuation

  2. ing2013 Répondre

    et si vous faitez un pti tp comment implemente un serveur websocket :)

  3. Pascal Répondre

    Salut Guillaume,

    Excellent post :) J’ai fait une petite demo Node.js et Socket.io si jamais ca peut aider quelqu’un.
    https://github.com/milhouse1337/jira-realtime

    En fait, c’est Node.js qui établis les requêtes Websocket avec le browser et ca évite d’avoir à installer un plugin sur le serveur du client. Le tout en bon vieux JS et on peut envoyer n’importe quel POST directement pour qu’il soit ensuite “broadcasté” aux Websockets actifs :)

    La demo est relativement simple, quelques lignes de codes suffisent pour avoir le stack complet. Laisse-moi savoir ce que tu en penses!

    Aussi, je seconde l’idée que les Websockets vont changé le web … again ahah!

    – Pascal

Laisser un commentaire

Votre adresse courriel ne sera pas publiée. Entrez votre nom, courriel et votre commentaire.

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">