HTML Server-Sent Events (SSE)
Antes, Web Workers executavam JavaScript numa thread de fundo e falavam com a página com postMessage — CPU local, sem stream do servidor. Esta lição deixa o cálculo off-thread e apresenta SSE: o servidor empurra atualizações de texto por HTTP. Âmbito prático — abrir, ouvir, push unidirecional — sem servidores de stream Node.
Por que SSE num curso HTML
Principiantes precisam de pontuações ou logs em direto sem protocolo de socket à medida. SSE é a primeira API habitual para push de texto por HTTP. Após Workers, a divisão é outra: o servidor possui o stream; o script da página possui EventSource e o DOM.
Resposta direta
1) new EventSource("/events"). 2) onmessage e e.data. 3) Atualize o DOM na página. 4) onerror. 5) Unidirecional. 6) WebSockets para duplex; polling se 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 padrão de escuta EventSource
Só lado do navegador. /events deve ser um endpoint SSE real; sem servidor há erro — ainda assim ensina a forma da 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>
Ler as chamadas de escuta
- EventSource abre um stream HTTP longo
- onmessage em message
- e.data é a carga de texto
- A página escreve no pre
- Ao contrário de Workers: sem postMessage para thread de fundo
- onerror esperado sem servidor
- Mantenha a intro pequena
Acrescentar linhas do stream a um log
UIs em direto costumam acrescentar cada evento. Esta demo guarda as últimas linhas numa 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>
Ler a ideia do log
- Cada onmessage cria um li
- Limite a lista
- Continua unidirecional
- Não é Web Worker
- Existem eventos nomeados; message basta
- es.close() no fim
- A seguir: XHTML
Escolher SSE, polling, sockets ou workers
- Push frequente de estado por HTTP: bom fit SSE
- Atualização rara: polling pode bastar
- Chat nos dois sentidos: WebSockets
- Ciclo local pesado: foram Workers
- Arrastar cartão: foi DnD
- Construir o endpoint de stream do backend: fora desta intro
Prática — abra, ouça, contraste
- Leia o snippet de escuta.
- Veja text/event-stream.
- Leia o log append.
- Frase: Workers local; SSE do servidor.
- Frase: SSE unidirecional; WebSockets duplex.
- Opcional URL real.
- Antevisão: XHTML.
Erros fáceis
- Esperar envio navegador→servidor via EventSource
- Confundir com Web Workers
- Esquecer o content-type event-stream
- SSE para updates muito raros
- Ignorar onerror
- Tratar a intro como curso completo de streaming backend
- Misturar EventSource com Worker ou WebSocket
Resumo
- SSE transmite texto servidor→navegador por HTTP
- EventSource, onmessage/onerror; DOM na página
- Push unidirecional; WebSockets para duplex
- Workers eram computação local off-thread; esta lição é push do servidor
- Demos reais precisam de text/event-stream
- Seguinte: XHTML
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo