HTMX结合Go使用Server Side Events时DOM替换失败问题排查

问题情况 #

使用HTMX接收Server Side Events（SSE）后，无法实现div内容替换。Chrome中可明确看到事件已接收，但HTMX无响应。已开启HTMX日志，仅收到sseOpen日志；必要请求头已设置，接收的消息格式符合预期；连接保持正常，服务端事件发送正常。尝试将hx-ext="sse"移至组件树上层也无效。

相关日志 #

htmx.org@2.0.3:1 htmx:sseOpen <div hx-ext=​"sse" sse-connect=​"/​events/​2275600710884066084" sse-swap=​"PlayerJoined" class>​<span>​<button onclick=​"copyToClipBoard()​" class=​"text-xl font-bold">​copy session link​</button>​<p>​waiting for second player​</p>​<p>​player 0: a​</p>​<h2>​session code: 2275600710884066084​</h2>​</span>​</div>​ {source: EventSource, elt: div}

接收的SSE消息 #

event: "PlayerJoined"
data: "<p> Hello World! </p>"

待更新组件代码 #

<div hx-ext="sse" sse-connect={ fmt.Sprintf("/events/%v", sessionId) } sse-swap="PlayerJoined">
  <span>
    {{ if len(players) < 2 }}
      <button onClick="copyToClipBoard()" class="text-xl font-bold">copy session link</button>
      <p>waiting for second player</p>
    {{ end }}
    {{ range x, player := players }}
      <p>player {{ fmt.Sprintf("%v",x) }}: {{ player }} </p>
    {{ end }}
    <h2>
      session code: {{ sessionId }}
    </h2>
  </span>
</div>

（注：原代码存在重复div结构，已修正为单个div）

问题诊断与解决 #

问题出在SSE消息格式的冗余双引号：

• HTMX的SSE扩展会严格匹配sse-swap指定的事件名，但你发送的消息中event字段值带了双引号（"PlayerJoined"），而HTMX期望的是不带引号的纯事件名（PlayerJoined），导致事件无法匹配触发内容替换。
• 同时data字段的HTML内容被额外包裹双引号，会导致HTMX将其解析为纯文本而非可渲染的HTML。

解决方法：修改服务端发送的SSE消息，去掉event和data字段值的双引号，正确格式如下：

event: PlayerJoined
data: <p> Hello World! </p>

内容的提问来源于stack exchange，提问作者ArrowOD