SSE-Streams in React mit EventSource konsumieren

new EventSource(url) erstellt eine SSE-Verbindung zur angegebenen URL. Der Browser öffnet sofort eine HTTP-GET-Anfrage mit dem Header Accept: text/event-stream. Der Server hält diese Verbindung offen und überträgt Ereignisse. EventSource ist eine native Browser-API – für die grundlegende Verwendung ist keine Bibliothek erforderlich.

EventSource hat drei Bereitschaftszustände: 0 (CONNECTING) – die Verbindung wird hergestellt oder erneut hergestellt, 1 (OPEN) – die Verbindung steht und Ereignisse werden übertragen, 2 (CLOSED) – die Verbindung ist geschlossen und wird nicht erneut hergestellt. Überprüfen Sie eventSource.readyState, um den aktuellen Zustand zu ermitteln.

Der Handler eventSource.onmessage wird für Serverereignisse ausgelöst, die keinen expliziten Ereignistyp haben (der Server sendet data: ... ohne ein Feld event:). Der Handler empfängt ein Ereignisobjekt, dessen event.data die Nutzlast als Zeichenfolge enthält. Der Server serialisiert die Daten normalerweise mit JSON.stringify, sodass Sie sie beim Empfang mit JSON.parse analysieren.

Der Server kann benannte Ereignisse senden: event: userJoined data: {"userId": "123"} . Im Browser empfangen Sie sie mit eventSource.addEventListener('userJoined', handler). So können mehrere Ereignistypen über eine einzige SSE-Verbindung übertragen werden. Jeder Ereignistyp hat seinen eigenen Handler, wodurch der Code übersichtlich und gut strukturiert bleibt.

SSE-Daten treffen als Zeichenfolgen ein. Für strukturierte Daten sendet der Server JSON.stringify(payload), und der Client analysiert sie: const data = JSON.parse(event.data). Umschließen Sie JSON.parse immer mit try/catch, damit fehlerhaftes JSON vom Server kontrolliert behandelt werden kann. Protokollieren Sie den Fehler und überspringen Sie das fehlerhafte Ereignis.

Erstellen und schließen Sie EventSource innerhalb eines useEffect: Erstellen Sie die Verbindung, wenn die Komponente eingebunden wird, fügen Sie die Event-Handler hinzu und geben Sie eine Cleanup-Funktion zurück, die eventSource.close() aufruft. Ohne Cleanup bleibt die Verbindung bestehen, wenn die Komponente ausgehängt wird, der Nutzer die Seite verlässt oder der Effekt mit anderen Abhängigkeiten erneut ausgeführt wird.

Aktualisieren Sie im Handler eventSource.onmessage den React-State, damit die neuen Daten angezeigt werden: setMessages(prev => [...prev, JSON.parse(event.data)]). Verwenden Sie die funktionale Form von setState, um Probleme durch veraltete Closures zu vermeiden. Der Event-Handler erfasst den ursprünglichen State-Wert, während das funktionale Update sicherstellt, dass immer der aktuelle State verwendet wird.

EventSource stellt automatisch wieder eine Verbindung her, wenn die Verbindung aufgrund eines Netzwerkfehlers oder eines Serverneustarts unterbrochen wird. Der Browser wartet kurz (typischerweise 3 Sekunden, vom Server über retry: 3000 im Stream konfigurierbar) und stellt dann die Verbindung wieder her. Sie müssen keine Logik zur Wiederverbindung implementieren – sie ist in die EventSource-API integriert.

EventSource verfolgt die ID des zuletzt empfangenen Ereignisses (vom Server über id: 123 im Stream festgelegt). Beim Wiederverbinden sendet der Browser diese ID automatisch im HTTP-Header Last-Event-ID. Ein gut konzipierter Server verwendet diese ID, um verpasste Ereignisse erneut zu senden und so sicherzustellen, dass während einer Wiederverbindung keine Ereignisse verloren gehen.

EventSource unterstützt keine benutzerdefinierten Header direkt. Verwenden Sie zur Authentifizierung Cookies (new EventSource(url, { withCredentials: true }) sendet Cookies) oder fügen Sie das Authentifizierungs-Token als URL-Abfrageparameter hinzu. Wenn Sie Authorization-Header benötigen, verwenden Sie statt EventSource die Fetch API mit ReadableStream, um die SSE-Antwort manuell zu verarbeiten.

Wenn EventSource einen Fehler feststellt, wird der Handler onerror ausgelöst. readyState ist CONNECTING (wenn ein erneuter Versuch erfolgt) oder CLOSED (wenn nicht). Prüfen Sie in onerror readyState, um zwischen einem vorübergehenden Netzwerkfehler (automatischer neuer Versuch) und einem dauerhaften Fehler (der Server hat einen Status ungleich 200 zurückgegeben) zu unterscheiden. Bei dauerhaften Fehlern schließen Sie die Verbindung und informieren Sie den Benutzer.

Was geschieht, wenn eine EventSource-Verbindung aufgrund eines Netzwerkfehlers unterbrochen wird?

new EventSource(url) erstellt eine SSE-Verbindung mit readyStates: CONNECTING, OPEN, CLOSED. onmessage verarbeitet allgemeine Ereignisse; addEventListener verarbeitet benannte Ereignistypen. JSON.parse(event.data) extrahiert strukturierte Nutzdaten. Erstellen und bereinigen Sie EventSource in useEffect. Die automatische Wiederverbindung ist integriert – EventSource versucht es nach Netzwerkfehlern erneut und verwendet Last-Event-ID, um verpasste Ereignisse erneut zu übertragen. Authentifizieren Sie sich über Cookies (withCredentials) oder URL-Abfrageparameter.