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 `