Lección 14: SSE

Los eventos del 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 side 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.onmessage = function(evento) {
  console.log(evento.data);
}

Puedes usar el servidor SSE Fake para testear el código.

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.onmessage = function(evento) {
      document.querySelector('#contador').textContent = evento.data;
    }
  </script>
</body>
</html>

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Te ayudo?

  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario