Introduction

WebSocket est un protocole qui permet des connexions persistantes full-duplex entre client et serveur sur une seule socket TCP. Contrairement au HTTP classique où le client doit faire une requête et le serveur répond, une connexion WebSocket reste ouverte et les deux côtés peuvent envoyer des messages à tout moment. Cela le rend parfait pour les applications de chat, les tableaux de bord en temps réel, les jeux multijoueurs, et toute fonctionnalité nécessitant des mises à jour en temps réel.

Dans cette leçon, vous allez construire la configuration WebSocket la plus minimale possible : un serveur en Node.js utilisant la célèbre bibliothèque `ws`, et un client navigateur qui s'y connecte et échange quelques messages. Pas de frameworks, pas de bases de données — juste le protocole brut pour que vous compreniez ce qui se passe sous le capot.

Configuration du projet

Créez un nouveau dossier pour le projet et initialisez-le. Vous devez avoir Node.js installé (la version 18 ou ultérieure convient).

mkdir ws-demo
cd ws-demo
npm init -y
npm install ws

Le package `ws` est une implémentation WebSocket rapide et largement utilisée pour Node.js. Après `npm install`, vous aurez un dossier `node_modules` et un `package.json` qui liste `ws` comme dépendance.

Écriture du serveur

Créez un fichier appelé `server.js`. Le serveur fait trois choses : importer la bibliothèque, créer un serveur WebSocket lié à un port, et définir ce qui se passe lors de la connexion et à la réception des messages.

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

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

  ws.on('message', (data) => {
    const text = data.toString();
    console.log('Received:', text);
    ws.send(`Server echo: ${text}`);
  });

  ws.send('Welcome to the WebSocket server!');
});

console.log('WebSocket server is listening on ws://localhost:8080');

L'événement `connection` se déclenche une fois par client qui se connecte. Le callback reçoit un objet `ws` représentant la socket de ce client individuel. À l'intérieur du callback, vous attachez un listener `message`. Lorsqu'un message arrive, `data` est un Buffer par défaut, donc `toString()` le convertit en texte brut. Le serveur renvoie ensuite le message en écho, préfixé par `Server echo:`.

Lancez le serveur avec `node server.js`. Vous devriez voir la ligne de log « listening » et rien d'autre jusqu'à ce qu'un client se connecte.

Écriture du client navigateur

Créez un fichier appelé `index.html`. Un navigateur peut ouvrir une connexion WebSocket en utilisant le global `WebSocket` intégré — aucune bibliothèque n'est nécessaire côté client.

<!DOCTYPE html>
<html>
<head><title>WebSocket Demo</title></head>
<body>
  <h1>WebSocket Demo</h1>
  <input id="msg" placeholder="Type a message" />
  <button id="send">Send</button>
  <ul id="log"></ul>

  <script>
    const log = document.getElementById('log');
    const ws = new WebSocket('ws://localhost:8080');

    ws.addEventListener('open', () => {
      log.innerHTML += '<li>Connected to server</li>';
    });

    ws.addEventListener('message', (event) => {
      log.innerHTML += '<li>From server: ' + event.data + '</li>';
    });

    document.getElementById('send').addEventListener('click', () => {
      const input = document.getElementById('msg');
      ws.send(input.value);
      input.value = '';
    });
  </script>
</body>
</html>

L'événement `open` se déclenche lorsque le handshake est terminé. Ensuite, `ws.send('text')` envoie un message textuel au serveur. La réponse renvoyée par le serveur arrive sous forme d'événement `message` dont `event.data` est la chaîne envoyée par le serveur.

Tester l'ensemble de bout en bout

Démarrez le serveur avec `node server.js`. Ensuite, ouvrez `index.html` dans votre navigateur (vous pouvez double-cliquer dessus, ou utiliser un outil comme `npx serve`). Dans le terminal, vous devriez voir « A client connected » au moment où la page se charge. Tapez quelque chose dans le champ de saisie et cliquez sur Send. Le log du navigateur affichera votre message préfixé par `Server echo:`, et le terminal enregistrera chaque message reçu par le serveur.

Erreurs courantes

Oublier `data.toString()` côté serveur vous donne un objet Buffer brut au lieu de la chaîne lisible envoyée par le client. Oublier le préfixe de protocole `ws://` dans l'URL du navigateur provoquera une erreur de syntaxe car le constructeur `WebSocket` exige l'URL complète avec le schéma. Si le serveur n'est pas en cours d'exécution, l'événement `open` du navigateur ne se déclenchera jamais et vous ne verrez aucune entrée de log — vérifiez toujours le terminal en premier quand rien ne se passe.

Résumé

Vous disposez maintenant d'un serveur WebSocket d'écho fonctionnel et d'un client navigateur. Le serveur utilise `ws` pour écouter sur le port 8080, accepte les connexions et renvoie en écho tout message qu'il reçoit. Le client ouvre la connexion avec `new WebSocket('ws://localhost:8080')` et utilise les événements `send` et `message` pour communiquer. Ce pattern — un serveur, plusieurs clients connectés, des messages bidirectionnels — est la fondation sur laquelle se construit chaque fonctionnalité temps réel.