Socket.io pour JavaScript (Node.js) : guide complet avec exemples

Qu'est-ce que Socket.io et pourquoi en a-t-on besoin ?

Socket.io est une puissante bibliothèque JavaScript qui assure une communication bidirectionnelle en temps réel (real-time) entre le client (navigateur) et le serveur (Node.js). Contrairement au protocole HTTP traditionnel où le client envoie une requête et attend une réponse, Socket.io permet au serveur d'initier lui-même l'envoi de données au client à tout moment, et vice versa.

Pourquoi en a-t-on besoin ? Imaginez une application de chat, un jeu en ligne, un tableau de bord avec des graphiques en direct ou un système d'édition collaborative de documents. Dans tous ces scénarios, les données doivent être mises à jour instantanément, sans rechargement de la page. HTTP n'est pas adapté pour cela car il fonctionne sur le principe "requête-réponse". Socket.io résout ce problème en établissant une connexion permanente (généralement via WebSocket) par laquelle les données peuvent être transmises dans les deux sens à tout moment.

Caractéristiques clés de Socket.io :

\n
• Bidirectionnalité : Le serveur et le client peuvent s'envoyer des messages mutuellement.
\n
• Temps réel : Les messages sont livrés instantanément (avec une latence minimale).
\n
• Reconnexion automatique : Si la connexion est interrompue, Socket.io tente automatiquement de la rétablir.
\n
• Salons (Rooms) : Possibilité de regrouper les clients et d'envoyer des messages uniquement à un groupe spécifique.
\n
• Espaces de noms (Namespaces) : Division de l'application en canaux de communication indépendants.
\n
• Fiabilité : Si WebSocket n'est pas pris en charge, Socket.io bascule automatiquement vers d'autres méthodes (long-polling, FlashSocket, etc.).
\n

Installation de Socket.io

Socket.io se compose de deux parties : la partie serveur (pour Node.js) et la partie client (pour le navigateur). Les deux s'installent via npm.

Installation de la partie serveur

Ouvrez un terminal dans le dossier de votre projet et exécutez la commande :

npm install socket.io

Installation de la partie client

Le script client peut être inclus de deux manières :

1. Via CDN (le plus simple pour commencer) :

<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>

2. Via npm (pour les projets avec des bundlers, par exemple Webpack) :

npm install socket.io-client

Démarrage rapide : premier chat

Créons un chat très simple où les messages d'un client sont vus par tous les autres.

Étape 1 : Serveur (fichier server.js)

// server.js\nconst http = require('http');\nconst { Server } = require("socket.io");\n\n// 1. Créer un serveur HTTP\nconst server = http.createServer((req, res) => {\n    res.writeHead(200, { 'Content-Type': 'text/plain' });\n    res.end('Serveur Socket.io démarré');\n});\n\n// 2. Créer une instance Socket.io, liée au serveur\nconst io = new Server(server);\n\n// 3. Gestionnaire de connexion d'un nouveau client\nio.on('connection', (socket) => {\n    console.log('Nouvel utilisateur connecté :', socket.id);\n\n    // 4. Écouter l'événement 'chat message' du client\n    socket.on('chat message', (msg) => {\n        console.log('Message :', msg);\n        // 5. Envoyer le message à TOUS les clients connectés (y compris l'expéditeur)\n        io.emit('chat message', msg);\n    });\n\n    // 6. Gestionnaire de déconnexion du client\n    socket.on('disconnect', () => {\n        console.log('Utilisateur déconnecté :', socket.id);\n    });\n});\n\n// 7. Démarrer le serveur sur le port 3000\nserver.listen(3000, () => {\n    console.log('Serveur démarré sur http://localhost:3000');\n});\n

Étape 2 : Client (fichier index.html)

<!DOCTYPE html>\n<html>\n<head>\n    <title>Chat Socket.io</title>\n    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>