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

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

Les applications web modernes nécessitent un échange instantané de données entre le client et le serveur. Le protocole HTTP traditionnel, basé sur les requêtes-réponses, est peu adapté aux tâches où la vitesse est importante : chats en ligne, cotations boursières, jeux multijoueurs ou systèmes de notifications. C'est ici que le protocole WebSocket vient à la rescousse. Dans cet article, nous allons voir comment fonctionne WebSocket en JavaScript et créer une application temps réel simple avec Node.js.

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

WebSocket est un protocole de communication full-duplex (bidirectionnelle) sur une connexion TCP. Contrairement à HTTP, où le client initie toujours la requête, WebSocket permet au serveur d'envoyer des données au client à tout moment. Cela est réalisé grâce à l'établissement d'un canal bidirectionnel permanent après la poignée de main initiale (handshake).

Les principaux avantages de WebSocket par rapport à HTTP :

• Faible latence — les données sont transmises instantanément sans en-têtes HTTP répétés.
• Économie de trafic — surcharge minimale après l'établissement de la connexion.
• Connexion permanente — pas besoin de polling ou de long-polling.
• Communication bidirectionnelle — le serveur peut initier l'envoi de données.

WebSocket est idéal pour les applications temps réel : chats, notifications, édition collaborative de documents, terminaux financiers et jeux en ligne.

Installation et configuration du serveur WebSocket sur Node.js

Pour travailler avec WebSocket sur Node.js, nous allons utiliser la bibliothèque populaire ws. Elle est légère, fiable et bien documentée.

Commençons par l'installation :

npm init -ynpm install ws

Créons maintenant un serveur WebSocket simple qui acceptera les connexions et répondra aux messages :

// server.jsconst WebSocket = require('ws');

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

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

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

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

    // Traite la fermeture de la connexion    ws.on('close', function close() {        console.log('Client déconnecté');    });});

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

Lancez le serveur avec la commande node server.js. Le serveur est prêt à accepter les connexions.

Création de la partie cliente en JavaScript

La partie cliente fonctionne directement dans le navigateur. L'API WebSocket est intégrée dans tous les navigateurs modernes, donc aucune bibliothèque supplémentaire n'est nécessaire.

Créons une page HTML avec une interface simple :

<!DOCTYPE html><html><head>    <title>Chat WebSocket</title>    <style>        #messages { height: 300px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; }        #input { width: 300px; }    </style></head><body>    <h2>Chat Temps Réel</h2>    <div id="messages"></div>    <input type="text" id="input" placeholder="Entrez un message..." />    <button onclick="sendMessage()">Envoyer</button>

    <script>        // Connexion au serveur WebSocket        const socket = new WebSocket('ws://localhost:8080');

        // Gestionnaire d'ouverture