HTMX - WebSocket

WebSocket 定义为服务器和客户端之间的双向通信，这意味着双方可以同时通信和交换数据。该协议从根本上定义了全双工通信。WebSocket 在将桌面丰富的功能引入 Web 浏览器方面迈进了一步。它代表了客户端/服务器 Web 技术长期以来期待的进步。

要详细了解 WebSocket，请阅读我们的WebSocket 教程。

HTMX 与 WebSocket

以下是几个关键点的简要概述。

• HTMX 通过允许您使用 `hx-ws` 和 `hx-trigger` 等属性直接在 HTML 中建立连接和处理事件来简化 WebSocket 的使用。
• HTMX 提供了一些 WebSocket 特定的事件，例如 `ws:open`、`ws:close` 和 `ws:error`，您可以使用这些事件来管理连接生命周期。
• HTMX 与 WebSocket 非常适合构建实时功能，例如聊天应用程序、实时仪表盘和协作工具。
• 可以使用触发发送操作的元素上的 `hx-ws="send"` 将消息发送到服务器。
• 接收消息是通过设置具有 `hx-trigger="ws:message"` 的元素来处理的，这些元素在接收到消息时将更新。
• 实现基于 WebSocket 的功能时，安全性和性能考虑至关重要。

建立 WebSocket 连接

要建立 WebSocket 连接，通常在容器元素上使用 `hx-ws="connect:{url}"`。

步骤 1：我们需要在``部分包含 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: 在接收和处理消息后触发。我们用它在每条消息后滚动聊天框到底部。