The current SSE implementation is geared towards triggering events in the DOM, requiring an HTTP request to be sent up to get new content:
<div hx-sse="connect /event_stream">
<div hx-get="/chatroom" hx-trigger="sse:chatter">
...
</div>
</div>
In this case, an SSE event named chatter
would trigger a GET
to the /chatroom
URL.
This is a very limited use of the Server Sent Events API. In particular, there are two aspects of SSE that are ignored:
- SSE events can have data (not just names) associated with them
- SSE events do not need to have a name (i.e. they can be pure data-only messages)
I propose the following extensions to the current SSE functionality:
If an element wants to directly swap the data of a message into its body, I propose the following syntax:
<div hx-sse="connect /event_stream">
<div hx-sse="swap on chatter">
...
</div>
</div>
The swap on
indicates that this element wants to listen for chatter
messages and swap the body when they occur.
The hx-swap
attribute can then be used to determine exactly how the swap is done, as with normal swaps.
In the case of a data-only message, the message type is message
according to the SSE spec. Thus, the form swap on message
should work the same as the named event implementation.
<div hx-sse="connect /event_stream">
<div hx-sse="swap on message">
...
</div>
</div>
We should support both connecting and listening for an event (or events) in the same hx-sse
declaration, by
allowing comma separated values:
<div hx-sse="connect /event_stream, swap on message">
...
</div>
These two changes would be relatively modest, but I think would address the major shortcomings of the current SSE behavior without requiring a large code refactor. With these changes SSE is on equal, or perhaps greater footing than WebSockets as a way to achieve dynamic web UI within the declarative model.
Another nice aspect of this proposal is that the features are additive, which means that SSE improvments, which I very much wnat to see implemented, would not be a blocker to an htmx 1.0 release.
- MDN SSE Article - https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events
- SSE Spec - https://html.spec.whatwg.org/multipage/server-sent-events.html
- Initial SSE improvement PR - bigskysoftware/htmx#155
- Second SSE improvement PR - bigskysoftware/htmx#185
Thanks for the guidance, @1cg. I’ll use your suggestion and reimplement this using your suggested functions as a base. It should come together quickly.
For the comma delimiters, URL encoding the commas can work, but depending on the server implementation, it’s not always practical. If I, as the developer, don’t necessarily control the URLs that are being passed in to my application, then fixing them after the fact could be very difficult. What do you think of the “space delimited” suggestion?