SSE-streams in React gebruiken met EventSource

new EventSource(url) maakt een SSE-verbinding met de opgegeven URL. De browser opent onmiddellijk een HTTP GET-verzoek met de header Accept: text/event-stream. De server houdt deze verbinding open en streamt gebeurtenissen. EventSource is een ingebouwde browser-API — voor basisgebruik is geen bibliotheek nodig.

EventSource heeft drie gereedheidsstatussen: 0 (CONNECTING) — de verbinding wordt tot stand gebracht of opnieuw tot stand gebracht, 1 (OPEN) — de verbinding is tot stand gebracht en gebeurtenissen stromen binnen, 2 (CLOSED) — de verbinding is gesloten en zal niet opnieuw worden verbonden. Controleer eventSource.readyState om de huidige status te bepalen.

De handler eventSource.onmessage wordt aangeroepen voor servergebeurtenissen zonder expliciet gebeurtenistype (de server verstuurt data: ... zonder een veld event:). De handler ontvangt een gebeurtenisobject waarin event.data de lading als tekenreeks bevat. De server gebruikt doorgaans JSON.stringify om de gegevens te serialiseren, zodat je ze bij ontvangst met JSON.parse kunt verwerken.

De server kan benoemde gebeurtenissen versturen: event: userJoined data: {"userId": "123"} . Luister in de browser met eventSource.addEventListener('userJoined', handler). Zo kun je meerdere gebeurtenistypen over één SSE-verbinding verdelen — elk gebeurtenistype heeft een eigen handler, waardoor de code overzichtelijk en goed georganiseerd blijft.

SSE-gegevens komen binnen als tekenreeksen. Voor gestructureerde gegevens verstuurt de server JSON.stringify(payload) en parseert de client deze: const data = JSON.parse(event.data). Plaats JSON.parse altijd in try/catch om ongeldige JSON van de server netjes af te handelen, de fout te registreren en de ongeldige gebeurtenis over te slaan.

Maak EventSource aan en sluit het binnen een useEffect: maak de verbinding wanneer de component wordt geladen, stel de gebeurtenisafhandelaars in en retourneer een opruimfunctie die eventSource.close() aanroept. Zonder deze opruimactie blijft de verbinding bestaan wanneer de component wordt verwijderd, de gebruiker weg navigeert of het effect opnieuw wordt uitgevoerd met andere afhankelijkheden.

Werk binnen de handler eventSource.onmessage de React-status bij om nieuwe gegevens weer te geven: setMessages(prev => [...prev, JSON.parse(event.data)]). Gebruik de functionele vorm van setState om problemen met verouderde closures te voorkomen — de gebeurtenisafhandelaar legt de oorspronkelijke statuswaarde vast en de functionele update zorgt ervoor dat je altijd de meest recente status gebruikt bij het toevoegen.

EventSource maakt automatisch opnieuw verbinding wanneer de verbinding wordt verbroken door een netwerkfout of een herstart van de server. De browser wacht kort (doorgaans 3 seconden; de server kan dit in de gegevensstroom configureren via retry: 3000) en maakt daarna opnieuw verbinding. Je hoeft geen logica voor opnieuw verbinden te implementeren — dit is ingebouwd in de EventSource API.

EventSource houdt de id van de laatst ontvangen gebeurtenis bij (ingesteld door de server via id: 123 in de gegevensstroom). Bij het opnieuw verbinden verstuurt de browser deze id automatisch in de HTTP-koptekst Last-Event-ID. Een goed ontworpen server gebruikt deze id om gemiste gebeurtenissen opnieuw af te spelen, zodat er tijdens het opnieuw verbinden geen gebeurtenissen verloren gaan.

EventSource ondersteunt geen aangepaste kopteksten rechtstreeks. Gebruik voor authenticatie cookies (new EventSource(url, { withCredentials: true }) verstuurt cookies) of voeg het authenticatietoken toe als URL-queryparameter. Als je Authorization-kopteksten nodig hebt, gebruik je de Fetch API met ReadableStream in plaats van EventSource om de SSE-respons handmatig te verwerken.

Wanneer EventSource een fout tegenkomt, wordt de onerror-handler uitgevoerd. De readyState is CONNECTING (als er opnieuw wordt geprobeerd) of CLOSED (als dat niet gebeurt). Controleer in onerror de readyState om onderscheid te maken tussen een tijdelijke netwerkfout (wordt automatisch opnieuw geprobeerd) en een permanente fout (de server gaf geen 200-statuscode terug). Sluit bij permanente fouten de verbinding en breng de gebruiker op de hoogte.

new EventSource(url) maakt een SSE-verbinding met de readyStates CONNECTING, OPEN en CLOSED. onmessage verwerkt algemene gebeurtenissen; addEventListener verwerkt benoemde gebeurtenistypen. JSON.parse(event.data) haalt gestructureerde gegevens uit de payload. Maak EventSource aan en ruim het op in useEffect. Automatische herverbinding is ingebouwd — EventSource probeert het na netwerkfouten opnieuw en gebruikt Last-Event-ID om gemiste gebeurtenissen opnieuw af te spelen. Authenticeer via cookies (withCredentials) of URL-queryparameters.