Bibliothèque WebSocket en TypeScript : ws, Socket.IO et SockJS

Bibliothèque WebSocket TypeScript : aperçu complet pour un site éducatif

WebSocket est un protocole assurant une communication bidirectionnelle en temps réel entre le client et le serveur. Dans l'écosystème TypeScript, il existe plusieurs bibliothèques populaires qui simplifient le travail avec WebSocket. Dans cet article, nous examinerons trois outils principaux : ws, Socket.IO et SockJS, et montrerons comment les intégrer dans un projet éducatif en TypeScript.

Pourquoi WebSocket est-il important pour l'éducation ?

Les sites éducatifs nécessitent souvent des fonctionnalités en temps réel : chats, édition collaborative de code, notifications, diffusions en direct. WebSocket permet d'éviter les interrogations constantes du serveur et assure un transfert instantané des données. TypeScript ajoute le typage, ce qui est crucial pour la maintenance de grands projets.

1. Bibliothèque ws — WebSocket minimaliste pour Node.js

ws est la bibliothèque WebSocket la plus simple et la plus rapide pour la partie serveur de Node.js. Elle convient parfaitement aux cas où un WebSocket pur est nécessaire, sans fonctionnalités supplémentaires.

Installation

npm install wsnpm install @types/ws --save-dev

Exemple de serveur en TypeScript

import { WebSocketServer } from 'ws';

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

wss.on('connection', (ws) => {  console.log('Nouvelle connexion');

  ws.send('Bienvenue sur le site éducatif !');

  ws.on('message', (data) => {    console.log(`Reçu : ${data}`);    ws.send(`Écho : ${data}`);  });

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

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

Exemple de client en TypeScript

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

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

ws.onmessage = (event) => {  console.log('Message du serveur :', event.data);};

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

Avantages : taille minimale, hautes performances, contrôle total.
Inconvénients : pas de reconnexion automatique, pas de support des salons.

2. Socket.IO — bibliothèque puissante pour les applications temps réel

Socket.IO est la norme de facto pour les applications temps réel. Elle offre la reconnexion automatique, les salons, les espaces de noms et le support des transports de repli (par exemple, le long polling).

Installation

npm install socket.io socket.io-clientnpm install @types/socket.io --save-dev

Exemple de serveur en TypeScript

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

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

  socket.on('send_message', (data: { room: string; message: string }) => {    io.to(data.room).emit('new_message', {      user: 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');});

Exemple de client en TypeScript

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

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

socket.on('connect', () => {  console.log('Connecté au serveur, ID :', socket.id);  socket.emit('join_room', 'javascript-lesson');});

socket.on('new_message', (data) => {  console.log(`${data.user} : ${