HTMX websocket extension not sending form data in message to ser

ghz 7months ago ⋅ 69 views

HTMX websocket extension not sending form data in message to server

I have this form

<script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
<script src="https://unpkg.com/htmx.org/dist/ext/ws.js"></script>
<script> htmx.logAll() </script>
<div id="messages" class="h-96 w-48 bg-gray-200 mx-auto "></div>
<div ws-connect="/ws-chat" hx-ext="ws">
    <form id="form" hx-boost="true" ws-send="true" >
        <input ws-send class="mx-auto" id="msg-input" type="text" placeholder="Write a message..."/>
        <button type="submit">Send</button>
    </form>
</div>

When I type something into the input and press Send, or press Enter in the text box, I get the full four messages: wsBeforeSend, wsAfterSend, wsBeforeMessage, wsAfterMessage.

Inside of wsBeforeSend and wsAfterSend, the "message" object is like so: message: '{"HEADERS":{"HX-Request":"true","HX-Trigger":null,"HX-Trigger-Name":null,"HX-Target":null,"HX-Current-URL":"http://localhost:3000/chat"}}'

So it's not adding any of the form data! I just need some help here, I get the same thing back on the return because I have the server echoing what's coming back to me. I see this HTMX GitHub issue about this but I tried both of the solutions they provided as a stop-gap, and it doesn't work, and the issue was closed with a bugfix pr.

Any help is appreciated.

Answers

It seems like you're experiencing an issue with HTMX not sending form data when submitting the form via WebSocket (ws-send). This could be due to a few reasons, such as misconfiguration or a bug in the library.

Here are some troubleshooting steps you can try to resolve the issue:

  1. Check WebSocket Connection: Ensure that your WebSocket connection is properly configured and established. If the WebSocket connection is not working correctly, HTMX may not be able to send data over it.

  2. Verify Form Attributes: Make sure that the form element has the required attributes for HTMX to send data over WebSocket. These include hx-boost="true" and ws-send="true".

  3. Inspect Network Requests: Use browser developer tools to inspect network requests and check if the form data is being sent over WebSocket. This can help you identify if the issue is with HTMX or the server-side implementation.

  4. Update HTMX: Ensure that you are using the latest version of HTMX, as newer versions may include bug fixes and improvements related to WebSocket functionality.

  5. Check Server Implementation: Review your server-side WebSocket implementation to ensure that it correctly handles incoming messages and responds accordingly. Make sure that the server is configured to receive and process form data sent over WebSocket.

  6. Verify HTMX Configuration: Double-check your HTMX configuration to ensure that all required settings are properly configured. Refer to the HTMX documentation and examples to confirm that you have set up WebSocket integration correctly.

  7. Test with Simplified Example: Create a simplified test case with a basic form and WebSocket integration to isolate the issue. This can help you identify any specific factors or components causing the problem.

If you've tried these troubleshooting steps and are still experiencing issues, you may need to provide more details about your setup and code implementation for further assistance. Additionally, consider reaching out to the HTMX community or opening a new issue on GitHub for support.

#forms