SSE — ce que c’est, Server-Sent Events et le streaming unidirectionnel

Qu’est-ce que SSE?

SSE (Server-Sent Events) est une technologie qui permet à un serveur web d’envoyer des données au client à tout moment après l’établissement d’une connexion. Elle est normalisée par WHATWG dans le cadre du HTML Living Standard et utilise le type MIME text/event-stream. SSE prend en charge la transmission de données texte avec la possibilité de spécifier un identifiant de message, un type d’événement et un délai de reconnexion.

Contrairement à WebSocket, qui nécessite un protocole bidirectionnel et une requête de mise à niveau, SSE fonctionne sur HTTP classique. Le serveur définit l’en-tête Content-Type: text/event-stream, envoie les données par morceaux et maintient la connexion ouverte. Le client reçoit les données via l’API EventSource du navigateur, qui analyse automatiquement le flux et génère des événements.

Selon CanIUse (2025), l’API EventSource est prise en charge dans 97,5 % des navigateurs dans le monde. Elle n’est pas prise en charge dans Internet Explorer et certains navigateurs mobiles (Samsung Internet avant la version 7.0). Pour ces cas, il existe des polyfills qui émulent EventSource via le streaming XHR. SSE ne fonctionne pas avec le pipelining HTTP/1.1, mais est totalement compatible avec HTTP/2 server push.

Historique et normalisation

SSE a été proposé dans le cadre de la spécification HTML5 en 2009 sous le nom Server-Sent DOM Events. La première implémentation est apparue dans Opera 9.0, puis dans Firefox 6.0 (2011), Chrome 9.0 (2011) et Safari 5.0 (2010). En 2015, la spécification a été déplacée dans une section distincte du HTML Living Standard. Malgré une décennie d’histoire, SSE reste moins populaire que WebSocket en raison de sa nature unidirectionnelle.

Comment fonctionne SSE

Le fonctionnement de SSE est le suivant : le client crée une instance EventSource avec l’URL du point d’accès du serveur. Le navigateur envoie une requête GET avec l’en-tête Accept : text/event-stream. Le serveur répond avec le statut 200 OK et l’en-tête Content-Type: text/event-stream, puis commence à envoyer des données au format event-stream. La connexion reste ouverte jusqu’à ce que le serveur envoie un signal de terminaison ou que le client appelle close().

Côté serveur, les données sont envoyées par morceaux (chunked transfer encoding). Chaque morceau de données est un message texte composé de lignes de champs (event, data, id, retry). Le serveur peut envoyer des messages à tout moment, ce qui rend SSE idéal pour les notifications et les mises à jour de statut. La connexion ne nécessite pas d’échange constant de paquets heartbeat (contrairement à WebSocket), bien que le champ retry contrôle la fréquence de reconnexion.

Selon des tests de performance (2024), SSE offre un débit allant jusqu’à 10 000 messages par seconde par connexion avec une taille de message de 256 octets. Côté serveur, chaque connexion SSE consomme environ 5–10 Ko de mémoire, ce qui permet à un serveur de supporter plus de 50 000 connexions simultanées avec 1 Go de RAM. C’est nettement moins que WebSocket en raison de l’absence de protocole binaire.

Format event-stream

Le format text/event-stream est un protocole texte simple où chaque message est constitué de champs nommés séparés par des caractères de nouvelle ligne. Chaque champ a le format « NomDuChamp : valeur ». Les messages sont séparés par deux caractères de nouvelle ligne (\n\n).

Champs pris en charge : event (type d’événement, par défaut message), data (chaîne de données, peut être multiligne), id (dernier identifiant d’événement, stocké dans Last-Event-ID), retry (délai de reconnexion en millisecondes). Les commentaires commencent par deux points ( : ) et sont ignorés par l’analyseur, mais peuvent être utilisés pour le heartbeat.

Exemple de flux event-stream

: heartbeat comment
event: update
data: {"user": "Alice", "action": "typing"}
id: 1001

event: notification
data: {"type": "info", "text": "New version available"}
data: {"type": "action", "url": "/upgrade"}
retry: 3000

event: close
data: Session ended

API EventSource côté client

L’API EventSource est une interface navigateur intégrée pour recevoir SSE. Pour créer une connexion, il suffit d’appeler le constructeur avec l’URL du point d’accès. EventSource établit automatiquement la connexion, gère la reconnexion et analyse les messages entrants en événements JavaScript.

Événements EventSource : open (connexion établie), message (message reçu sans événement spécifié), error (erreur de connexion). Pour les événements personnalisés (event : custom), vous pouvez utiliser addEventListener avec le nom de l’événement. EventSource envoie automatiquement l’en-tête Last-Event-ID lors de la reconnexion, permettant au serveur de reprendre le flux là où il a été interrompu.

Selon la documentation MDN (2025), EventSource prend en charge CORS et la transmission d’informations d’identification (withCredentials). EventSource n’est pas adapté à l’envoi d’en-têtes personnalisés ou de corps de requête — une implémentation manuelle via fetch + ReadableStream est nécessaire. EventSource ne prend pas en charge les données binaires — uniquement le texte et JSON.

Code JavaScript côté client

const eventSource = new EventSource('/api/events/stream');

eventSource.addEventListener('open', () => {
    console.log('Connexion SSE ouverte');
});

eventSource.addEventListener('message', (event) => {
    const data = JSON.parse(event.data);
    console.log('Reçu :', data);
    renderUpdate(data);
});

eventSource.addEventListener('notification', (event) => {
    const notification = JSON.parse(event.data);
    showNotification(notification.text);
});

eventSource.addEventListener('error', (error) => {
    console.error('Erreur SSE :', error);
    // Le navigateur se reconnecte automatiquement
});

// Fermer la connexion
eventSource.close();

SSE vs WebSocket : comparaison

SSE et WebSocket sont des technologies différentes pour la communication en temps réel, chacune avec ses atouts. WebSocket convient aux échanges bidirectionnels de données (chats, jeux, édition collaborative), tandis que SSE est destiné aux flux unidirectionnels du serveur vers le client (notifications, flux d’actualités, tickers).

La différence clé est que WebSocket nécessite une requête de mise à niveau de HTTP/1.1 vers le protocole WebSocket (ws://), qui peut être bloquée par les proxies d’entreprise. SSE fonctionne sur HTTP classique, traverse n’importe quel proxy et ne nécessite pas de configuration spéciale du serveur. SSE est également plus simple à implémenter — le serveur n’a pas besoin de bibliothèque supplémentaire, il suffit de formater correctement la réponse HTTP.

Selon des tests comparatifs (2024), sur un seul processus serveur, SSE prend en charge 30–50 % de connexions supplémentaires par rapport à WebSocket en raison du protocole plus simple. Cependant, SSE a une latence plus élevée (50–200 ms contre 10–50 ms pour WebSocket) car SSE utilise HTTP fragmenté plutôt qu’un flux bidirectionnel complet avec des trames binaires.

Comment implémenter SSE sur le serveur

Implémenter SSE sur le serveur ne nécessite pas de bibliothèques — il suffit de définir les bons en-têtes HTTP et d’envoyer des données au format text/event-stream. Prenons un exemple en Node.js utilisant le module http intégré. Le serveur définit les en-têtes Content-Type et Cache-Control, puis envoie des messages toutes les N secondes.

Selon MDN Web Docs (2025), les en-têtes requis pour SSE sont : Content-Type : text/event-stream, Cache-Control : no-cache et Connection : keep-alive. Sans Cache-Control, le navigateur pourrait mettre en cache le flux SSE, ce qui stopperait la livraison. Connection : keep-alive indique explicitement au navigateur de maintenir la connexion ouverte.

Code serveur en Node.js

const http = require('http');

http.createServer((req, res) => {
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive'
    });

    let eventId = 0;
    const interval = setInterval(() => {
        eventId++;
        res.write(`id: ${eventId}\n`);
        res.write(`event: update\n`);
        res.write(`data: {"time": "${new Date().toISOString()}", "id":${eventId}}\n\n`);
    }, 2000);

    req.on('close', () => {
        clearInterval(interval);
    });
}).listen(3000);

SSE en Python (Flask)

from flask import Response, Flask
import time
import json

app = Flask(__name__)

@app.route('/stream')
def stream():
    def generate():
        event_id = 0
        while True:
            event_id += 1
            data = json.dumps(
                {'ticker': 'AAPL', 'price': 150.25})
            yield f'id: {event_id}\nevent: price\ndata: {data}\n\n'
            time.sleep(1)
    return Response(generate(),
        mimetype='text/event-stream')

SSE dans les applications mobiles

L’utilisation de SSE dans les applications mobiles est limitée par l’absence d’implémentation native d’EventSource pour iOS et Android. Sur les plateformes mobiles, SSE est implémenté via des bibliothèques tierces : sur iOS — via URLSession avec NSURLProtocol, sur Android — via OkHttp avec prise en charge SSE (okhttp-sse). Pour React Native et Flutter, des paquets émulant EventSource sont disponibles.

Sur iOS, une implémentation native de SSE est possible via URLSessionDataDelegate. Lors de la réception de données dans la méthode urlSession(_:dataTask:didReceive:), l’application accumule un tampon et analyse manuellement le format event-stream. Selon le blog de développement iOS (2024), la consommation de la batterie avec SSE sur iOS est 40 % inférieure à celle d’une connexion WebSocket constante en raison de l’absence de paquets heartbeat.

Sur Android, OkHttp fournit la classe EventSource.Factory pour s’abonner aux flux SSE. Les applications Android peuvent utiliser SSE pour les notifications lorsque FCM n’est pas disponible, ou pour la synchronisation de données en arrière-plan. SSE sur Android fonctionne bien avec WorkManager pour les tâches d’arrière-plan de longue durée. Selon la documentation OkHttp (2025), okhttp-sse prend en charge la reconnexion automatique avec un écouteur personnalisé.