WebSocket en TypeScript : Création d'applications en temps réel

WebSocket sur TypeScript : création d'applications en temps réel

Les applications web modernes nécessitent un échange instantané de données entre le client et le serveur. Le protocole WebSocket fournit une connexion bidirectionnelle permanente, ce qui le rend idéal pour créer des chats, des systèmes de notifications, des jeux en ligne et d'autres services en temps réel. Dans cet article, nous allons détailler comment travailler avec WebSocket sur TypeScript — de la configuration du serveur à l'implémentation du client.

Qu'est-ce que WebSocket et pourquoi en a-t-on besoin ?

WebSocket est un protocole de communication qui fournit un canal full-duplex sur une seule connexion TCP. Contrairement au HTTP traditionnel, où le client envoie une requête et attend une réponse, WebSocket permet au serveur d'initier lui-même l'envoi de données au client.

Les principaux avantages de WebSocket :

• Connexion permanente — pas besoin d'établir une nouvelle connexion pour chaque requête
• Faible latence — les données sont transmises instantanément sans surcharge des en-têtes HTTP
• Communication bidirectionnelle — le serveur peut envoyer des données sans requête du client
• Efficacité — moins de trafic par rapport aux solutions de polling

WebSocket est largement utilisé dans les applications financières (cotations boursières), les réseaux sociaux (likes, commentaires en temps réel), les jeux multijoueurs, les systèmes de surveillance et l'IoT.

Configuration du serveur WebSocket sur TypeScript

Pour créer le serveur, nous allons utiliser la bibliothèque populaire ws. Installez-la via npm :

npm init -ynpm install wsnpm install -D typescript @types/ws @types/nodenpx tsc --init

Créons le fichier server.ts :

import { WebSocketServer, WebSocket } from 'ws';

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

interface CustomMessage {  type: string;  payload: any;}

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

  // Envoi d'un message de bienvenue  const welcomeMessage: CustomMessage = {    type: 'welcome',    payload: { message: 'Bienvenue sur le serveur !' }  };  ws.send(JSON.stringify(welcomeMessage));

  // Traitement des messages entrants  ws.on('message', (data: Buffer) => {    try {      const message: CustomMessage = JSON.parse(data.toString());            switch (message.type) {        case 'chat':          // Diffusion du message à tous les clients connectés          broadcast(message, ws);          break;        case 'ping':          ws.send(JSON.stringify({ type: 'pong', payload: {} }));          break;        default:          console.log('Type de message inconnu :', message.type);      }    } catch (error) {      console.error('Erreur lors du traitement du message :', error);    }  });

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

  ws.on('error', (error: Error) => {    console.error('Erreur WebSocket :', error);  });});

function broadcast(message: CustomMessage, sender: WebSocket) {  wss.clients.forEach((client) => {    if (client !== sender && client.readyState === WebSocket.OPEN) {      client.send(JSON.stringify(message));    }  });}

console.log(`Serveur WebSocket démarré sur ws://localhost:${PORT}`);

Lancez le serveur avec la commande npx ts-node server.ts. Le serveur écoutera sur le port 8080 et traitera les connexions entrantes.

Création du client WebSocket sur TypeScript

La partie cliente peut être implémentée aussi bien pour le navigateur que pour Node.js. Examinons les deux options.

Client navigateur

Créons le fichier client.ts pour une utilisation dans une application web :

class WebSocketClient {  private socket: WebSocket;  private url: string;

  constructor(url: string) {    this.url = url;    this.socket = new WebSocke