websocket extension unable to connect

[Mr-Destructive]

Hello, I was experimenting with a chat application with websocket. The older hx-ws attribute is working fine with the connect and send values, however, the hx-ext and ws-connect attributes don't connect with the web socket.

<div hx-ws="connect:/chat/{{ slug }}/">
    <form hx-ws="send:submit">
        <input name="message">
        <input type="submit">
    </form>  
 </div>

The above code works and is able to connect to the websocket as indicated with the server logs and even the messages.

But by using the web socket extension, the connection is never made.

<div hx-ext="ws" ws-connect="/chat/{{ slug }}/">
    <form ws-send>
        <input name="message">
    </form>
</div>

I tried a lot of combinations with submit attributes, entire URLs, and even changing versions.

I am using Django v4.1, channels with daphne (4.0) and htmx version 1.8.5.
Is there something I am missing or is there a different approach than this documentation?
Thanks

[dtamez]

I'm having the same issue. I get a websocket connection with hx-ws="connect:ws://127.0.0.1:8000/chat" but no connection with hx-ext="ws" ws-connect="ws://127.0.0.1:8000/chat"

[Mr-Destructive]

Sure, I have a django-htmx-chat app using these exact steps.

Here is the template that uses the ws extension.
Let me know if you find any issues in the setup.

[Telroshan]

Thanks for the repo! I must admit I'm not familiar with python and have never used Django.
I managed to get the server running thanks to your README, but I have a dumb question: how would I include a local JS file?
I'm trying to include the ws.js extension script locally (with additional logs to spot where the issue is coming from).
Quickly checked the docs but it's a bit overwhelming given that I have never tried Django until now 😆

[Mr-Destructive]

Sure, I might have overlooked loading static files set up in the repo. I have added support for static files in the application. You can add the local js file to the static/js folder and link it up in any of the templates within the blocks using the following snippet:

<script src="{% static 'js/ws.js' %}"></script>

By blocks I meant the {% block base %} template inheritance code, anything inside the chat/* or accounts/* folders in templates is not a complete template it is just an inherited template from base.html. So, it's better to add the <script> tag inside the block tags i.e. within

{% block base %} 
..
..
{% endblock %}

Let me know if you face any other issues.

[Telroshan]

Thanks! It worked.
I'm... confused 😆

<div ws-connect="/chat/{{ slug }}/">
    <form ws-send>
        <input name="message">
    </form>
</div>

This works just fine in my case in your project.
Note I omitted hx-ext="ws" here since you already define it on your body, which would otherwise simply cause the messages to appear twice when writing in the chat but would still work.

I opened 2 tabs, I correctly get messages on both of them...

Could you please make sure that you are including the extension script as per the documentation when trying to use the extension?
I had to add the script here ofc but I don't know if that's because you had reverted to the legacy attribute, or if you had omitted it

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

[Mr-Destructive]

Cool that worked! I think the extension script was not specified previously. It might be my mistake.

Thank you 👍

[Telroshan]

Np, glad it worked out!

@dtamez let us know if you were in the same situation, or if you do have the extension script included and it still doesn't work