属性 - htmx.createWebSocket

htmx.createWebSocket() 是 HTMX 提供的用于创建 WebSocket 连接的 API，它通常用于手动控制 WebSocket 行为，比如监听服务端推送的消息、与现有系统集成、或在非 declarative 的环境中灵活使用 HTMX 的 SSE/WebSocket 功能。

不过需要特别注意的是：

HTMX 核心中并没有 htmx.createWebSocket() 这个方法，它其实是来自 HTMX 的 WebSocket 扩展插件： htmx.org/extensions/web-sockets/

值

• func(url) - 一个函数，接受一个 URL 字符串并返回一个新的WebSocket

前提条件

你必须引入 HTMX WebSocket 扩展，否则会报错：

<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<script src="https://unpkg.com/htmx.org/dist/ext/ws.js"></script>

基本语法

const socket = htmx.createWebSocket({
  url: "wss://example.com/ws",
  onMessage: (event) => {
    // 处理接收到的消息
  },
  onOpen: () => {
    // WebSocket 已连接
  },
  onClose: () => {
    // 连接关闭
  },
  headers: {
    Authorization: "Bearer token123"
  }
});

示例：创建 WebSocket 并插入消息到 DOM

<div id="chat-box"></div>

<script>
  htmx.createWebSocket({
    url: "wss://yourserver.com/chat",
    onMessage: function (event) {
      const message = event.data;
      const chatBox = document.getElementById("chat-box");
      const div = document.createElement("div");
      div.innerText = message;
      chatBox.appendChild(div);
    },
    onOpen: () => console.log("连接已建立"),
    onClose: () => console.log("连接已关闭")
  });
</script>