diff --git a/www/content/docs.md b/www/content/docs.md index 0df6e865..daa24e27 100644 --- a/www/content/docs.md +++ b/www/content/docs.md @@ -29,7 +29,8 @@ custom_classes = "wide-content" * [confirming](#confirming) * [inheritance](#inheritance) * [boosting](#boosting) -* [websockets & SSE](#) +* [SSE](#SSE) +* [WebSockets](#) * [history](#history) * [requests & responses](#requests) * [validation](#validation) @@ -772,7 +773,135 @@ As such, the normal HTML accessibility recommendations apply. For example: ## SSE -TODO: Christian, document new SSE functionality +Unlike htmx 2, htmx 4 has **built-in support** for Server-Sent Events (SSE). + +Use the typical `hx-get`, `hx-post`, `hx-put`, `hx-patch`, or `hx-delete` attributes. When the server responds with `Content-Type: text/event-stream` instead of `Content-Type: text/html`, htmx automatically handles the stream. + +Each SSE message with a `data:` line (and no `event:` line) is processed like a regular htmx response, respecting `hx-target`, `hx-select`, and `hx-swap` attributes. + +Like [fetch-event-source](https://github.com/Azure/fetch-event-source), htmx's custom SSE implementation supports request bodies, custom headers, and all HTTP methods (not just GET), and Page Visibility API integration (using the `pauseHidden` modifier). + +### Basic Usage + +```html + + +
+``` + +The server sends SSE messages with `data:` lines: +``` +data: H + +data: He + +// ... + +data: Hello partner! + +``` + +Each message replaces the target element's content. The stream processes until the connection closes, then stops. No reconnection occurs by default. + +### Stream Modes + +The `hx-stream` attribute controls reconnection behavior. The default mode is `once`, so it doesn't need to be specified. + +- `once` (default): Process stream until connection closes. No reconnection. +- `continuous`: Reconnect automatically if connection drops. Retries with exponential backoff. + +```html + + ... + +``` + +**Note:** `hx-stream="continuous"` is primarily intended for use with `` to enable real-time updates to multiple parts of the page via a permanently open SSE connection. + +### Partial Updates + +Use `` tags to update multiple targets from a single stream, similar to `hx-swap-oob`. + +```html + + +
0
+
Idle
+``` + +Server sends multiple partials in one message: + +``` +data: 42 + +data: Active + +``` + +### Custom Events + +SSE `event:` lines trigger custom DOM events. When an `event:` line is present, htmx fires that event instead of performing a normal swap. Use this for lightweight updates without swapping DOM elements. + +```html + +``` + +Server sends custom events: + +``` +event: progress +data: 50 + +event: progress +data: 100 + +``` + +### Configuration + +Global stream config in `htmx.config.streams`: + +```html + +``` + +- `mode`: `'once'` or `'continuous'` +- `maxRetries`: Maximum reconnection attempts (default: `Infinity`) +- `initialDelay`: First reconnect delay in ms (default: `500`) +- `maxDelay`: Max backoff delay in ms (default: `30000`) +- `pauseHidden`: Pause stream when page is hidden (default: `false`). Uses the Page Visibility API to pause the stream when the browser window is minimized or the tab is in the background. + + +You can override these settings per-element using the `hx-stream` attribute: +```html + +``` + +### Events + +- `htmx:before:sse:stream`: Fired before processing stream +- `htmx:before:sse:message`: Fired before each message swap. Cancel with `event.detail.message.cancelled = true` +- `htmx:after:sse:message`: Fired after each message swap +- `htmx:after:sse:stream`: Fired when stream ends +- `htmx:before:sse:reconnect`: Fired before reconnection attempt. Cancel with `event.detail.reconnect.cancelled = true` ## Web Sockets