🔌 WebSockets

Nous avons utilisé jusqu'à maintenant le polling pour mettre à jour les messages dans l'application. Le polling a l'avantage d'être simple à mettre en œuvre, mais est peu performant. En effet, on effectue constamment des requêtes d'API, même s'il n'y a pas de nouveaux messages.

Le polling a aussi le désavantage que si on ne veut pas recharger la liste complète de messages, on doit garder en référence la date du dernier message reçu afin de récupérer les messages ayant été reçus par le serveur après cette date. De plus, le polling n'est pas instantané non plus.

Une approche alternative est d'utiliser les WebSockets.

Les WebSockets sont une technologie permettant d’établir une communication bidirectionnelle persistante entre un client (comme un navigateur) et un serveur. Contrairement aux requêtes HTTP classiques, où chaque interaction suit un modèle “requête-réponse” limité, les WebSockets permettent un flux constant de données dans les deux sens.

Lorsqu’une connexion WebSocket est ouverte, elle reste active jusqu’à ce qu’une des parties décide de la fermer. Cette approche réduit la surcharge associée à l’établissement d’une nouvelle connexion pour chaque interaction. Les messages échangés sont plus légers que les requêtes HTTP classiques, ce qui rend les WebSockets particulièrement efficaces dans des contextes nécessitant des mises à jour fréquentes et rapides.

Le protocole est largement supporté par les navigateurs modernes et les serveurs.

Dans cette section

attention

Cette section n'est pas guidée étape par étape. Elle assume un projet de base (que vous pouvez télécharger) et présente les grandes lignes permettant de mettre en place une communication par WebSockets pour votre projet.

Vous trouverez le code d'une petite application très simple de "dessin" collaboratif. Plusieurs personnes peuvent activer ou désactiver des pixels sur une même grille. Le tout fonctionnant via WebSockets.

Code complet

https://gitlab.com/bentremblay.cd/websockets-demo Vous pouvez télécharger le code de cette démo ici: