WebSocket en JavaScript : créer des applications temps réel avec Node.js

WebSocket sur JavaScript : créer des applications temps réel avec Node.js

Le web moderne exige une réaction instantanée. Les utilisateurs s'attendent à ce que les messages dans un chat soient livrés en quelques millisecondes, que les cotations boursières se mettent à jour sans rechargement de page et que les notifications arrivent en temps réel. La technologie WebSocket en JavaScript résout ce problème en assurant une connexion bidirectionnelle permanente entre le client et le serveur. Dans cet article, nous allons voir comment utiliser WebSocket dans l'environnement Node.js pour créer des applications temps réel rapides et évolutives.

Qu'est-ce que WebSocket et pourquoi en a-t-on besoin ?

Le protocole HTTP traditionnel fonctionne sur le principe "requête-réponse" : le client envoie une requête, le serveur répond, la connexion se ferme. Pour obtenir de nouvelles données, le client doit constamment interroger le serveur (polling) ou utiliser des requêtes HTTP longues (long polling). Cela est inefficace, crée une charge excessive et augmente la latence.

WebSocket (RFC 6455) est un protocole qui établit une connexion duplex permanente via un seul canal TCP. Après une poignée de main (handshake) via HTTP, le serveur et le client peuvent s'envoyer des données à tout moment sans en-têtes supplémentaires. Cela fait de WebSocket une solution idéale pour :

• Les chats et messageries instantanées
• Les jeux en ligne et l'édition collaborative
• Les cotations boursières et les tableaux de bord financiers
• Les notifications push et la surveillance
• La diffusion de données en continu (IoT, logs)

Installation et configuration du serveur WebSocket sur Node.js

Pour travailler avec WebSocket côté serveur, nous allons utiliser la bibliothèque ws — l'implémentation la plus populaire et fiable pour Node.js. Installons-la via npm :

npm install ws

Créons un serveur WebSocket simple. D'abord, importons le module et créons une instance du serveur sur le port 8080 :

const WebSocket = require('ws');

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

wss.on('connection', function connection(ws) {    console.log('Nouveau client connecté');

    // Envoie un message de bienvenue au client    ws.send('Bienvenue sur le serveur WebSocket !');

    // Gère les messages entrants    ws.on('message', function incoming(message) {        console.log('Reçu : %s', message);        // Répond à tous les clients connectés        wss.clients.forEach(function each(client) {            if (client.readyState === WebSocket.OPEN) {                client.send(`Echo : ${message}`);            }        });    });

    // Gère la déconnexion du client    ws.on('close', function close() {        console.log('Client déconnecté');    });

    // Gère les erreurs    ws.on('error', function error(err) {        console.error('Erreur WebSocket :', err);    });});

console.log('Serveur WebSocket démarré sur ws://localhost:8080');

Ce code crée un simple serveur d'écho : tout message envoyé par un client sera diffusé à tous les utilisateurs connectés. Notez la vérification de readyState — elle garantit que nous n'essayons pas d'envoyer des données dans une connexion fermée.

Partie cliente WebSocket dans le navigateur

Côté client (navigateur), WebSocket est un objet intégré — aucune bibliothèque supplémentaire n'est nécessaire. Connectons-nous à notre serveur et implémentons un chat simple :

// Crée une connexion WebSocketconst socket = new WebSocket('ws://localhost:8080');

// Gestionnaire d'ouverture de connexionsocket.addEventListener('open', function (event) {    console.log('Connexion établie');    socket.send('Bonjour, serveur !');});

// Gestionnaire de réception de messagesocket.addEventListener('message', function (event) {    const messagesDiv = document.getElementById('messages');    const messageElement = document.createElement('div');