The home of Jollytoad

Server Sent Events Demo

What is this?

This is a demonstration of controlling streams of content via SSE (Server Sent Events) using htmx.

There are two important elements, a control and an output.

When you hit the Start button, a GET request is made to swap in a new control element which provides the htmx attributes to kick off the SSE request, targetting the output element.

The SSE feed returns a number of rendered items, which are appended to the output, and finishes with an out-of-band swap of the control element which terminates the SSE feed.

The Stop button will also make a request to swap the control element, manually terminating the feed.

Refresh the page to start again.

Open the browser console to see the swapping in action, and/or take a look at the source code (link at bottom of page) to see the gritty details.

Control:

Feed has not yet started. Hit the button... 

Output:

Feed appears here: