Consommer des flux SSE dans React avec EventSource

new EventSource(url) crée une connexion SSE vers l’URL indiquée. Le navigateur ouvre immédiatement une requête HTTP GET avec l’en-tête Accept: text/event-stream. Le serveur maintient cette connexion ouverte et diffuse les événements. EventSource est une API native du navigateur : aucune bibliothèque n’est nécessaire pour une utilisation de base.

EventSource possède trois états de disponibilité : 0 (CONNECTING) — la connexion est en cours d’établissement ou de rétablissement, 1 (OPEN) — la connexion est établie et les événements circulent, 2 (CLOSED) — la connexion est fermée et ne sera pas rétablie. Consultez eventSource.readyState pour déterminer l’état actuel.

Le gestionnaire eventSource.onmessage est déclenché pour les événements du serveur qui ne possèdent pas de type d’événement explicite, c’est-à-dire lorsque le serveur envoie data: ... sans champ event:. Le gestionnaire reçoit un objet événement dont event.data contient les données sous forme de chaîne. Le serveur sérialise généralement les données avec JSON.stringify, afin que vous les analysiez avec JSON.parse à leur réception.

Le serveur peut envoyer des événements nommés : event: userJoined data: {"userId": "123"} . Dans le navigateur, écoutez-les avec eventSource.addEventListener('userJoined', handler). Cela permet de multiplexer plusieurs types d’événements sur une seule connexion SSE. Chaque type d’événement possède son propre gestionnaire, ce qui rend le code clair et organisé.

Les données SSE arrivent sous forme de chaînes. Pour les données structurées, le serveur envoie JSON.stringify(payload) et le client les analyse ainsi : const data = JSON.parse(event.data). Entourez toujours JSON.parse d’une gestion try/catch afin de traiter correctement les données JSON mal formées envoyées par le serveur, de consigner l’erreur et d’ignorer l’événement mal formé.

Créez et fermez EventSource dans un useEffect : créez la connexion au montage du composant, attachez les gestionnaires d’événements et renvoyez une fonction de nettoyage qui appelle eventSource.close(). Sans ce nettoyage, la connexion fuit lorsque le composant est démonté, lorsque l’utilisateur change de page ou lorsque l’effet se réexécute avec des dépendances différentes.

Dans le gestionnaire eventSource.onmessage, mettez à jour l’état React pour refléter les nouvelles données : setMessages(prev => [...prev, JSON.parse(event.data)]). Utilisez la forme fonctionnelle de setState pour éviter les problèmes liés aux fermetures obsolètes : le gestionnaire d’événements capture la valeur initiale de l’état, tandis que la mise à jour fonctionnelle garantit que vous travaillez toujours avec la version la plus récente de l’état.

EventSource se reconnecte automatiquement lorsque la connexion est perdue en raison d’une erreur réseau ou du redémarrage du serveur. Le navigateur attend un court délai (généralement 3 secondes, configurable par le serveur via retry: 3000 dans le flux), puis se reconnecte. Vous n’avez pas besoin d’implémenter la logique de reconnexion : elle est intégrée à l’API EventSource.

EventSource suit l’ID du dernier événement reçu (défini par le serveur à l’aide de id: 123 dans le flux). Lors d’une reconnexion, le navigateur envoie automatiquement cet ID dans l’en-tête HTTP correspondant à l’identifiant du dernier événement. Un serveur bien conçu l’utilise pour rejouer les événements manqués et garantir qu’aucun événement ne soit perdu lors d’une reconnexion.

EventSource ne prend pas directement en charge les en-têtes personnalisés. Pour l’authentification, utilisez des cookies (new EventSource(url, { withCredentials: true }) envoie les cookies) ou incluez le jeton d’authentification comme paramètre de requête dans l’URL. Si vous avez besoin d’en-têtes d’autorisation, utilisez l’API Fetch avec ReadableStream plutôt qu’EventSource afin de traiter manuellement la réponse SSE.

Lorsqu’EventSource rencontre une erreur, le gestionnaire d’erreurs est déclenché. readyState vaut CONNECTING (si une nouvelle tentative est prévue) ou CLOSED (dans le cas contraire). Dans le gestionnaire d’erreurs, vérifiez readyState afin de distinguer une erreur réseau temporaire (qui sera corrigée automatiquement par une nouvelle tentative) d’un échec permanent (le serveur a renvoyé un statut différent de 200). En cas d’erreur permanente, fermez la connexion et informez l’utilisateur.

Que se passe-t-il lorsqu’une connexion EventSource est interrompue en raison d’une erreur réseau ?

La création d’une connexion SSE avec EventSource fournit les états readyStates suivants : CONNECTING, OPEN et CLOSED. Le gestionnaire des messages traite les événements génériques ; addEventListener traite les types d’événements nommés. JSON.parse(event.data) extrait les données structurées. Créez et nettoyez EventSource dans useEffect. La reconnexion automatique est intégrée : EventSource réessaie après les erreurs réseau en utilisant l’identifiant du dernier événement pour rejouer les événements manqués. Authentifiez-vous avec des cookies (withCredentials) ou des paramètres de requête dans l’URL.