should i use HTMX's hx-target everywhere for my navbar ?

That establishes the connection.

The ws-send attribute sends data through the socket. See websockets extension - </> htmx - high power tools for html to get started.

You’ll also want to become familiar with the hx-vals and hx-swap attributes along with being aware that all data coming from the server is treated as an OOB request. (Since there’s no direct relationship between a websocket frame being sent to the server and the html being returned, the browser and HTMX have no direct mechanism to associate a frame with a previous request. Therefore, all responses coming back need to identify the ID of the element being updated - or else you need to perform that logic yourself, perhaps as a custom extension.)

If you want to see an example, I did a PoC project that replaces the JavaScript in the standard Channels chat tutorial with an HTMX implementation. The code is at GitHub - KenWhitesell/htmx_channels.

1 Like