WebSockets en JavaScript : créer des applications temps réel à partir de zéro

WebSockets en JavaScript : quand un site « vivant » n'est pas de la magie, mais du code

Avez-vous déjà réfléchi au fonctionnement des chats en ligne, des cotations boursières en temps réel ou des jeux multijoueurs dans le navigateur ? Le secret est simple et élégant — les WebSockets en JavaScript. Cette technologie transforme un site web statique en un organisme vivant qui réagit instantanément aux actions des autres utilisateurs.

Dans cet article, nous n'allons pas simplement aborder la théorie. Nous allons écrire un vrai chat à partir de zéro, apprendre à gérer les erreurs et comprendre pourquoi les applications temps réel avec WebSockets sont plus rapides que le bon vieux AJAX avec polling. Attachez vos ceintures — ça va être intéressant.

Pourquoi HTTP n'est-il pas adapté au temps réel ? (Petite mise à niveau)

Le HTTP classique fonctionne selon le principe « requête-réponse ». Le client demande — le serveur répond. Si le serveur veut dire quelque chose de lui-même (par exemple, « un nouveau message est arrivé »), il doit attendre que le client demande à nouveau. Cela ressemble à une correspondance par pigeons voyageurs — lent et inefficace.

Les développeurs ont trouvé des solutions de contournement :

\n
• Polling — le client interroge le serveur toutes les 5 secondes : « Alors, des nouvelles ? »
\n
• Long polling — le serveur maintient la connexion ouverte jusqu'à ce qu'une réponse soit disponible (mais c'est toujours un canal unidirectionnel).
\n

Et c'est là qu'entrent en scène les WebSockets. Imaginez que vous ouvrez une ligne téléphonique entre le navigateur et le serveur. Les deux peuvent parler à tout moment, simultanément, sans délai pour « décrocher le combiné ». C'est la magie de l'API WebSocket JavaScript.

Comment fonctionne WebSocket : protocole, poignée de main, messages

Techniquement, WebSocket est un protocole séparé (ws:// ou wss:// pour une connexion chiffrée). Tout commence par une poignée de main HTTP :

\n
1. Le client envoie une requête HTTP standard avec l'en-tête Upgrade: websocket.
\n
2. Le serveur répond : « 101 Switching Protocols » — et la connexion est « mise à niveau » vers WebSocket.
\n
3. Ensuite — full duplex : les données volent dans les deux sens sous forme de trames (texte ou données binaires).
\n

Dans le navigateur, pour travailler avec WebSocket, on utilise l'objet intégré WebSocket. Aucune bibliothèque supplémentaire n'est nécessaire — le WebSocket JavaScript pur fonctionne directement dans tous les navigateurs modernes.

Écrivons notre premier chat temps réel en JavaScript

Créons un chat simple. La partie serveur sera écrite en Node.js avec la bibliothèque ws (la plus populaire pour WebSocket Node.js), le client en JavaScript pur.

Étape 1. Installation du serveur

npm init -y\nnpm install ws

Étape 2. Code serveur (server.js)

const WebSocket = require('ws');\n\nconst wss = new WebSocket.Server({ port: 8080 });\n\nwss.on('connection', function connection(ws) {\n    console.log('Nouvel utilisateur connecté');\n\n    // Envoyer un message de bienvenue au nouveau client\n    ws.send(JSON.stringify({\n        type: 'system',\n        message: 'Bienvenue dans le chat !'\n    }));\n\n    // Recevoir les messages du client\n    ws.on('message', function incoming(data) {\n        const message = JSON.parse(data);\n        console.log('Reçu :', message);\n\n        // Diffuser le message à tous les clients connectés\n        wss.clients.forEach(function each(client) {\n            if (client.readyState === WebSocket.OPEN) {\n                client.send(JSON.stringify({\n                    type: 'message',\n                    user: message.user,\n                    text: message.text,\n                    time: new Date().toLocaleTimeString()\n                }));\n            }\n        });\n    });\n\n    // Gérer la déconnexion\n    ws.on('close', function() {\n        console.log('Utilisateur déconnecté');\n    });\n});\n\nconsole.log('Serveur démarré sur ws://localhost:8080');

Étape 3. Client