Discussion for WebSockets extension syntax

[benpate]

We're moving WebSockets support into an extension (so it was decreed by @1cg). This thread is to collect suggestions/feedback on the syntax that we use in the new code. I'm going to start on this after I work out SSEs (#618), so please let me know if I'm missing anything, or if there's something we should add. Now is the time :)

I would like to keep it as close to the existing syntax as possible, but there are some funny things with the existing code, so now might be our chance to normalize it a little.

Questions:

1. Do we want to keep the swap-oob syntax for received messages? Or is there another way to target DIVs that might be better? This would be cool, but I don't think the WebSocket protocol gives us anything standard to work with. Would love to get input from someone using the current hx-ws tag.

2. Is there a better / more convenient way to send messages? I'm going to propose multiple encoding options for this data, including JSON (the current encoding), URL encoded, and multipart FormData.

Here's my first pass:

<div hx-ext="websocket" ws-connect="/my-websocket-address">
    <form ws-send="json | url | form ">
        <input name="message"/>
    </form>
</div>

[FinnG]

Would love to get input from someone using the current hx-ws tag

I have been using this tag for quite a while. In my use case, all updates from the server are unavoidably asynchronous so web sockets seemed like the natural choice.

In general I would say that the swap oob syntax for targetting DIVs is adequate, but where things fall down a bit is when you want to use things like response headers. I don't believe there is currently a way to do this with web sockets in HTMX short of sending down a snippet of HTML that makes a regular HTTP request just to get some headers. Something like <div id="header-updater" hx-get="/response-headers" hx-trigger="load"></div> which is a bit dirty.

I looked at writing an extension to optionally support minimal JSON messages instead of raw HTML, but never got very far due to lack of time and knowledge about what I'm doing in javascript (one of the reasons I'm using HTMX in the first place!). It also doesn't feel very HTMX-y to send JSON messages back from the server instead of HTML, but perhaps if web socket support is moving into an extension it's more acceptable?

[1cg]

Definitely more acceptable. I don't mind the web socket support getting more expansive as an extension at all.

There is a long-standing pull request by @frankier for file support in web sockets that would be nice to fold in to this:

#435

[benpate]

Perhaps we could allow WebSockets to parse/execute arbitrary JavaScript or hyperscript? It would work pretty cleanly as

<script type="text/hyperscript">
go to "http://location"
</script>

[FinnG]

This seems like a good solution to me, I like the flexibility. I have to admit that I've not tried this with the current web socket support in HTMX, but I'm assuming from your post that it doesn't work.

[benpate]

I'm not sure if it does or not. I'm guessing NOT, but I don't use WebSockets enough to be certain.

[benpate]

I'm posting progress on this extension to https://github.com/benpate/htmx/tree/pr-websocket-extension. It's not at all ready to use, but it's starting to take shape, in case anyone wants to follow along or add comments/suggestions.