websocket error on maybeCloseWebsocketSource

[mattzech]

Hi, I have the following htmx snippet which listens over a websocket for updates:

<tbody id="node-table" hx-ext="ws" ws-connect="ws://localhost:8080/ws" hx-swap="outerHTML">

For the most part, this works really well. However, occasionally there is a delay in updates and when I monitor the network console in my browser, I am seeing the following error many times:

Uncaught TypeError: Cannot read properties of undefined (reading 'close')
    at maybeCloseWebSocketSource (ws.js:420:38)
    at socket.onclose (ws.js:260:11)

I am relatively new to htmx, is there something I am missing? I am using Go with gorilla/websockets to manage this.

Thank you!

[MichaelWest22]

What is the version/link of the ws.js extension you are on and the version of htmx you are using. This info may help someone look into the issue and identify if you are not running a v1 extension with a v2 htmx or visa versa as the major versions have to match.

[mattzech]

Hi Michael,

Currently using 1.9.12

<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/ws.js"></script>

Thanks!

[MichaelWest22]

I'm not an htmx web socket expert myself. But looking at the error it is happening when the web socket attached element (which in your case is the tbody) is removed from the dom because it has been replaced. When this happens it has to close the web socket and it is somehow getting into a situation where the websocket does not exist on the body's htmx internal data object. Ideally the extension should check this is valid before closing so you would not see this error. It is possible that when things go wrong it has not finished creating the web socket before the body gets replaced again by something causing the issue.

I don't think it is ideal to do tbody outerHTML swaps like you have setup because ever single web socket response will be deleting the tbody of your document and replacing it with a new one and also deleting and recreating the web socket possibly which could cause many errors and confusion. Maybe try moving to innerHTML swap style and see if you can keep the web socket connection to only connect once.

[denartha10]

Hi @mattzech DId you ever find a solution for this? I have a similar issue where I am swapping out a div that contains websocket connection for different chats. So would love to know if you found a solution becuase I see the error in my console every time I swap connections. Even though it closes correctly on the backend it feels a little janky haha

[MichaelWest22]

looks like this has recently been found and fixed in the latest v2 version of the web socket extension see: bigskysoftware/htmx-extensions#109

try upgrading to https://unpkg.com/htmx-ext-ws@2.0.2/ws.js and a v2 version of htmx to see if this resolves your issue.

[mattzech]

@denartha10 Was able to fix this issue by both upgrading to v2 and changing the format of the swap message sent over the websocket. As @MichaelWest22 mentioned, I was actually including the ws-connect="ws://localhost:8080/ws" in the swap. So basically every time it swapped, the DOM was reloaded with the "new" ws-connect value. I changed this so that there was one div containing the ws-connect and then within that div, multiple divs containing the html that I want to be swapped out. Here is an example:

<div hx-ext="ws" ws-connect="/ws">
    <div class="row monitor-row">
        <div class="col-xl-5">
            <div id="example-table">
                {{template "ex-table"}}
            </div>

And then in the swap message, my div starts like this:

<div hx-swap-oob="innerHTML:#example-table">

HTMX then locates the swap based on the div id. This seems to be working much better. Hope that helps!

Thanks @MichaelWest22 for your help

[eremitaio79]

You may need to update your HTML and extensions.