Realtime Updates

The Problem

Building realtime features typically requires WebSocket setup, custom message protocols, and JavaScript to parse messages and update the DOM.

The Solution

Swap.Htmx provides first-class integration with Server-Sent Events (SSE). Push HTML directly to the browser using HTMX's native SSE support.

Setup

dotnet add package Swap.Htmx.Realtime

builder.Services.AddSwapHtmx().AddSseEventBridge();

app.UseSseEventBridge();

The Controller

[HttpGet("/stream")]

public IActionResult Stream() => ServerSentEvents(async (conn, ct) =>

{

    conn.Subscribe("dashboard-updates");

    await conn.KeepAlive(TimeSpan.FromSeconds(30), ct);

});

The View

<div hx-ext="sse" sse-connect="/stream">

    <div sse-swap="stats">Loading...</div>

</div>

Use Cases