Använda SSE-strömmar i React med EventSource

new EventSource(url) skapar en SSE-anslutning till den angivna URL:en. Webbläsaren öppnar omedelbart en HTTP GET-begäran med headern Accept: text/event-stream. Servern håller anslutningen öppen och strömmar händelser. EventSource är ett webbläsarinbyggt API – inget bibliotek krävs för grundläggande användning.

EventSource har tre tillstånd: 0 (CONNECTING) – anslutningen håller på att upprättas eller återupprättas, 1 (OPEN) – anslutningen är upprättad och händelser strömmar, 2 (CLOSED) – anslutningen är stängd och kommer inte att återansluta. Kontrollera eventSource.readyState för att fastställa det aktuella tillståndet.

Händelsehanteraren eventSource.onmessage körs för serverhändelser som inte har någon uttrycklig händelsetyp (servern skickar data: ... utan ett event:-fält). Hanteraren tar emot ett händelseobjekt där event.data är nyttolasten som en sträng. Servern serialiserar vanligtvis data med JSON.stringify, så att ni kan tolka den med JSON.parse när den tas emot.

Servern kan skicka namngivna händelser: event: userJoined data: {"userId": "123"} . I webbläsaren lyssnar ni med eventSource.addEventListener('userJoined', handler). På så sätt kan flera händelsetyper multiplexas över en enda SSE-anslutning – varje händelsetyp får sin egen hanterare, vilket gör koden tydlig och välorganiserad.

SSE-data anländer som strängar. För strukturerade data skickar servern JSON.stringify(payload), och klienten tolkar dem: const data = JSON.parse(event.data). Omslut alltid JSON.parse med try/catch så att felaktig JSON från servern hanteras på ett bra sätt genom att felet loggas och den felaktiga händelsen hoppas över.

Skapa och stäng EventSource inuti useEffect: skapa anslutningen när komponenten monteras, koppla in händelsehanterarna och returnera en rensningsfunktion som anropar eventSource.close(). Utan rensningen läcker anslutningen när komponenten avmonteras, när användaren navigerar bort eller när effekten körs igen med andra beroenden.

Uppdatera React-tillståndet i händelsehanteraren eventSource.onmessage så att det återspeglar nya data: setMessages(prev => [...prev, JSON.parse(event.data)]). Använd den funktionella formen av setState för att undvika problem med inaktuella closures – händelsehanteraren fångar det ursprungliga tillståndsvärdet, medan den funktionella uppdateringen ser till att ni alltid uppdaterar det senaste tillståndet.

EventSource återansluter automatiskt när anslutningen bryts på grund av ett nätverksfel eller en omstart av servern. Webbläsaren väntar en kort stund (vanligtvis 3 sekunder, konfigurerbart av servern via retry: 3000 i strömmen) och ansluter sedan igen. Du behöver inte implementera någon återanslutningslogik – den är inbyggd i EventSource API.

EventSource håller reda på ID:t för den senast mottagna händelsen (som servern anger med id: 123 i strömmen). Vid återanslutning skickar webbläsaren automatiskt detta ID i HTTP-headern Last-Event-ID. En välutformad server använder detta för att spela upp missade händelser igen, så att inga händelser går förlorade under en återanslutning.

EventSource har inte direkt stöd för anpassade headers. För autentisering kan Du använda cookies (new EventSource(url, { withCredentials: true }) skickar cookies) eller inkludera autentiseringstoken som en URL-frågeparameter. Om Du behöver Authorization-headers kan Du använda Fetch API med ReadableStream i stället för EventSource för att bearbeta SSE-svaret manuellt.

När EventSource stöter på ett fel körs handlern onerror. readyState blir CONNECTING (om ett nytt försök kommer att göras) eller CLOSED (om inte). I onerror kontrollerar Du readyState för att skilja ett tillfälligt nätverksfel (som försöks igen automatiskt) från ett permanent fel (servern returnerade en statuskod som inte är 200). Vid permanenta fel stänger Du anslutningen och meddelar användaren.

new EventSource(url) skapar en SSE-anslutning med readyStates: CONNECTING, OPEN, CLOSED. onmessage hanterar generiska händelser; addEventListener hanterar namngivna händelsetyper. JSON.parse(event.data) extraherar strukturerade data. Skapa och städa bort EventSource i useEffect. Automatisk återanslutning är inbyggd – EventSource försöker igen efter nätverksfel och använder Last-Event-ID för att spela upp missade händelser igen. Autentisera via cookies (withCredentials) eller URL-frågeparametrar.