HTMX 和 Go 中的服务器端事件出现问题

Question

我在收到 SSE 后无法让 HTMX 更换 div。 在 Chrome 中，我可以清楚地看到实际收到了该事件。但HTMX似乎并没有对此做出回应。 我错过了什么？

左侧的选项卡应该已更新以显示新加入的玩家

我尝试启用 HTMX 日志，但仅在收到 SST 后收到以下日志：

[email protected]: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}

设置了必要的标头，并且收到的消息对我来说看起来符合预期：

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

连接保持打开状态，没有出现问题，并且在服务器端我可以看到事件按预期发送。

我还尝试将 hx-ext="sse" 标签进一步放在组件树上，但无济于事。

有关更多信息，我已经在 HTMX reddit 上创建了一个线程： https://www.reddit.com/r/htmx/comments/1hfi4gx/trouble_with_server_side_events_and_go/

有关代码的更多上下文，请参阅 GH 存储库（如果有人想进一步深入了解）： https://github.com/F-bh/GHQ

我错过了什么？

需要更新的组件：

  <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>
      }
      for x, player := range players {
        <p>player { fmt.Sprintf("%v",x) }: { player } </p>
      }
      <h2>
        session code: { sessionId }
      </h2>
    </span>
  </div>  <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>
      }
      for x, player := range players {
        <p>player { fmt.Sprintf("%v",x) }: { player } </p>
      }
      <h2>
        session code: { sessionId }
      </h2>
    </span>
  </div>

Answer 1

修复方法是更改一行代码。

来自：

fmt.Fprintf(w, "event: \"%v\"\ndata: \"%v\"\n\n", e.name, e.data)

至：

fmt.Fprintf(w, "event: %s\ndata: %s\n\n", e.name, e.data)