Lección 14: SSE

Los eventos enviados desde el servidor, SSE o server-sent events, trabaja de una manera similar a los WebSockets ya que permite enviar mensajes asíncronos entre el Backend y el Frontend sin necesidad de hacer nuevas peticiones. No obstante existe 2 diferencias destacables.

Como funciona Server sent events

Se usa el protocolo HTTP.
La información fluye en una dirección, del Servidor al Cliente.

En el siguiente ejemplo podemos ver como un cliente se conecta a una fuente y espera un cambio.

const sse = new EventSource("https://ejemplo.com");

sse.addEventListener("message", function(evento) {
    document.querySelector('#contador').textContent = evento.data;
});

Usando Node

Si quieres crear un servidor que envíe peticiones por SSE, con objetivos didácticos, puedes construir rápidamente un Backend con Node. Enviaremos un contador que incrementa cada segundo, y lo serviremos en la ruta http://localhost:3000/eventos.

1- Doy por sentado que en tu equipo ya dispone de Node, por lo que incluye las dependencias mínimas:

npm install express cors

2- A continuación un archivo llamado llamado index.js con el siguiente contenido:

const express = require('express');
const cors = require('cors');

// Lanza servidor
run().catch(err => console.log(err));

async function run() {
  const app = express();
  app.use(cors());

  app.get('/eventos/', async function(req, res) {
    res.set({
      'Cache-Control': 'no-cache',
      'Content-Type': 'text/event-stream',
      'Connection': 'keep-alive'
    });
    res.flushHeaders();

    // Le indica al clieinte que reinicie la conexión, si se pierde, cada 10s
    res.write('retry: 10000\n\n');
    let count = 0;

    while (true) {
      await new Promise(resolve => setTimeout(resolve, 1000));
      // Incrementa el contador
      count++;
      // Emite un SSE con un numero que incrementa cada segundo
      res.write(`data: ${count}\n\n`);
    }
  });

  await app.listen(3000);
  console.log('Escuchando el puerto 3000');
}

3- Lanza el servidor.

node index.js

4- Crear un HTML con el siguiente contenido y ábrelo con tu navegador favorito.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="contador"></div>
  <script>
    const sse = new EventSource("http://localhost:3000/eventos/");

    sse.addEventListener("message", function(evento) {
       document.querySelector('#contador').textContent = evento.data;
    });
  </script>
</body>
</html>