SSE (Server-Sent Events)

Definicion

¿Alguna vez te has preguntado cómo los sitios web te muestran notificaciones en vivo sin que refresques la página? ¿O cómo los precios de acciones se actualizan en tiempo real mientras miras? Server-Sent Events (SSE) es una de las formas más simples de lograr esta magia. Permite a un servidor enviarte actualizaciones en el momento en que algo interesante ocurre, sin que tengas que preguntar.

El modelo web tradicional es petición-respuesta: tu navegador pide datos, el servidor responde, fin de la conversación. Si quieres actualizaciones, tienes que seguir preguntando (polling). SSE invierte esto para una dirección - una vez que estableces una conexión, el servidor puede enviarte actualizaciones cuando quiera, durante todo el tiempo que la conexión permanezca abierta. Haces una petición, y el servidor puede enviarte cientos de actualizaciones durante la próxima hora.

Lo que hace especial a SSE es su simplicidad. A diferencia de WebSockets, que requieren una actualización de protocolo y configuración de comunicación bidireccional, SSE funciona sobre HTTP plano. Es solo una respuesta que nunca termina - el servidor mantiene la conexión abierta y envía trozos de datos cuando tiene algo nuevo. Los navegadores tienen soporte integrado a través de la API EventSource, que maneja la reconexión automáticamente si la conexión cae. Para escenarios donde solo necesitas actualizaciones unidireccionales de servidor a cliente, SSE es frecuentemente la opción más simple y confiable.

Ejemplo

Resultados deportivos en vivo: Cuando ves un partido de fútbol en la web de un periódico deportivo, SSE puede enviar actualizaciones de marcadores, jugada a jugada y estadísticas en tiempo real. No refrescas - el servidor envía actualizaciones conforme el partido se desarrolla.

Notificaciones de redes sociales: Cuando alguien da like a tu publicación o te menciona, SSE puede enviar esa notificación a tu navegador instantáneamente. Facebook, Twitter y LinkedIn todos usan sistemas de notificación en tiempo real similares.

Streaming de logs: Cuando los desarrolladores ven logs de servidor en tiempo real (como en AWS CloudWatch o Heroku logs), SSE frecuentemente impulsa ese feed en vivo. Cada nueva línea de log se envía a tu navegador inmediatamente.

Indicadores de edición colaborativa: Google Docs te muestra quién más está viendo el documento. Mientras la sincronización real de edición usa protocolos más complejos, los indicadores de presencia (quién está online) frecuentemente usan enfoques tipo SSE.

Analogia

El Ticker de Noticias: Piensa en el ticker de noticias desplazándose en la parte inferior de los canales de noticias. Una vez que sintonizas, las actualizaciones fluyen continuamente sin que hagas nada. No llamas a la cadena cada minuto preguntando “¿alguna noticia?” - ellos envían actualizaciones cuando algo ocurre. SSE funciona igual.

La Emisión de Radio: Cuando sintonizas una estación de radio, no solicitas canciones repetidamente. Te conectas una vez, y la música fluye hacia ti continuamente. SSE es como radio para datos - una conexión, actualizaciones continuas.

El Panel de Salidas del Aeropuerto: El panel de salidas se actualiza automáticamente cuando la información del vuelo cambia. No tienes que seguir preguntando al mostrador de información - solo miras el panel. SSE crea esta misma experiencia para páginas web.

El Monitor de Bebé: Una vez que enciendes un monitor de bebé, envía audio continuamente al receptor. No tienes que preguntar repetidamente “¿está el bebé haciendo ruido?” - simplemente transmite cuando hay algo que reportar. SSE proporciona este monitoreo continuo para eventos del servidor.

Diagrama

sequenceDiagram
    participant C as Cliente
    participant S as Servidor

    C->>S: GET /events (Accept: text/event-stream)

    Note over C,S: La conexión permanece abierta

    rect rgb(200, 230, 200)
        S-->>C: event: update
data: {"precio": 100}
        Note right of C: Cliente recibe
        S-->>C: event: update
data: {"precio": 101}
        Note right of C: Cliente recibe
        S-->>C: event: alerta
data: {"msg": "Última hora"}
        Note right of C: Cliente recibe
    end

    Note over C,S: Conexión se cae
    C--xS: Error de red

    Note over C,S: Reconexión automática
    C->>S: GET /events (Last-Event-ID: 3)
    S-->>C: event: update
data: {"precio": 102}

Code Example

// SSE del lado del cliente
const eventSource = new EventSource('/api/events/stream');

eventSource.addEventListener('price-update', (event) => {
  const data = JSON.parse(event.data);
  console.log('Nuevo precio:', data.price);
});

eventSource.onerror = (error) => {
  console.error('Error SSE:', error);
};

// Del lado del servidor (Node.js Express)
app.get('/api/events/stream', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  const interval = setInterval(() => {
    res.write(`event: price-update\n`);
    res.write(`data: {"price": ${Math.random() * 100}}\n\n`);
  }, 1000);

  req.on('close', () => clearInterval(interval));
});

Notas de Seguridad

Standards & RFCs