WebSocket vs SSE vs WebTransport

Architecture 🔴 Senior

Définition

Trois transports pour le temps réel. WebSocket : bidirectionnel, sur TCP, universel, mais sans reconnexion native. SSE (Server-Sent Events) : unidirectionnel serveur→client sur HTTP simple, reconnexion automatique, idéal pour notifications et flux de LLM. WebTransport : construit sur HTTP/3 (QUIC), flux multiples sans blocage en tête de ligne, datagrammes non fiables pour le jeu ou la vidéo ; Baseline depuis Safari 26.4 en mars 2026 (Chrome 97+, Firefox 114+).

Analogie

Le téléphone (WebSocket, on se parle tous les deux), la radio (SSE, on écoûte), et la fibre multi-canaux (WebTransport : plusieurs conversations et une vidéo sur la même ligne, sans que l'une bloque l'autre).

Exemple de code

// SSE : le plus simple pour du serveur → client (ex. streaming d'un LLM)
const es = new EventSource('/api/stream');
es.onmessage = (e) => appendToken(JSON.parse(e.data));  // reconnexion auto

// WebSocket : bidirectionnel (chat, jeu, curseurs collaboratifs)
const ws = new WebSocket('wss://api.example.com/rt');
ws.onmessage = (e) => handle(JSON.parse(e.data));
ws.send(JSON.stringify({ type: 'join', room: 'r1' }));

// WebTransport : HTTP/3, flux multiples + datagrammes (Baseline 2026)
const wt = new WebTransport('https://api.example.com:4433/wt');
await wt.ready;
const writer = wt.datagrams.writable.getWriter();
writer.write(new TextEncoder().encode('pos:12,48')); // perte tolérée

Cas d'usage

Choisir : notifications ou tokens d'IA → SSE ; chat, jeu au tour par tour, édition collaborative → WebSocket ; jeu temps réel, vidéo, très nombreux flux → WebTransport.

Anti-pattern

Ouvrir un WebSocket pour un simple flux de notifications descendant : SSE aurait suffi, avec reconnexion gratuite et compatibilité proxy.

Termes liés

#architecture#real-time#networking

Sources

Fiche mise à jour le 2026-09-27