Server-Driven Web Apps with htmx

Server-Sent Events (SSE)

Server-sent events^[81] (SSE) are used to send data from a server to a client, but not in the other direction.

Common uses of SSE include:

• Live data feeds such as weather and sports updates
• Gathering and displaying information about server-side progress
• Client-side logging of server-side activity

The messages sent from SSE endpoints don’t include HTTP headers, so they can be much smaller than HTTP response messages.

Let’s recreate the countdown app we implemented using WebSockets, but this time we’ll use server-sent events.

Client HTML

The following HTML connects to an SSE server and receives server-sent events. Note the use of the EventSource JavaScript class.

First, we load some CSS and declare a couple of JavaScript variables. ...