Introduction aux WebSockets

Les WebSockets sont un protocole de communication qui permet une communication en temps réel entre le client et le serveur. Les WebSockets maintiennent la connexion active et permettent une communication bidirectionnelle. Ça rend les WebSockets parfaits pour les applications de chat et de bourse, les jeux multijoueurs et les outils collaboratifs.

Dans cet article, on va découvrir comment fonctionne le protocole WebSocket et ses avantages par rapport au protocole HTTP. On va aussi te montrer comment créer une application de chat simple en utilisant les WebSockets côté client et côté serveur.

HTTP vs WebSockets

HTTP est largement utilisé pour les interactions entre le serveur et le client. Il fonctionne bien pour récupérer des données et créer des ressources. Mais il est unidirectionnel, ce qui signifie que c’est le client qui doit lancer toutes les requêtes et que le serveur ne peut pas envoyer de données de lui-même. Cette limitation le rend inefficace pour des applications telles que les flux boursiers ou les jeux multijoueurs, où il faut transférer des mises à jour entre le client et le serveur des centaines, voire des milliers de fois par minute. À chaque mise à jour, le client doit répéter un cycle requête-réponse, ce qui mobilise beaucoup de ressources de calcul et de bande passante. Utiliser HTTP pour ce genre d’applications rend aussi le serveur inefficace, car il est surchargé de nouvelles requêtes même quand il n’y a pas de mise à jour disponible pour les clients.

Pour pallier cette limitation, tu peux essayer le « long polling » HTTP, où le serveur maintient la connexion ouverte plus longtemps en attendant d’envoyer davantage de données avec la réponse. Dès que le client reçoit la réponse, il envoie une nouvelle requête pour demander plus de données. Bien que cela fonctionne bien pour reproduire un comportement en temps réel, le fait de maintenir une connexion ouverte pendant longtemps peut entraîner des problèmes de délai d’expiration du serveur et nuire aux performances si trop de clients continuent d’interroger le serveur même lorsqu’aucune nouvelle mise à jour n’est disponible. De plus, comme le client envoie des requêtes à des intervalles prédéfinis, les mises à jour peuvent ne pas s’afficher instantanément. Imagine, par exemple, un jeu vidéo multijoueur qui doit synchroniser en temps réel la position et le score des joueurs. Le protocole HTTP devrait envoyer une nouvelle requête toutes les quelques secondes pour récupérer l’état actuel du jeu, ce qui ajoute une surcharge réseau et une latence inutiles.

En revanche, les WebSockets offrent une latence et une surcharge réseau bien moindres tout en maintenant un canal bidirectionnel pour la communication en temps réel. L’utilisation d’une connexion full-duplex permet au client et au serveur d’interagir et d’échanger des messages sans créer de nouvelle connexion, ce qui réduit la surcharge de transmission liée à la création d’une nouvelle connexion pour chaque requête. La connexion persistante des WebSockets minimise l’utilisation de la bande passante en n’envoyant pas les en-têtes HTTP à chaque message. Les WebSockets offrent également une expérience plus « en temps réel » aux applications, car ils ne nécessitent pas de cycle d’interrogation. Ainsi, les nouvelles données arrivent instantanément dès qu’elles sont disponibles. Tous ces avantages font des WebSockets une option bien plus pratique pour les utilisations en temps réel, comme les applications de chat et de bourse, les jeux multijoueurs et les outils collaboratifs.

Voici un schéma comparant le déroulement des connexions HTTP et WebSockets :

Si tu as déjà développé une fonctionnalité de chat en utilisant l’interrogation HTTP, tu connais bien les désagréments : des utilisateurs qui se plaignent de messages retardés, des serveurs qui croulent sous le poids des requêtes constantes, et ce sentiment de désespoir quand tu te rends compte que ton application « en temps réel » a un décalage de 5 secondes. Les WebSockets résolvent ce problème avec élégance en maintenant une connexion persistante et bidirectionnelle qui donne vraiment l’impression d’être instantanée.

Les bases du protocole WebSocket

Le protocole WebSocket établit une connexion persistante entre le client et le serveur pour permettre une communication bidirectionnelle. Le processus de connexion commence par une requête HTTP appelée « handshake », au cours de laquelle le client demande au serveur de faire passer la connexion au protocole WebSocket. Une fois le handshake effectué, la connexion bascule vers le protocole WebSocket. Le schéma suivant illustre la séquence de connexion entre le client et le serveur.

Voici comment fonctionne la connexion via le protocole WebSocket : le client envoie une requête HTTP au serveur pour demander la mise à niveau de la connexion vers le protocole WebSocket. La requête comprend les en-têtes « Upgrade: websocket » et « Connection: Upgrade », comme dans l’exemple suivant :

   GET /chat HTTP/1.1
    Host: example.com:8000
    Upgrade: websocket
    Connection: Upgrade

Le serveur envoie une réponse au client avec un 101 code d'état indiquant que la connexion a été mise à niveau vers le protocole WebSocket. La réponse contient Upgrade: websocket et Connection: Upgrade . Voici un exemple :

    HTTP/1.1 101 Switching Protocols
    Upgrade: websocket
    Connection: Upgrade

Une fois la négociation établie, le client et le serveur peuvent désormais communiquer de manière bidirectionnelle sans aucune requête supplémentaire.

Le client ou le serveur peut fermer la connexion à tout moment.

Utilisation des WebSockets dans le front-end

Ensuite, on va te montrer comment créer une application de chat simple avec les WebSockets, qui te permettra d’envoyer et de recevoir des messages. L’application front-end permettra aux utilisateurs d’envoyer des messages, et le serveur back-end diffusera ces messages à tous les clients connectés.

Tu peux suivre les étapes à l’aide de ce dépôt GitHub.

Pour commencer, crée un dossier de projet nommé « websockets-js-node » dans ton répertoire de travail en exécutant la commande « mkdir websockets-js-node » dans ta ligne de commande.

Dans le dossier du projet, crée un répertoire nommé « frontend » en exécutant la commande « mkdir frontend » dans ton terminal.

Dans le frontend répertoire, crée un fichier nommé index.html en tapant touch index.html dans ton outil en ligne de commande.

Dans le fichier index.html, ajoute le code permettant d’afficher une page HTML simple avec des champs de saisie pour le nom d’utilisateur et le message, un bouton pour envoyer le message, ainsi qu’une balise script pour inclure le fichier de script index.js qui implémente la logique WebSocket côté client, comme suit :

   <!-- frontend/index.html -->

   <!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>WebSocket Client</title>
     </head>
     <body>
       <h1>WebSocket Client</h1>
       <input type="text" id="username" placeholder="Your username" />
       <input type="text" id="messageInput" placeholder="Type your message" />
       <button onclick="sendMessage()">Send</button>
       <div id="messages"></div>

       <script src="index.js"></script>
     </body>
   </html>

Crée un fichier nommé index.js en exécutant touch index.js dans ton outil de ligne de commande, puis ajoute le code suivant pour configurer la connexion WebSocket au serveur backend :

   // frontend/script.js

   // Create a WebSocket connection to the server
   const socket = new WebSocket("ws://localhost:8080");

   // Display connection status
   socket.onopen = () => {
     console.log("Connected to the WebSocket server");
   };

   // Handle incoming messages from the server
   socket.onmessage = (event) => {
     const messageDiv = document.getElementById("messages");
     const newMessage = document.createElement("p");
     newMessage.textContent = event.data.toString();
     messageDiv.appendChild(newMessage);
   };

   // Handle connection closure
   socket.onclose = () => {
     console.log("Disconnected from the WebSocket server");
   };

   // Send a message to the server
   function sendMessage() {
     const usernameInput = document.getElementById("username");
     const messageInput = document.getElementById("messageInput");
     const message = messageInput.value;
     const username = usernameInput.value;
     if (message) {
       socket.send(`${username}: ${message}`);
       messageInput.value = "";
     }
   }

Ce code effectue les opérations suivantes :

• Il établit une connexion WebSocket vers le serveur backend.
• L'événement « socket.onopen » est déclenché lorsque la connexion est établie.
• L'événement « socket.onmessage » est déclenché lorsqu'un message est reçu du serveur. Il ajoute le message à la div « messages ».
• L'événement « socket.onclose » se déclenche lorsque la connexion est fermée.
• La fonction « sendMessage » est appelée lorsque l'utilisateur clique sur le bouton « Envoyer ». Elle récupère le nom d'utilisateur et le message dans les champs de saisie, puis les envoie au serveur à l'aide de la méthode « socket.send ».

Utilisation des WebSockets dans le backend

Maintenant que le front-end est prêt, créons un serveur back-end auquel le front-end pourra se connecter pour envoyer et recevoir des messages. Dans la section suivante, on t’explique comment mettre en place une application de chat simple qui diffuse les messages entrants à tous les clients connectés.

Pour l’implémentation du backend, cet exemple utilise le package npm « ws », une bibliothèque qui a fait ses preuves pour créer un serveur WebSocket sous Node.js.

Note que les exemples de code de ce tutoriel ont été créés avec la version 20 de Node.js. On te recommande d’utiliser Node.js 22 (la version LTS actuelle) pour tes nouveaux projets.

