Discussion for WebSockets extension syntax

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>

[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.

[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>