WebSocket en TypeScript : applications temps réel de A à Z

Introduction à WebSocket et TypeScript pour les applications temps réel

Les applications web modernes nécessitent de plus en plus un échange instantané de données entre le client et le serveur. Le protocole HTTP traditionnel, fonctionnant selon le principe « requête-réponse », ne convient pas aux tâches où la vitesse de livraison des informations est critique : chats en ligne, cotations boursières, jeux multijoueurs ou systèmes de surveillance. C'est ici que WebSocket vient à la rescousse — un protocole assurant une connexion bidirectionnelle permanente.

En combinaison avec TypeScript — un sur-ensemble strictement typé de JavaScript — le développement d'applications WebSocket devient non seulement efficace, mais aussi sûr. TypeScript permet de détecter les erreurs lors de la compilation, améliore la lisibilité du code et simplifie le refactoring. Dans cet article, nous allons parcourir le cycle complet de création d'une application temps réel avec WebSocket et TypeScript : de la théorie aux exemples pratiques.

Fondamentaux de WebSocket : comment fonctionne le protocole

Qu'est-ce que WebSocket ?

WebSocket (RFC 6455) est un protocole qui établit une connexion permanente entre le client (navigateur) et le serveur. Après la poignée de main (handshake), les données peuvent être transmises dans les deux sens sans requêtes HTTP répétées. Cela réduit les latences et la charge réseau.

Différence avec HTTP

• HTTP : le client initie une requête → le serveur répond → la connexion se ferme (ou reste ouverte pour les requêtes suivantes, mais toujours initiée par le client).
• WebSocket : après l'établissement de la connexion, le serveur peut envoyer des données au client à tout moment (notifications push).

Cycle de vie d'une connexion WebSocket

1. Poignée de main (Handshake) : le client envoie une requête HTTP avec l'en-tête Upgrade: websocket. Le serveur répond avec le code 101 Switching Protocols.
2. Échange de données : après une poignée de main réussie, la connexion bascule vers le protocole WebSocket. Les données sont transmises sous forme de trames.
3. Fermeture : l'une ou l'autre des parties peut initier la fermeture de la connexion en envoyant une trame de contrôle spéciale.

Création d'un serveur WebSocket en TypeScript

Choix de la bibliothèque

Pour la partie serveur, nous utiliserons la bibliothèque populaire ws — une implémentation légère et rapide de WebSocket pour Node.js. Installons-la avec les types pour TypeScript :

npm install wsnpm install -D @types/ws

Serveur de base

Créons un fichier server.ts :

import { WebSocketServer, WebSocket } from 'ws';

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

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

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

  // Envoi d'un message de bienvenue  ws.send('Bienvenue sur le serveur !');

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

    // Réponse écho    ws.send(`Écho : ${text}`);  });

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

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

Traitement de différents types de messages

Dans les applications réelles, les messages sont souvent structurés au format JSON. Créons un gestionnaire typé :

interface ChatMessage {  type: 'message' | 'join' | 'leave';  username: string;  content?: string;  timestamp: number;}

wss.on('connection', (ws: WebSocket) => {  ws.on('message', (data: Buffer) => {    try {      const msg: ChatMessage = JSON.parse(data.toString());            switch (msg.type) {        case 'join':          console.log(`${msg.username} a rejoint`);