Dans le dossier du projet, crée un nouveau répertoire nommé « backend » en exécutant la commande « mkdir backend » dans ta ligne de commande. Dans le répertoire « backend », crée un fichier nommé « server.js » en exécutant la commande « touch server.js » dans ta ligne de commande.

Exécute la commande suivante dans ton outil de ligne de commande pour installer le paquet ws :

   npm install ws

Dans le fichier server.js, ajoute le code suivant pour créer un serveur HTTP simple et un serveur WebSocket utilisant ce serveur HTTP :

   // backend/server.js

   const http = require("http");
   const { WebSocketServer } = require("ws");

   // Create a simple HTTP server
   const server = http.createServer((req, res) => {
     res.writeHead(200, { "Content-Type": "text/plain" });
     res.end("WebSocket server is running.\n");
   });

   // Create a WebSocket server using the HTTP server
   const wss = new WebSocketServer({ server });

   wss.on("connection", (ws) => {
     console.log("New client connected");

     // Send a welcome message to the newly connected client
     ws.send("Server: Welcome to the WebSocket server!");

     // Listen for messages from the client
     ws.on("message", (message) => {
       // Broadcast the received message to all connected clients
       wss.clients.forEach((client) => {
         if (client.readyState === ws.OPEN) {
           client.send(message.toString());
         }
       });
     });

     // Handle client disconnection
     ws.on("close", () => {
       console.log("Client disconnected");
     });
   });

   // Start the HTTP and WebSocket server on port 8080
   server.listen(8080, () => {
     console.log("Server is running on http://localhost:8080");
   });

Le code du serveur effectue les opérations suivantes :

• L’événement « on("connection") » est déclenché lorsqu’un nouveau client se connecte au serveur WebSocket. Le serveur envoie un message de bienvenue au client qui vient de se connecter et commence à écouter les messages provenant de ce client.
• L'événement « on("message") » est déclenché lorsqu'un message est reçu d'un client ; ce message est alors diffusé à tous les clients connectés.
• L'événement « on("close") » est déclenché lorsqu'un client se déconnecte du serveur WebSocket.
• La méthode `server.listen()` sert à démarrer le serveur HTTP et WebSocket sur le port 8080.

Pour lancer le serveur, accède au répertoire « backend » et exécute la commande « node server.js » dans ta ligne de commande. Ça va démarrer le serveur et le rendre accessible à l'application front-end à l'adresse http://localhost:8080.

Ouvre le fichier frontend/index.html dans deux onglets de navigateur Web pour tester l'application de chat en temps réel. Saisis les noms d'utilisateur et envoie des messages depuis un onglet : ils s'afficheront en temps réel dans l'autre onglet.

Le résultat final devrait ressembler à ça :

Considérations relatives à la production

Même si notre exemple fonctionne très bien pour le développement, les applications WebSocket en production nécessitent des considérations supplémentaires, comme la gestion des connexions, l’authentification et la gestion des interruptions réseau. Les plateformes modernes comme Upsun Cloud gèrent automatiquement bon nombre de ces aspects, notamment l’équilibrage de charge des connexions WebSocket et la gestion de la terminaison SSL.

Mets ton application WebSocket en production

Créer une application WebSocket n’est qu’un début ; c’est quand tu la fais fonctionner de manière fiable en production que les choses deviennent intéressantes. Tu dois gérer la scalabilité lorsque ton application de chat devient virale, déboguer les problèmes de performances dans les connexions en temps réel et tester de nouvelles fonctionnalités sans perturber l’expérience en direct de tes utilisateurs.

C’est là qu’Upsun Cloud se distingue. En tant que plateforme axée sur les développeurs et conçue pour les applications modernes, Upsun Cloud rend le déploiement d’applications WebSocket d’une simplicité rafraîchissante. Chaque push Git crée automatiquement un environnement de test complet, comprenant ton serveur WebSocket, ta base de données et toutes les dépendances, ce qui te permet de tester les fonctionnalités en temps réel avec des données réelles avant leur mise en production. 

De plus, grâce aux fonctionnalités intégrées d’observabilité et de surveillance des performances, tu peux repérer les goulots d’étranglement au niveau des connexions ou les problèmes de transmission des messages avant même que tes utilisateurs ne s’en rendent compte. Que tu développes une simple application de chat ou un outil complexe de collaboration en temps réel, Upsun Cloud gère la complexité de l’infrastructure pour que tu puisses te concentrer sur ce qui rend ton application unique.

Prêt à découvrir à quel point le déploiement de WebSocket peut être simple ? Commence ton essai gratuit et lance ton application en temps réel en quelques minutes.