How to close a websocket connection?

[godsarmy]

I followed example in https://htmx.org/extensions/web-sockets/ to implement websocket.

As a result, i have a sample code to update timestamp from websocket continously in #content-inner smoothly.
Now i want to add a button in html page to control start/close the websocket connection? i looked at the document and did not find it. Is it supported in htmx?

Thanks in advance.

  <div hx-ext="client-side-templates">
    <div id="content-innner"></div>
    <div hx-ext="ws" ws-connect="/ws" nunjucks-template="ws-template"></div>
    <script id="ws-template" type="x-tmpl-nunjucks">
        <div hx-swap-oob="innerHTML:#content-innner" class="btn"><p></p>{{time}}</div>
    </script>
  </div>

[CaliViking]

Two thoughts:

1. What happens if you replace or remove the div with the ws connection? I have not tried, but my guess would be that it would force a close event.
2. Have you thought about sending a message to the server and close the connection from the server side?

I know that neither of these are very thought through, so please excuse me if it does not work.

[godsarmy]

I think approach 1 works for me. Let me do a test a update this thread. Thank you

[godsarmy]

Unfortnately, i removed ws connection successfully in dom as following code but it does not help.
I think the only way in current extension is to ask server to close the connection

 <button class="btn btn-primary"
         hx-on:click="let target = document.querySelector('[hx-ext=ws]');
                      target.removeAttribute('ws-connect');
                      target.removeAttribute('hx-ext');">
 Stop
</button>