HTML Server-Sent Events (SSE)
Antes, Web Workers ejecutaban JavaScript en un hilo de fondo y hablaban con la página con postMessage — CPU local, sin stream del servidor. Esta lección deja el cómputo off-thread y presenta SSE: el servidor empuja actualizaciones de texto por HTTP. Alcance práctico — abrir, escuchar, push unidireccional — no servidores de stream Node.
Por qué SSE en un curso HTML
Los principiantes necesitan puntuaciones o logs en vivo sin un protocolo de socket a medida. SSE es la primera API habitual para push de texto por HTTP. Tras Workers, la división es otra: el servidor posee el stream; el script de página posee EventSource y el DOM.
Respuesta directa
1) new EventSource("/events"). 2) onmessage y e.data. 3) Actualiza el DOM en la página. 4) onerror. 5) Unidireccional. 6) WebSockets para dúplex; polling si es raro; Workers para CPU local.
📊 SSE vs WebSocket vs Worker
| Topic | SSE (this lesson) | WebSocket | Web Worker (prev) |
|---|---|---|---|
| Typical role | Server→browser text stream | Full duplex messages | Local off-thread compute |
| Browser entry | EventSource(url) | new WebSocket(url) | new Worker(url or Blob) |
| Direction | One-way (server push) | Two-way | Page ↔ worker (no server required) |
| Transport idea | HTTP text/event-stream | WS protocol | postMessage / onmessage |
| DOM updates | On the page script | On the page script | On the page script only |
| This course depth | Required (browser pattern) | Contrast only | Previous lesson |
| Not this lesson | Full backend stream servers | Chat product design | SharedWorker fleets |
Mini patrón de escucha EventSource
Solo lado del navegador. /events debe ser un endpoint SSE real; sin servidor hay error — aun así enseña la forma de la API.
<pre id="out">Waiting for stream…</pre>
<script>
const out = document.getElementById("out");
const es = new EventSource("/events");
es.onmessage = function (e) {
out.textContent = "Last update: " + e.data;
};
es.onerror = function () {
out.textContent = "SSE error or closed (need a real /events stream)";
};
</script>
Leer las llamadas de escucha
- EventSource abre un stream HTTP largo
- onmessage en message
- e.data es la carga de texto
- La página escribe en pre
- A diferencia de Workers: sin postMessage a un hilo de fondo
- onerror esperado sin servidor
- Mantén la intro pequeña
Añadir líneas del stream a un log
Las UIs en vivo suelen añadir cada evento. Esta demo guarda las últimas líneas en una lista.
<ul id="log"></ul>
<script>
const log = document.getElementById("log");
const es = new EventSource("/events");
es.onmessage = function (e) {
const li = document.createElement("li");
li.textContent = e.data;
log.appendChild(li);
while (log.children.length > 5) {
log.removeChild(log.firstChild);
}
};
es.onerror = function () {
if (!log.dataset.noted) {
log.dataset.noted = "1";
const li = document.createElement("li");
li.textContent = "Stream not available — wire a text/event-stream URL";
log.appendChild(li);
}
};
</script>
Leer la idea del log
- Cada onmessage crea un li
- Limita la lista
- Sigue siendo unidireccional
- No es Web Worker
- Existen eventos con nombre; message basta
- es.close() al terminar
- Siguiente: XHTML
Elegir SSE, polling, sockets o workers
- Push frecuente de estado por HTTP: buen fit SSE
- Actualización rara: puede bastar polling
- Chat en ambos sentidos: WebSockets
- Bucle local pesado: fueron Workers
- Arrastrar tarjeta: fue DnD
- Construir el endpoint de stream del backend: fuera de esta intro
Práctica — abre, escucha, contrasta
- Lee el snippet de escucha.
- Revisa text/event-stream.
- Lee el log append.
- Frase: Workers local; SSE del servidor.
- Frase: SSE unidireccional; WebSockets dúplex.
- Opcional URL real.
- Vista previa: XHTML.
Errores fáciles
- Esperar envío navegador→servidor por EventSource
- Confundir con Web Workers
- Olvidar el content-type event-stream
- SSE para updates muy raros
- Ignorar onerror
- Tomar la intro como curso completo de streaming backend
- Mezclar EventSource con Worker o WebSocket
Resumen
- SSE transmite texto servidor→navegador por HTTP
- EventSource, onmessage/onerror; DOM en la página
- Push unidireccional; WebSockets para dúplex
- Workers eran cómputo local off-thread; esta lección es push del servidor
- Demos reales necesitan text/event-stream
- Siguiente: XHTML
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior