WebSocket

WebSocket est un protocole de communication standardisé (RFC 6455) qui établit un canal bidirectionnel full-duplex entre un client et un serveur web. Contrairement au HTTP traditionnel qui fonctionne en requête-réponse, WebSocket maintient une connexion persistante permettant un échange de données instantané dans les deux sens. Cette technologie est essentielle pour les applications nécessitant des mises à jour en temps réel comme les messageries instantanées, les tableaux de bord collaboratifs ou les jeux multijoueurs.

Fondements du protocole

• Établissement via une handshake HTTP/HTTPS initiale (upgrade de connexion)
• Communication full-duplex bidirectionnelle sur un socket TCP unique
• Format de trame léger avec overhead minimal (2-14 octets vs centaines en HTTP)
• Support natif dans tous les navigateurs modernes et disponible côté serveur

Avantages techniques et métier

• Latence réduite : élimination du polling et des requêtes répétitives HTTP
• Efficacité réseau : réduction jusqu'à 500:1 du trafic par rapport au polling HTTP
• Expérience utilisateur améliorée avec synchronisation instantanée des données
• Scalabilité optimisée grâce aux connexions persistantes gérées efficacement
• Réduction de la charge serveur en évitant les cycles requête-réponse constants

Exemple concret d'implémentation

// Client WebSocket avec reconnexion automatique
class RealtimeClient {
  private ws: WebSocket | null = null;
  private reconnectDelay = 1000;
  private maxReconnectDelay = 30000;

  connect(url: string) {
    this.ws = new WebSocket(url);

    this.ws.onopen = () => {
      console.log('Connexion WebSocket établie');
      this.reconnectDelay = 1000; // Reset delay
    };

    this.ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      this.handleMessage(data);
    };

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

    this.ws.onclose = () => {
      console.log('Connexion fermée, reconnexion...');
      setTimeout(() => this.reconnect(url), this.reconnectDelay);
      this.reconnectDelay = Math.min(
        this.reconnectDelay * 2,
        this.maxReconnectDelay
      );
    };
  }

  send(type: string, payload: any) {
    if (this.ws?.readyState === WebSocket.OPEN) {
      this.ws.send(JSON.stringify({ type, payload }));
    }
  }

  private handleMessage(data: any) {
    // Logique métier selon le type de message
    switch (data.type) {
      case 'UPDATE':
        this.onUpdate(data.payload);
        break;
      case 'NOTIFICATION':
        this.onNotification(data.payload);
        break;
    }
  }

  private reconnect(url: string) {
    this.connect(url);
  }

  disconnect() {
    this.ws?.close();
  }
}

// Serveur WebSocket avec Node.js (ws library)
import { WebSocketServer, WebSocket } from 'ws';

const wss = new WebSocketServer({ port: 8080 });
const clients = new Set<WebSocket>();

wss.on('connection', (ws: WebSocket) => {
  clients.add(ws);
  console.log(`Client connecté (total: ${clients.size})`);

  ws.on('message', (data: Buffer) => {
    const message = JSON.parse(data.toString());
    
    // Broadcast à tous les clients connectés
    broadcast({
      type: 'UPDATE',
      payload: message,
      timestamp: Date.now()
    });
  });

  ws.on('close', () => {
    clients.delete(ws);
    console.log(`Client déconnecté (restants: ${clients.size})`);
  });

  ws.on('error', (error) => {
    console.error('Erreur client:', error);
    clients.delete(ws);
  });
});

function broadcast(data: any) {
  const message = JSON.stringify(data);
  clients.forEach((client) => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(message);
    }
  });
}

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

Mise en œuvre dans un projet

1. Identifier les use cases nécessitant du temps réel (chat, notifications, dashboards)
2. Choisir une bibliothèque serveur adaptée (ws, Socket.IO, uWebSockets.js)
3. Implémenter le handshake et la gestion des connexions avec heartbeat/ping-pong
4. Définir le protocole de messages (format JSON structuré avec types)
5. Gérer la reconnexion automatique côté client avec backoff exponentiel
6. Implémenter l'authentification (token JWT dans handshake ou premier message)
7. Mettre en place le monitoring des connexions actives et de la latence
8. Tester la scalabilité avec load balancing et sticky sessions si nécessaire

Outils et bibliothèques associés

• Socket.IO : bibliothèque complète avec fallbacks automatiques et rooms
• ws : implémentation WebSocket légère et performante pour Node.js
• uWebSockets.js : solution ultra-performante écrite en C++ pour haute charge
• SockJS : polyfill WebSocket avec fallbacks multiples pour anciens navigateurs
• SignalR : framework Microsoft pour .NET avec abstraction temps réel
• Pusher/Ably : services managés WebSocket pour déléguer l'infrastructure

WebSocket transforme radicalement l'architecture des applications modernes en permettant une communication bidirectionnelle instantanée. Cette technologie réduit drastiquement la latence et la charge réseau tout en offrant une expérience utilisateur fluide et réactive. Pour les équipes produit, WebSocket devient indispensable dès que l'application nécessite des mises à jour temps réel, permettant de créer des fonctionnalités collaboratives, des notifications push ou des tableaux de bord live qui différencient véritablement le produit sur son marché.