事件 - htmx:sseError

htmx:sseError 是 HTMX 中用于处理 服务器发送事件（SSE）出错 的一个事件。它在使用 HTMX 的 sse 扩展接收事件流时，如果连接发生错误（如网络中断、服务器断开连接等），会触发该事件。

你可以用它来：

• 显示“连接断开”提示

• 自动重连或触发备用逻辑

• 上报错误日志

事件参数

• detail.elt - 具有不良 SSE 源的元素
• detail.error - 错误消息
• detail.source - SSE 源

HTMX 支持通过扩展 _hyperscript + htmx-ext-sse.js 来处理 服务端推送事件。HTML 中的使用方式是：

<div sse-connect="/events" sse-swap="message">
  <!-- 监听名为 "message" 的事件 -->
</div>

示例代码

<h2>消息流</h2>
<div 
  sse-connect="/events" 
  sse-swap="message" 
  id="eventBox"
  style="border:1px solid #ccc; padding:10px;">
  正在连接消息云服务器...
</div>

<script>
  document.body.addEventListener("htmx:sseError", function(evt) {
    console.error("SSE 连接发生错误");
    document.getElementById("eventBox").innerHTML = `
      <p style="color:red;">连接错误，请检查网络或稍后再试。</p>
    `;
  });
</script>

以上代码在页面加载后，HTMX 使用 /events 创建一个 EventSource 连接。服务端不断通过 SSE 向客户端推送 event: message。如果连接断开、服务器不可达，或者响应格式错误则触发 htmx:sseError。