Bibliothèques WebSocket TypeScript : ws, Socket.IO, uWebSockets.js

Bibliothèques WebSocket TypeScript : aperçu complet et exemples pratiques

Dans le développement web moderne, la technologie WebSocket est devenue la norme pour créer des applications en temps réel (real-time). Grâce à une connexion bidirectionnelle permanente entre le client et le serveur, WebSocket est idéal pour les chats, les jeux en ligne, les traders boursiers, les systèmes de surveillance et tout autre projet nécessitant un transfert de données instantané. Dans cet article, nous allons détailler trois bibliothèques WebSocket principales pour TypeScript : ws, Socket.IO et uWebSockets.js, y compris leur installation, configuration et exemples de code.

1. Bibliothèque ws — WebSocket léger et rapide pour Node.js

La bibliothèque ws est l'implémentation la plus populaire et minimaliste du protocole WebSocket pour Node.js. Elle n'ajoute aucune abstraction supplémentaire, fonctionne directement avec le protocole natif et offre des performances maximales. La prise en charge de TypeScript se fait via des types qui peuvent être installés séparément.

Installation

npm install wsnpm install -D @types/ws

Exemple de serveur simple en TypeScript

import { WebSocketServer, WebSocket } from 'ws';

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', (ws: WebSocket) => {  console.log('Client connecté');

  ws.on('message', (message: Buffer) => {    console.log('Message reçu :', message.toString());    // Envoi de la réponse à tous les clients connectés    wss.clients.forEach((client) => {      if (client.readyState === WebSocket.OPEN) {        client.send(`Écho : ${message.toString()}`);      }    });  });

  ws.on('close', () => {    console.log('Client déconnecté');  });});

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

Code client (navigateur)

const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {  console.log('Connexion établie');  ws.send('Bonjour, serveur !');};

ws.onmessage = (event: MessageEvent) => {  console.log('Réponse du serveur :', event.data);};

Avantages : surcharge minimale, contrôle total du protocole, parfait pour les systèmes à forte charge.

Inconvénients : pas de prise en charge intégrée des salles, de reconnexion automatique ou de fallback vers le transport HTTP.

2. Socket.IO — solution universelle avec une API riche

Socket.IO n'est pas simplement un WebSocket, mais un framework complet pour les communications en temps réel. Il utilise WebSocket comme transport principal, mais bascule automatiquement sur le HTTP long-polling si WebSocket n'est pas disponible (par exemple, derrière un proxy ou avec des navigateurs anciens). Socket.IO fournit des mécanismes prêts à l'emploi : salles, espaces de noms (namespaces), reconnexion automatique, accusés de réception de messages (acknowledgements) et bien plus encore.

Installation

npm install socket.io socket.io-clientnpm install -D @types/socket.io

Exemple de serveur avec salles en TypeScript

import { Server, Socket } from 'socket.io';import http from 'http';

const server = http.createServer();const io = new Server(server, {  cors: { origin: '*' }});

io.on('connection', (socket: Socket) => {  console.log('Utilisateur connecté :', socket.id);

  // Rejoindre une salle  socket.on('join_room', (roomName: string) => {    socket.join(roomName);    socket.to(roomName).emit('user_joined', socket.id);  });

  // Envoyer un message dans une salle  socket.on('room_message', (data: { room: string; message: string }) => {    io.to(data.room).emit('new_message', {      user: socket.id,      text: data.message    });  });

  socket.on('disconnect', () => {    console.log('Utilisateur déconnecté :', socket.id);  });});

server.listen(3000, () => {  console.log('Serveur Socket.IO démarré sur le port