HTMX - WebSockets
WebSockets 被定义为服务器和客户端之间的双向通信，这意味着双方同时进行通信和交换数据。该协议从头开始定义了全双工通信。Web 套接字在将丰富的桌面功能引入 Web 浏览器方面迈出了一步。它代表了客户端/服务器 Web 技术中期待已久的一次演变。
要了解有关 WebSockets 的更多详细信息，请阅读我们的 WebSockets 教程。
带有 HTMX 的 WebSockets
以下是一些要点的简要概述。
- HTMX 允许您使用 hx-ws 和 hx-trigger 等属性直接在 HTML 中建立连接并处理事件，从而简化了 WebSocket 的使用。
- HTMX 提供了几个 WebSocket 特定的事件，如 ws:open、ws:close 和 ws:error，您可以使用它们来管理连接生命周期。
- 带有 HTMX 的 WebSockets 非常适合构建实时功能，例如聊天应用程序、实时仪表板和协作工具。
- 可以使用触发发送操作的元素上的 hx-ws="send" 向服务器发送消息。
- 接收消息通过使用 hx-trigger="ws:message" 设置元素来处理，这些元素将在收到消息时更新。
- 在实现基于 WebSocket 的功能时，安全性和性能考虑至关重要。
建立 WebSocket 连接
要建立 WebSocket 连接，通常在容器元素上使用 hx-ws="connect:{url}"。
步骤 1:我们需要在 <head> 部分中包含 HTMX 库。
<script src="https://cdnjs.cloudflare.com/ajax/libs/htmx/1.9.6/htmx.min.js"></script>
步骤 2: 我们的聊天应用程序的主容器具有 WebSocket 连接属性。
<div id="chat-container" hx-ws="connect:wss://echo.websocket.org">
步骤 3: 与 echo.websocket.org 服务建立 WebSocket 连接，该服务只会回显它收到的任何消息。在容器内部，我们有一个聊天框来显示消息，还有一个表单来发送消息。
<div id="chat-box"></div> <form hx-ws="send" hx-target="#chat-box" hx-swap="beforeend"> <input type="text" name="message" placeholder="Type a message..."> <button type="submit">Send</button> </form>
步骤 4: 表单具有 hx-ws="send"，用于在提交时通过 WebSocket 发送消息。hx-target 和 hx-swap 属性确保响应(回显消息)附加到聊天框。
我们使用一些 JavaScript 来处理 WebSocket 事件。
- htmx:wsOpen: 在建立 WebSocket 连接时触发。
- htmx:wsClose: 在关闭 WebSocket 连接时触发。
- htmx:wsAfterMessage: 在收到并处理消息后触发。我们使用它在每条消息后将聊天框滚动到底部。
