SSE Stream

Declarative wrapper for the htmx SSE extension. Streams real-time content from the server via Server-Sent Events.

<rhx-sse-stream>

Examples

The SSE Stream component requires the htmx SSE extension. This demo site includes it globally. In your own project, add <script src="https://unpkg.com/htmx-ext-sse"></script> to your layout.

Server Clock

Streams the current server time every second for 10 seconds.

<rhx-sse-stream rhx-url="/Docs/Components/SseStream?handler=Clock"
                 rhx-event="clock">
    <rhx-spinner />
</rhx-sse-stream>

Close on Event

Streams a countdown, then closes the connection when a "done" event is received.

Waiting for countdown...

<rhx-sse-stream page="/Docs/Components/SseStream" page-handler="Countdown"
                 rhx-event="tick" rhx-close-on="done">
    Waiting for countdown...
</rhx-sse-stream>

Server-Side Helpers

Use the companion HtmxSseExtensions methods to format responses:

// In your PageModel or Controller:
public async Task OnGetStream()
{
    Response.PrepareSseResponse();

    await foreach (var item in GetItemsAsync())
    {
        await Response.WriteSseEventAsync(item, "message");
    }
}

// Or stream an IAsyncEnumerable directly:
public async Task OnGetStream()
{
    await Response.WriteSseStreamAsync(GetItemsAsync(), "message");
}