HTMX WebSocket扩展发送消息时未携带表单数据求助

问题分析 #

当前HTMX WebSocket表单提交时仅发送HEADERS信息，未携带表单输入数据，核心原因是两处配置冲突：

• 表单上的hx-boost="true"会触发AJAX提交逻辑，与WebSocket发送机制冲突，导致表单数据未被正确收集
• 输入框和表单同时设置ws-send，触发逻辑混乱，干扰数据提取流程

修复方案 #

修改代码，移除冲突配置并调整ws-send的作用位置：

<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" ws-send="true">
        <input class="mx-auto" id="msg-input" type="text" placeholder="Write a message..."/>
        <button type="submit">Send</button>
    </form>
</div>

关键调整说明 #

1. 移除hx-boost="true"：取消AJAX提交劫持，让WebSocket扩展正常处理表单数据收集逻辑
2. 仅在表单设置ws-send：删除输入框上的ws-send属性，确保表单提交时统一收集所有字段数据

验证方式 #

修改后发送消息，查看wsBeforeSend日志，message对象会新增FORM_DATA字段，包含输入框的内容，服务器也能正确接收完整数据。

内容的提问来源于stack exchange，提问作者Nate