HTML Server-Sent Events (SSE)
Zuvor führten Web Workers JavaScript in einem Hintergrund-Thread aus und sprachen mit der Seite über postMessage — lokale CPU-Arbeit, kein Server-Stream. Diese Lektion verlässt Off-Thread-Compute und stellt SSE vor: Der Server pusht Text-Updates über HTTP. Praxis — öffnen, hören, einseitiger Push — keine Node-Stream-Server.
Warum SSE in einem HTML-Kurs
Anfänger brauchen Live-Scores oder Logs ohne eigenes Socket-Protokoll. SSE ist die übliche erste API für Server-Push von Text über HTTP. Nach Workers ist die Trennung anders: Server besitzt den Stream; Seitenskript besitzt EventSource und DOM.
Direkte Antwort
1) new EventSource("/events"). 2) onmessage und e.data. 3) DOM auf der Seite aktualisieren. 4) onerror. 5) Einseitig. 6) WebSockets für Duplex; Polling für selten; Workers für lokale CPU.
📊 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 |
Winziges EventSource-Listen-Muster
Nur Browser-Seite. /events muss ein echter SSE-Endpunkt sein; ohne Server kommt Fehler — lehrt trotzdem die API-Form.
<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>
Die Listen-Aufrufe lesen
- EventSource öffnet langen HTTP-Stream
- onmessage bei message
- e.data ist die Textnutzlast
- Seite schreibt ins pre
- Anders als Workers: kein postMessage an Hintergrund-Thread
- onerror ohne Server erwartet
- Intro klein halten
Stream-Zeilen an ein Log anhängen
Live-UIs hängen oft jedes Event an. Diese Demo behält die letzten Zeilen in einer Liste.
<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>
Die Log-Idee lesen
- Jedes onmessage erzeugt li
- Liste begrenzen
- Weiterhin einseitig
- Kein Web Worker
- Benannte Events existieren; message reicht
- es.close() wenn fertig
- Als Nächstes: XHTML
SSE, Polling, Sockets oder Workers wählen
- Häufiger Status-Push über HTTP: guter SSE-Fit
- Seltene Aktualisierung: Polling kann reichen
- Chat beider Richtungen: WebSockets
- Schwere lokale Schleife: waren Workers
- Karte ziehen: war DnD
- Backend-Stream-Endpunkt bauen: jenseits dieses Intros
Übung — öffnen, hören, kontrastieren
- Listen-Snippet lesen.
- text/event-stream skimmen.
- Append-Log lesen.
- Satz: Workers lokal; SSE vom Server.
- Satz: SSE einseitig; WebSockets Duplex.
- Optional echte URL.
- Ausblick: XHTML.
Typische Fehler
- Browser→Server über EventSource erwarten
- Mit Web Workers verwechseln
- Event-Stream-Content-Type vergessen
- SSE für seltene Updates
- onerror ignorieren
- Intro als vollen Backend-Streaming-Kurs nehmen
- EventSource mit Worker/WebSocket verwechseln
Zusammenfassung
- SSE streamt Server→Browser-Text über HTTP
- EventSource, onmessage/onerror; DOM auf der Seite
- Einseitiger Push; WebSockets für Duplex
- Workers waren lokales Off-Thread-Compute; diese Lektion Server-Push
- Echte Demos brauchen text/event-stream
- Als Nächstes: XHTML
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt