Consumir streams SSE en React con EventSource

new EventSource(url) crea una conexión SSE con la URL especificada. El navegador abre inmediatamente una solicitud HTTP GET con la cabecera Accept: text/event-stream. El servidor mantiene abierta esta conexión y transmite eventos. EventSource es una API nativa del navegador; para el uso básico no se necesita ninguna biblioteca.

EventSource tiene tres estados de disponibilidad: 0 (CONNECTING): se está estableciendo o restableciendo la conexión; 1 (OPEN): la conexión está establecida y los eventos están fluyendo; 2 (CLOSED): la conexión está cerrada y no volverá a conectarse. Compruebe eventSource.readyState para determinar el estado actual.

El controlador eventSource.onmessage se activa para los eventos del servidor que no tienen un tipo de evento explícito (el servidor envía data: ... sin un campo event:). El controlador recibe un objeto de evento cuyo event.data es el contenido en forma de cadena. Normalmente, el servidor aplica JSON.stringify a los datos para que pueda aplicarles JSON.parse al recibirlos.

El servidor puede enviar eventos con nombre: event: userJoined\ndata: {"userId": "123"}\n\n. En el navegador, escúchelos con eventSource.addEventListener('userJoined', handler). Esto permite multiplexar varios tipos de eventos en una sola conexión SSE; cada tipo de evento tiene su propio controlador, lo que mantiene el código limpio y organizado.

Los datos SSE llegan como cadenas. Para los datos estructurados, el servidor envía JSON.stringify(payload) y el cliente los analiza: const data = JSON.parse(event.data). Rodee siempre JSON.parse con try/catch para gestionar correctamente el JSON mal formado del servidor, registrar el error y omitir el evento defectuoso.

Cree y cierre EventSource dentro de un useEffect: cree la conexión cuando el componente se monte, asigne los controladores de eventos y devuelva una función de limpieza que llame a eventSource.close(). Sin la limpieza, la conexión queda abierta cuando el componente se desmonta, el usuario cambia de página o el efecto vuelve a ejecutarse con dependencias diferentes.

Dentro del controlador eventSource.onmessage, actualice el estado de React para reflejar los datos nuevos: setMessages(prev => [...prev, JSON.parse(event.data)]). Use la forma funcional de setState para evitar problemas con cierres obsoletos: el controlador de eventos captura el valor inicial del estado y la actualización funcional garantiza que siempre se actualice a partir del estado más reciente.

EventSource se reconecta automáticamente cuando la conexión se pierde debido a un error de red o al reinicio del servidor. El navegador espera un breve intervalo (normalmente 3 segundos, configurable por el servidor mediante retry: 3000 en el flujo) y luego se reconecta. No necesita implementar la lógica de reconexión: ya está integrada en la API de EventSource.

EventSource realiza un seguimiento del ID del último evento recibido (establecido por el servidor mediante id: 123 en el flujo). Al reconectarse, el navegador envía automáticamente este ID en el encabezado HTTP Last-Event-ID. Un servidor bien diseñado utiliza este ID para reproducir los eventos omitidos y garantizar que no se pierda ninguno durante una reconexión.

EventSource no admite encabezados personalizados directamente. Para la autenticación, utilice cookies (new EventSource(url, { withCredentials: true }) envía las cookies) o incluya el token de autenticación como parámetro de consulta de la URL. Si necesita encabezados Authorization, utilice la API Fetch con ReadableStream en lugar de EventSource para procesar manualmente la respuesta SSE.

Cuando EventSource encuentra un error, se ejecuta el controlador onerror. El valor de readyState será CONNECTING (si se volverá a intentar) o CLOSED (si no). En onerror, compruebe readyState para distinguir entre un error de red temporal (se reintentará automáticamente) y un fallo permanente (el servidor devolvió un estado distinto de 200). En caso de errores permanentes, cierre la conexión y notifique al usuario.

new EventSource(url) crea una conexión SSE con readyStates: CONNECTING, OPEN, CLOSED. onmessage gestiona eventos genéricos; addEventListener gestiona tipos de eventos con nombre. JSON.parse(event.data) extrae datos estructurados. Cree y libere EventSource en useEffect. La reconexión automática está integrada: EventSource reintenta después de errores de red y utiliza Last-Event-ID para reproducir eventos omitidos. Autentíquese mediante cookies (withCredentials) o parámetros de consulta de la URL.