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: 在接收和處理訊息後觸發。我們用它在每條訊息後滾動聊天框到底部。