Server-Sent Events HTML5

Quand vous avez besoin que le serveur pousse des mises à jour vers le navigateur — un fil d'actualités, un tableau de bord de métriques, des notifications — vous n'avez pas forcément besoin de la complexité des WebSockets. Les Server-Sent Events font exactement ça, avec une seule ligne de JavaScript côté client et un endpoint HTTP classique côté serveur.

Leur atout principal : la reconnexion automatique. Si la connexion se coupe, le navigateur se reconnecte tout seul, sans que vous ayez à écrire la moindre logique de retry. C'est une fonctionnalité intégrée au protocole.

Ouvrir une connexion SSE avec EventSource

Côté navigateur, l'API s'appelle EventSource. On lui passe l'URL du endpoint serveur qui diffuse le flux :

Exemple :   📋 Copier le code

// Ouvrir une connexion SSE vers le serveur
const source = new EventSource('/api/flux');

// Recevoir les messages du serveur
source.onmessage = (event) => {
  console.log('Données reçues :', event.data);
};

// Connexion établie
source.onopen = () => {
  console.log('Connexion SSE ouverte.');
};

// Erreur ou déconnexion
source.onerror = (erreur) => {
  console.error('Erreur SSE :', erreur);
  // Le navigateur tente de se reconnecter automatiquement
};

Format du flux côté serveur

Le serveur doit retourner un flux avec le type MIME text/event-stream. Chaque message suit un format texte simple avec des champs préfixés :

Exemple :   📋 Copier le code

// Format d'un message SSE côté serveur (texte brut)

// Message simple
data: Bonjour depuis le serveur

// Message avec un id (permet la reprise après déconnexion)
id: 42
data: Message avec identifiant

// Message sur plusieurs lignes
data: première ligne
data: deuxième ligne

// Événement nommé (autre que "message")
event: notification
data: Vous avez un nouveau message

// Délai de reconnexion en millisecondes
retry: 3000

// Chaque message est séparé par une ligne vide

Exemple côté serveur en PHP

Voici comment diffuser un flux SSE depuis un script PHP — le cas le plus courant sur les hébergements mutualisés :

Exemple :   📋 Copier le code

// flux.php — endpoint SSE côté serveur
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');

$compteur = 0;

while (true) {
    $compteur++;
    $donnees = json_encode([
        'heure' => date('H:i:s'),
        'valeur' => rand(1, 100)
    ]);

    echo "id: {$compteur}\n";
    echo "data: {$donnees}\n\n";

    ob_flush();
    flush();

    sleep(2); // envoyer une mise à jour toutes les 2 secondes

    // Arrêter si le client s'est déconnecté
    if (connection_aborted()) break;
}

Recevoir des événements nommés

Le serveur peut envoyer différents types d'événements avec le champ event:. Côté client, on écoute chaque type séparément avec addEventListener :

Exemple :   📋 Copier le code

const source = new EventSource('/api/flux');

// Écouter les événements génériques "message"
source.addEventListener('message', (event) => {
  console.log('Message :', event.data);
});

// Écouter un type d'événement spécifique "notification"
source.addEventListener('notification', (event) => {
  const data = JSON.parse(event.data);
  afficherNotification(data.texte);
});

// Écouter les mises à jour de métriques
source.addEventListener('metrique', (event) => {
  const data = JSON.parse(event.data);
  mettreAJourGraphique(data.valeur);
});

Exemple pratique : tableau de bord temps réel

Voici une implémentation complète d'un tableau de bord qui affiche des métriques serveur mises à jour en continu :

Exemple :   📋 Copier le code

const source = new EventSource('/api/metriques');
const cpu = document.getElementById('cpu');
const memoire = document.getElementById('memoire');
const statut = document.getElementById('statut');

source.onopen = () => {
  statut.textContent = 'Connecté — données en direct';
};

source.onmessage = (event) => {
  const data = JSON.parse(event.data);
  cpu.textContent = `CPU : ${data.cpu}%`;
  memoire.textContent = `Mémoire : ${data.memoire} Mo`;
};

source.onerror = () => {
  statut.textContent = 'Reconnexion en cours...';
  // Le navigateur gère la reconnexion — pas besoin de code supplémentaire
};

// Fermer le flux quand l'utilisateur quitte la page
window.addEventListener('beforeunload', () => {
  source.close();
});

Reprendre un flux après déconnexion avec Last-Event-ID

Quand le serveur numérote ses événements avec id:, le navigateur envoie automatiquement le dernier id reçu dans le header Last-Event-ID lors de la reconnexion. Le serveur peut ainsi reprendre le flux là où il s'est arrêté :

Exemple :   📋 Copier le code

// Côté serveur PHP — reprendre depuis le dernier id connu
$dernierIdRecu = isset($_SERVER['HTTP_LAST_EVENT_ID'])
    ? (int) $_SERVER['HTTP_LAST_EVENT_ID']
    : 0;

// Envoyer uniquement les événements manqués
$evenementsManques = recupererDepuis($dernierIdRecu);

foreach ($evenementsManques as $evt) {
    echo "id: {$evt['id']}\n";
    echo "data: {$evt['donnees']}\n\n";
    ob_flush();
    flush();
}

Fermer une connexion SSE

Côté navigateur, close() met fin au flux et empêche toute reconnexion automatique :

Exemple :   📋 Copier le code

// Fermer la connexion SSE manuellement
source.close();
console.log('Flux SSE fermé. État :', source.readyState);
// readyState vaut 2 (CLOSED) après close()

SSE vs WebSockets : le bon choix selon le besoin

Les deux technologies font du temps réel, mais elles ne répondent pas au même besoin :

• Server-Sent Events : communication unidirectionnelle (serveur → navigateur), reconnexion automatique intégrée, fonctionne sur HTTP/1.1 et HTTP/2, plus simple à mettre en place.
• WebSockets : communication bidirectionnelle (les deux côtés parlent), protocole dédié wss://, indispensable pour le chat, les jeux ou la collaboration en temps réel.

Pour un flux de notifications, un cours de bourse, ou des logs en direct, SSE est le choix le plus simple. Pour tout ce qui nécessite que le navigateur envoie aussi des données au serveur de façon continue, optez pour WebSockets.

Par carabde | Mis à jour le 17 avril 2026