Real-Time Updates

What you'll build

An export contacts job: pressing the button starts a job on the server, and a progress area updates live until the job finishes, then stops asking.

The idea

Polling works through every proxy and load balancer and is easy to scale; SSE and WebSockets keep a connection open per user, which needs care with timeouts and server capacity.

The code

<div id="export">
  <button hx-post="/exports" hx-target="#export">Export contacts (CSV)</button>
</div>

<!-- The pretend server: on a real site this part is your backend (Python, PHP, Node, Go...) -->
<script>
  let progress = 0;
  server.post("/exports", () => {
    progress = 0;   // the job starts; the response contains the element that polls
    return `<p hx-get="/exports/17" hx-trigger="every 1s">Export queued...</p>`;
  });
  server.get("/exports/17", () => {
    progress += 25;
    if (progress >= 100) return { status: 286, body: `<a href="#">contacts.csv</a> is ready.` };
    return `<progress value="${progress}" max="100"></progress> ${progress}%`;
  });
</script>

The same feature with SSE pushes each step instead of being asked:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div hx-ext="sse" sse-connect="/exports/17/events" sse-swap="progress" sse-close="done">Export queued...</div>

Common mistakes

• Polling with no stop condition: finished jobs keep generating requests. Return 286 or replace the polling element.
• Holding database connections open per SSE/WebSocket client: use async servers or a pub/sub layer.
• Choosing WebSockets for one-way notifications: SSE is simpler and reconnects automatically.

Key points

• Start with polling; move to SSE when latency matters, WebSockets when traffic is two-way.
• 286 stops htmx polling.
• htmx 2 provides SSE and WebSockets as separate extensions.

Further reading: htmx SSE extension · htmx WebSocket extension · htmx example: progress bar