属性 - htmx.createEventSource

htmx.createEventSource() 是 HTMX 提供的一个低层 API，用于手动创建一个 Server-Sent Events（SSE） 连接，并将其集成到 HTMX 的事件系统中。这在你需要用 JavaScript 主动控制 SSE 源（如动态创建或销毁）时非常有用。

语法

// 返回一个新的EventSource
htmx.createEventSource(path)

示例：手动创建一个 SSE 源

<div id="msg-list" hx-swap="beforeend" hx-target="#msg-list"></div>

<script>
  const source = htmx.createEventSource("/events");

  // HTMX 自动接管 /events 发出的 event 消息，如:
  // event: message\n
  // data: <div>新消息</div>
</script>

在服务器端返回格式必须为 SSE 标准格式，例如：

event: message
data: <div>你好，HTMX！</div>

event: update
data: <div>又来一条消息</div>

HTMX 会根据 event: 的类型来匹配页面上 hx-sse="message" 或其他监听。

如果你手动用 htmx.createEventSource() 创建 SSE，那么 HTMX 内部会将这个源注册进自己的事件系统，页面中带 hx-sse 的元素就能接收到：

<div
  id="msg-list"
  hx-sse="connect:/events, message:beforeend"
></div>

但当你用 createEventSource() 手动连接后，建议只用 <div id="msg-list"> 和 hx-target 来控制行为，监听和渲染由事件 data 处理。

需要关闭 createEventSource() 创建的 SSE 源时，只需要：

source.close(); // 手动断开 SSE 连接