Server-Sent Events (SSE)

Server-Sent Events (SSE) est une technologie web standardisée qui établit une connexion HTTP persistante permettant au serveur d'envoyer automatiquement des mises à jour au client. Contrairement aux WebSockets bidirectionnels, SSE utilise une communication unidirectionnelle optimisée pour les flux de données du serveur vers le navigateur. Cette approche native du navigateur simplifie considérablement l'implémentation de fonctionnalités temps réel comme les notifications, les tableaux de bord dynamiques ou les flux d'actualités.

Fondements

• Protocole basé sur HTTP avec reconnexion automatique en cas de déconnexion
• Format de données texte simple utilisant le type MIME 'text/event-stream'
• API JavaScript native EventSource intégrée dans tous les navigateurs modernes
• Support natif des identifiants d'événements pour reprendre après interruption

Avantages

• Simplicité d'implémentation comparée aux WebSockets pour les cas unidirectionnels
• Reconnexion automatique native sans code additionnel côté client
• Compatible avec les infrastructures HTTP existantes (proxies, load balancers, CDN)
• Pas de configuration réseau spécifique ni de ports non-standard requis
• Gestion native des identifiants pour reprendre les flux interrompus sans perte de données

Exemple concret

// Serveur Node.js avec Express
import express from 'express';

const app = express();

app.get('/events', (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');

  // Envoi périodique de données
  const intervalId = setInterval(() => {
    const data = {
      timestamp: new Date().toISOString(),
      value: Math.random() * 100
    };
    res.write(`id: ${Date.now()}\n`);
    res.write(`event: update\n`);
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  }, 2000);

  // Nettoyage lors de la déconnexion
  req.on('close', () => {
    clearInterval(intervalId);
    res.end();
  });
});

app.listen(3000);

// Client TypeScript
const eventSource = new EventSource('http://localhost:3000/events');

// Écoute des événements personnalisés
eventSource.addEventListener('update', (event: MessageEvent) => {
  const data = JSON.parse(event.data);
  console.log('Mise à jour reçue:', data);
  updateDashboard(data);
});

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

// Écoute de tous les messages
eventSource.onmessage = (event: MessageEvent) => {
  console.log('Message générique:', event.data);
};

// Fermeture manuelle si nécessaire
function cleanup() {
  eventSource.close();
}

Mise en œuvre

1. Configurer un endpoint HTTP qui maintient la connexion ouverte avec les headers appropriés
2. Implémenter le format text/event-stream avec les champs data, event, id et retry
3. Côté client, instancier EventSource avec l'URL du endpoint SSE
4. Définir des écouteurs d'événements pour traiter les données reçues en temps réel
5. Implémenter la gestion d'erreurs et définir une stratégie de reconnexion personnalisée si besoin
6. Optimiser les performances en limitant la fréquence d'envoi et en compressant les données
7. Tester la résilience avec des interruptions réseau et valider la reprise avec les IDs d'événements

Outils associés

• Express.js et Fastify pour créer des endpoints SSE côté serveur Node.js
• EventSource polyfills comme eventsource pour Node.js ou les anciens navigateurs
• NGINX et Apache avec configuration pour proxy_buffering off pour SSE
• Redis Pub/Sub pour distribuer les événements entre plusieurs instances serveur
• React Query ou SWR pour intégrer SSE dans les applications React modernes
• Mercure pour un protocole SSE standardisé avec authentification et autorisations

Server-Sent Events représente une solution élégante et performante pour les applications nécessitant des mises à jour temps réel unidirectionnelles. Sa simplicité d'implémentation, son intégration native dans les navigateurs et sa compatibilité avec l'infrastructure HTTP standard en font un choix stratégique pour réduire la complexité technique tout en offrant une expérience utilisateur réactive. Dans un contexte où la vélocité de développement et la fiabilité sont cruciales, SSE permet de livrer des fonctionnalités temps réel avec un investissement minimal et une maintenance simplifiée.