EventSource Polyfill Demo

SSE is a standard allowing servers to push real-time updates to browsers over HTTP. Unlike WebSockets, SSE is unidirectional (server→client), uses simple text-based protocol, and automatically handles reconnection. It's ideal for live feeds, notifications, stock tickers, and monitoring dashboards.

The native EventSource API was designed with security constraints. It doesn't expose header configuration to prevent misuse in cross-origin scenarios. This means you cannot pass Authorization tokens, API keys, or custom headers needed for authenticated SSE streams. That's exactly why a polyfill is essential.

This polyfill uses the Fetch API + ReadableStream to establish an HTTP connection. It reads the streaming response chunk-by-chunk, parses SSE protocol lines (event:, data:, id:), and dispatches events just like native EventSource — but with full control over headers, HTTP method, and request body.

SSE is simpler, works over standard HTTP, benefits from HTTP/2 multiplexing, and auto-reconnects. Ideal for server→client push (feeds, notifications). WebSocket is bidirectional, lower latency, but requires a dedicated protocol upgrade. Choose SSE when you only need server-to-client updates. Choose WebSocket for chat, gaming, or collaborative editing.

SSE has built-in reconnection via the Last-Event-ID header. When a connection drops, the client automatically reconnects and sends the last received event ID. The server can resume the stream from that point, ensuring no events are missed. This polyfill implements the same behavior with configurable retry intervals.

This polyfill relies on Fetch API and ReadableStream, supported in Chrome 43+, Firefox 65+, Safari 10.1+, and Edge 79+. For older browsers, consider using an XHR-based fallback. The demo's built-in simulation mode works in all modern browsers without any network dependency.

Native EventSource only supports GET. With this polyfill, you can use POST (or any HTTP method) and include a request body — useful for sending complex queries, filters, or GraphQL-like subscriptions where the initial request needs payload data before the SSE stream begins.