0Pricing
Frontend Academy · Lección

Server-Sent Events para streaming unidireccional

Use EventSource para recibir un flujo de eventos enviados por el servidor, analice los tipos y datos de los eventos y reconecte automáticamente tras interrupciones de red.

Server-Sent Events para streaming unidireccional es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué son los Server-Sent Events?

SSE es un protocolo estándar basado en HTTP que permite al servidor enviar eventos al navegador mediante una única conexión de larga duración. Es unidireccional: solo del servidor al cliente. Es más sencillo que WebSockets cuando no necesita enviar datos de vuelta.

API EventSource

EventSource del navegador se conecta a una URL y escucha eventos. Es estándar, está integrado y no requiere ninguna biblioteca.

const es = new EventSource('/api/events');

es.addEventListener('message', (event) => {
  console.log('Received:', event.data);
});

es.addEventListener('error', () => {
  console.error('Connection error');
});

Formato de la respuesta del servidor

El servidor envía un flujo de texto sin formato con Content-Type: text/event-stream. Cada mensaje comienza con data: y termina con una línea en blanco.

// Server response:
Content-Type: text/event-stream
Cache-Control: no-cache

data: hello\n\n
data: another message\n\n
data: {"type":"chat","text":"Hi"}\n\n

Eventos con nombre

El servidor puede asignar nombres a los eventos mediante event:. El navegador los dispara con ese nombre.

// Server:
event: chat
data: {"user":"Alice","text":"Hi"}\n\n

event: user-joined
data: {"name":"Bob"}\n\n

// Client:
es.addEventListener('chat', (e) => { /* ... */ });
es.addEventListener('user-joined', (e) => { /* ... */ });

Reconexión automática

EventSource se reconecta automáticamente cuando se interrumpe la conexión (después de unos 3 segundos). El servidor puede sugerir un intervalo mediante retry: 5000.

// Server:
retry: 5000\n
data: hello\n\n

IDs de eventos y reanudación

El servidor envía id: con cada evento. Después de reconectarse, el navegador envía el último ID recibido en el encabezado Last-Event-ID; el servidor puede reanudar el envío desde ese punto.

// Server:
id: 42
event: chat
data: {"text":"Hi"}\n\n

id: 43
event: chat
data: {"text":"How are you?"}\n\n

// Client reconnect sends: Last-Event-ID: 43

Analizar JSON

event.data siempre es una cadena. Analice el JSON usted mismo.

es.addEventListener('chat', (e) => {
  const msg = JSON.parse(e.data);
  console.log(msg.user, msg.text);
});

Cerrar la conexión

Llame a es.close() para detener la conexión. Los navegadores también la cierran al cerrar la pestaña.

es.close();

// In React, close in useEffect cleanup:
useEffect(() => {
  const es = new EventSource('/events');
  es.onmessage = (e) => setData(d => [...d, e.data]);
  return () => es.close();
}, []);

Casos de uso

Paneles en tiempo real (métricas y monitorización). Notificaciones (nuevos correos electrónicos y alertas). Cotizaciones bursátiles. Respuestas de chat de IA (cada token es un evento). Resultados deportivos en directo. Actualizaciones de estado de trabajos de larga duración.

Ejemplo real: streaming de IA

Las respuestas de OpenAI/Anthropic se transmiten como SSE. Cada token llega como un evento de datos; muéstrelo progresivamente para crear un efecto de escritura.

const es = new EventSource('/api/chat?prompt=hello');
let text = '';
es.addEventListener('message', (e) => {
  if (e.data === '[DONE]') {
    es.close();
    return;
  }
  const { delta } = JSON.parse(e.data);
  text += delta;
  setMessage(text);
});

SSE frente a WebSocket y polling

SSE: basado en HTTP, solo del servidor al cliente, con reconexión automática y sencillo. WebSocket: dúplex completo, menor sobrecarga por mensaje y más complejo. Polling: el más sencillo, pero con mayor latencia y carga. Elija SSE para flujos unidireccionales y WS para comunicaciones bidireccionales como un chat.

Límites del navegador y proxies

Los navegadores limitan las conexiones SSE simultáneas por origen (unas 6). Algunos proxies corporativos y balanceadores de carga antiguos almacenan en búfer las respuestas, lo que interrumpe SSE; haga pruebas en los entornos de destino. Use HTTPS para evitar la mayor parte del almacenamiento en búfer de los proxies.

CORS para SSE

EventSource respeta CORS. El servidor debe enviar Access-Control-Allow-Origin. Para las credenciales, pase { withCredentials: true } al constructor de EventSource y establezca Access-Control-Allow-Credentials: true en el servidor.

Comprobación rápida

¿Cuál es la diferencia principal entre Server-Sent Events y WebSockets?

Repaso: Server-Sent Events

EventSource abre un flujo HTTP de eventos text/event-stream. El servidor envía mensajes «data:» con un nombre de evento event: y un id: opcionales. La reconexión automática permite reanudar mediante Last-Event-ID. Es unidireccional (del servidor al cliente). Es ideal para paneles en tiempo real, streaming de IA y notificaciones. Es más sencillo que WebSocket cuando no necesita comunicación bidireccional. Tenga en cuenta los límites de conexiones simultáneas y el almacenamiento en búfer de los proxies.

Preguntas frecuentes

¿La lección «Server-Sent Events para streaming unidireccional» es gratis?

Sí — el texto completo de «Server-Sent Events para streaming unidireccional» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Server-Sent Events para streaming unidireccional»?

Use EventSource para recibir un flujo de eventos enviados por el servidor, analice los tipos y datos de los eventos y reconecte automáticamente tras interrupciones de red. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Server-Sent Events para streaming unidireccional»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. API de WebSocket: open, message, close y error
  2. Integración del cliente de Socket.io
  3. Server-Sent Events para streaming unidireccional
  4. Patrones de UI en tiempo real
← Volver a Frontend Academy