Lección 14: SSE | Curso JavaScript

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>
Actividad 1

Cuando el contador sea divisible por 10, muestra un modal con la cantidad actual.

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

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

Comprame un café
Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario