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
awesome @benpate
Can you close out the other PRs and create a new one for this?
On the commas, the problem shouldn't be on the server side, right? If you use URI encoding it would be on the client only, the server should still see commas. It looks like commas are "reserved" and should probably be avoided:
https://stackoverflow.com/questions/198606/can-i-use-commas-in-a-url
You can leave the comments in and I'll try to extract the swap code out and get it in place for this change once I have it.