WebSockets en TypeScript : Créer des applications temps réel de zéro

Pourquoi les WebSockets sont-ils la magie du temps réel ?

Imaginez que vous ouvrez un chat de support, envoyez un message et... attendez. Une seconde, deux, cinq. Familier ? C'est la requête HTTP classique : vous demandez, le serveur répond. Mais que faire si le serveur veut lui-même dire quelque chose ? Par exemple, une nouvelle commande dans un CRM ou une voix dans un jeu en ligne ? Là, HTTP échoue — il a besoin d'un ping-pong constant.

Les WebSockets résolvent ce problème radicalement. Ils créent un canal bidirectionnel permanent entre le client et le serveur. Une seule « poignée de main » et les données volent instantanément dans les deux sens. Pas de trafic superflu, pas de latence. Rien que la pure magie du temps réel.

Dans cet article, nous allons construire une application temps réel complète en TypeScript. Nous apprendrons à travailler avec un serveur WebSocket sur Node.js, configurerons le client et ajouterons même la gestion des erreurs. À la fin, vous serez capable d'écrire votre propre chat, système de notifications ou jeu multijoueur.

Que sont les WebSockets et pourquoi en avons-nous besoin ?

WebSocket est un protocole basé sur TCP qui assure une connexion permanente entre le navigateur et le serveur. Contrairement à HTTP, où chaque requête ouvre et ferme la connexion, WebSocket la maintient ouverte.

Où est-ce critique ?

\n
• Chats et messageries — les messages arrivent sans délai.
\n
• Jeux en ligne — les positions des joueurs se mettent à jour en temps réel.
\n
• Cotations boursières — les prix changent chaque milliseconde.
\n
• Édition collaborative — comme Google Docs.
\n

TypeScript ajoute à cela un typage strict. Vous n'enverrez pas accidentellement une chaîne au lieu d'un nombre — le compilateur attrapera l'erreur dès la phase de développement. Cela évite des bugs en production.

Configuration du projet : Node.js + TypeScript + WebSocket

Commençons par l'initialisation. Assurez-vous d'avoir Node.js (version 18+) et npm installés.

mkdir websocket-ts-chat\ncd websocket-ts-chat\nnpm init -y\nnpm install ws @types/ws typescript ts-node @types/node\nnpx tsc --init

Dans tsconfig.json, activez le mode strict et spécifiez outDir: "./dist". C'est la base pour tout projet TypeScript.

Écrire le serveur WebSocket en TypeScript

Créez le fichier server.ts. Ici, nous allons lancer un serveur WebSocket sur le port 8080.

import { WebSocketServer, WebSocket } from 'ws';\n\nconst wss = new WebSocketServer({ port: 8080 });\n\ninterface CustomWebSocket extends WebSocket {\n    id: string;\n    username?: string;\n}\n\nwss.on('connection', (ws: CustomWebSocket) => {\n    ws.id = generateId();\n    console.log(`Client connecté : ${ws.id}`);\n\n    ws.on('message', (data: Buffer) => {\n        const message = data.toString();\n        console.log(`Reçu : ${message}`);\n\n        // Diffuse à tous sauf à l'expéditeur\n        wss.clients.forEach((client) => {\n            if (client !== ws && client.readyState === WebSocket.OPEN) {\n                client.send(`[${ws.id}]: ${message}`);\n            }\n        });\n    });\n\n    ws.on('close', () => {\n        console.log(`Client déconnecté : ${ws.id}`);\n    });\n\n    ws.send('Bienvenue dans le chat !');\n});\n\nfunction generateId(): string {\n    return Math.random().toString(36).substring(2, 9);\n}\n\nconsole.log('Serveur démarré sur ws://localhost:8080');

Analysons les points clés :

\n
• WebSocketServer — crée le serveur.
\n
• connection — événement lors de la connexion d'un nouveau client.
\n
• message — nous recevons les données du client.
\n
• send — nous envoyons les données en retour.
\n

Lancez le serveur avec la commande npx ts-node server.ts. Il écoutera sur le port 8080.

Partie cliente : se connecter au WebSocket

Créons maintenant client.ts. Ce sera un script simple qui se connecte au serveur et envoie un message.