WebSocket en JavaScript : applications en temps réel de A à Z

Introduction à WebSocket en JavaScript : qu'est-ce que la communication en temps réel ?

Dans le web moderne, les utilisateurs sont habitués aux mises à jour instantanées : les messages dans les chats arrivent sans rechargement de page, les cotations boursières changent en temps réel, et dans les jeux en ligne, les actions des adversaires sont visibles immédiatement. Tout cela est devenu possible grâce à la technologie WebSocket — un protocole qui assure une connexion bidirectionnelle permanente entre le client et le serveur.

Contrairement à la requête HTTP classique, où le client envoie une requête et attend une réponse, WebSocket permet au serveur d'envoyer des données au client à tout moment. Cela ouvre des possibilités infinies pour créer des applications en temps réel en JavaScript. Dans cet article, nous allons explorer WebSocket depuis les bases jusqu'à la création d'un chat complet sur Node.js.

Fondamentaux de WebSocket : comment fonctionne le protocole

Qu'est-ce que WebSocket et en quoi diffère-t-il de HTTP ?

WebSocket est un protocole de communication fonctionnant sur TCP. Il commence par une requête HTTP (poignée de main), après quoi la connexion est "mise à niveau" vers WebSocket, et les données sont transmises dans les deux sens sans en-têtes supplémentaires. Cela le rend idéal pour les applications où une faible latence est cruciale.

Principaux avantages de WebSocket par rapport aux méthodes traditionnelles (Polling, Long Polling) :

• Connexion permanente — pas besoin de créer une nouvelle requête HTTP pour chaque mise à jour
• Faible latence — les données sont transmises instantanément dès qu'elles apparaissent sur le serveur
• Économie de trafic — taille minimale des trames (seulement 2 octets de données de service)
• Communication bidirectionnelle — le serveur peut initier l'envoi de données

Établissement de la connexion : la poignée de main

Le processus commence par une requête HTTP du client contenant l'en-tête Upgrade: websocket. Le serveur supportant WebSocket répond avec le statut 101 Switching Protocols. Après cela, la connexion est considérée comme établie.

// Exemple de requête HTTP pour établir une connexion WebSocketGET /chat HTTP/1.1Host: example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==Sec-WebSocket-Version: 13

Création d'un serveur WebSocket sur Node.js

Installation et configuration de la bibliothèque ws

Pour travailler avec WebSocket côté serveur, nous utiliserons la bibliothèque populaire ws. Elle est légère, rapide et entièrement conforme à la spécification du protocole.

// Installation de la bibliothèque// npm install ws

Créons un serveur WebSocket simple :

const WebSocket = require('ws');

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

wss.on('connection', (ws) => {    console.log('Nouveau client connecté');        ws.on('message', (message) => {        console.log('Message reçu :', message.toString());        // Envoyer une réponse à tous les clients connectés        wss.clients.forEach((client) => {            if (client.readyState === WebSocket.OPEN) {                client.send(`Écho : ${message}`);            }        });    });        ws.send('Bienvenue sur le serveur WebSocket !');});

console.log('Serveur WebSocket démarré sur le port 8080');

Connexion du client en JavaScript

Côté client (navigateur), on utilise l'objet natif WebSocket :

const socket = new WebSocket('ws://localhost:8080');

socket.onopen = () => {    console.log('Connexion établie');    socket.send('Bonjour, serveur !');};

socket.onmessage = (event) => {    console.log('Message du serveur :', event.data);};

socket.onclose = () => {    console.log('Connexion fermée');};

socket.onerror = (error) => {    console.error('Erreur WebSocket :', error);};

Création d'un chat en temps réel en JavaScript et