Await StationISSUE #15 of 26

server-sent events · EventSource

PromissaVSRace Condition Rex

Promissa saysEventSource opens a one-way Server-Sent Events stream that auto-reconnects.

For server→client updates only (notifications, live feeds), new EventSource(url) is simpler than WebSockets: it streams text events over plain HTTP and reconnects automatically. Listen with onmessage or named-event listeners. It can't send back to the server (use a normal request for that) and needs a text/event-stream endpoint.

Power-ups you unlock

new EventSource(url) → one-way server push
Auto-reconnects; works over HTTP
onmessage or addEventListener for named events
Client→server still uses ordinary requests

Race Condition Rex attacks — common mistakes

Reaching for WebSockets when SSE suffices
Expecting to send up the EventSource
Server not emitting text/event-stream

Boss battleSketch an EventSource client that logs each pushed message.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre>const es = new EventSource('/events');
es.onmessage = e => console.log('push:', e.data);
es.onerror   = () => console.log('reconnecting…');
// needs a text/event-stream server endpoint</pre></body></html>

▶ Open the interactive comic issue

‹ Websockets · Client Api Broadcast Channel · Cross-Tab Messaging ›