Server-Sent Events (SSE)

Server-Sent Events (SSE) est une technologie standard du W3C permettant aux serveurs web de transmettre des mises à jour en temps réel aux clients via une connexion HTTP persistante. Contrairement aux WebSockets qui offrent une communication bidirectionnelle, SSE établit un canal unidirectionnel optimisé pour les flux de données du serveur vers le navigateur. Cette approche légère et native des navigateurs simplifie considérablement l'implémentation de fonctionnalités temps réel comme les notifications, les tableaux de bord en direct ou les flux d'actualités.

Fondements techniques

• Utilise le type MIME text/event-stream pour maintenir une connexion HTTP ouverte
• Reconnexion automatique avec gestion native des interruptions et identifiants d'événements
• Format de message simple basé sur du texte avec structure clé-valeur (data, event, id, retry)
• Compatible avec HTTP/1.1 et HTTP/2, fonctionnant à travers les proxys et pare-feu standards

Avantages stratégiques

• Simplicité d'implémentation sans bibliothèque tierce, API native dans tous les navigateurs modernes
• Consommation de ressources réduite comparée aux techniques de polling répétitif
• Reconnexion automatique intégrée avec mécanisme de retry paramétrable
• Compatible avec les infrastructures HTTP existantes (load balancers, CDN, cache)
• Transmission efficace de données textuelles avec support JSON natif

Exemple concret d'implémentation

// Côté serveur (Node.js/Express)
import express from 'express';

const app = express();

app.get('/api/notifications', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.setHeader('Access-Control-Allow-Origin', '*');

  // Envoi d'un événement initial
  res.write('data: {"message": "Connexion établie"}\n\n');

  // Simulation d'événements périodiques
  const intervalId = setInterval(() => {
    const data = {
      timestamp: new Date().toISOString(),
      type: 'update',
      payload: { count: Math.floor(Math.random() * 100) }
    };
    
    res.write(`id: ${Date.now()}\n`);
    res.write(`event: notification\n`);
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  }, 5000);

  // Nettoyage à la fermeture
  req.on('close', () => {
    clearInterval(intervalId);
    res.end();
  });
});

app.listen(3000);

// Côté client (TypeScript)
interface NotificationData {
  timestamp: string;
  type: string;
  payload: { count: number };
}

class SSEClient {
  private eventSource: EventSource | null = null;

  connect(url: string) {
    this.eventSource = new EventSource(url);

    // Écoute des messages génériques
    this.eventSource.onmessage = (event) => {
      console.log('Message reçu:', event.data);
    };

    // Écoute d'événements personnalisés
    this.eventSource.addEventListener('notification', (event) => {
      const data: NotificationData = JSON.parse(event.data);
      this.handleNotification(data);
    });

    // Gestion des erreurs
    this.eventSource.onerror = (error) => {
      console.error('Erreur SSE:', error);
      if (this.eventSource?.readyState === EventSource.CLOSED) {
        console.log('Connexion fermée, reconnexion automatique...');
      }
    };
  }

  private handleNotification(data: NotificationData) {
    console.log(`Notification ${data.type}:`, data.payload);
    // Mise à jour de l'interface utilisateur
  }

  disconnect() {
    this.eventSource?.close();
    this.eventSource = null;
  }
}

// Utilisation
const client = new SSEClient();
client.connect('http://localhost:3000/api/notifications');

Mise en œuvre pratique

1. Identifier les cas d'usage appropriés (flux unidirectionnels : notifications, mises à jour de statut, streaming de logs)
2. Configurer le serveur pour maintenir les connexions ouvertes avec les headers appropriés (Content-Type, Cache-Control)
3. Implémenter la logique de diffusion côté serveur avec gestion des clients connectés et nettoyage des ressources
4. Créer l'interface client avec EventSource, écoute des événements et gestion des reconnexions
5. Ajouter une stratégie de heartbeat pour détecter les connexions mortes et libérer les ressources serveur
6. Tester la scalabilité avec un proxy inverse (Nginx, HAProxy) configuré pour les connexions persistantes
7. Implémenter un fallback pour les navigateurs incompatibles ou environnements restrictifs

Outils et écosystème

• EventSource API native des navigateurs modernes avec polyfills disponibles (eventsource pour Node.js)
• Express.js, Fastify, Koa avec middlewares dédiés pour faciliter l'implémentation SSE
• Redis Pub/Sub ou Apache Kafka pour orchestrer la distribution d'événements à grande échelle
• Nginx et HAProxy avec configuration optimisée pour les connexions longues (proxy_buffering off)
• Mercure, solution open-source spécialisée dans la diffusion SSE avec authentification et autorisation intégrées
• SSE-Z pour le monitoring et debugging des flux d'événements en développement

Server-Sent Events représente une solution pragmatique et performante pour implémenter des fonctionnalités temps réel dans les applications web modernes. Sa simplicité d'implémentation, sa compatibilité native avec l'infrastructure HTTP existante et sa faible consommation de ressources en font un choix judicieux pour les flux de données unidirectionnels. Pour les organisations cherchant à enrichir l'expérience utilisateur avec des mises à jour en temps réel sans la complexité des WebSockets, SSE offre un équilibre optimal entre fonctionnalité, performance et maintenabilité.