Bibliothèques WebSocket TypeScript : ws et Socket.IO – guide complet

Bibliothèques WebSocket TypeScript : ws et Socket.IO

WebSocket est un protocole assurant une communication bidirectionnelle en temps réel entre le client et le serveur. Dans l'écosystème TypeScript/Node.js, les bibliothèques les plus populaires pour travailler avec WebSocket sont ws (légère) et Socket.IO (avec des fonctionnalités supplémentaires). Dans cet article, nous examinerons en détail les deux bibliothèques, leur installation, leur utilisation de base et des exemples de code en TypeScript.

1. Bibliothèque ws

ws est une bibliothèque WebSocket minimaliste et rapide pour Node.js, entièrement compatible avec TypeScript. Elle fournit une API WebSocket pure sans abstractions superflues.

Installation

npm install wsnpm install -D @types/ws

Création d'un serveur WebSocket en TypeScript

import { WebSocketServer, WebSocket } from 'ws';

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

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

  // Envoi d'un message au client  ws.send('Bienvenue !');

  // Traitement des messages entrants  ws.on('message', (data: Buffer) => {    const message = data.toString();    console.log(`Reçu : ${message}`);

    // Envoi de la réponse à tous les clients connectés    wss.clients.forEach((client) => {      if (client.readyState === WebSocket.OPEN) {        client.send(`Écho : ${message}`);      }    });  });

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

console.log('Serveur WebSocket démarré sur le port 8080');

Code client en TypeScript

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}`);};

ws.onclose = () => {  console.log('Connexion fermée');};

2. Bibliothèque Socket.IO

Socket.IO est une bibliothèque de plus haut niveau, construite au-dessus de WebSocket. Elle ajoute :

• Reconnexion automatique en cas de perte de connexion
• Support des salles et des espaces de noms (namespaces)
• Mécanisme de fallback (passage au HTTP long-polling si WebSocket est indisponible)
• Support intégré des événements (events)

Installation

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

Serveur en TypeScript avec Socket.IO

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

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

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

  // Rejoindre une salle  socket.on('join_room', (room: string) => {    socket.join(room);    console.log(`Socket ${socket.id} a rejoint la salle ${room}`);  });

  // Gestion d'un événement personnalisé  socket.on('chat_message', (data: { room: string; message: string }) => {    // Envoi du message à tous dans la salle, sauf à l'expéditeur    socket.to(data.room).emit('chat_message', {      userId: socket.id,      message: 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 3000');});

Client en TypeScript avec Socket.IO

import { io, Socket } from 'socket.io-client';

const socket: Socket = io('http://localhost:3000');

socket.on('connect', () => {  console.log('Connecté au serveur');

  // Rejoindre une salle  socket.emit('join_room', 'room_1');});

socket.on('chat_message', (data: { us