我用的是htmx websockets extension。
我的页面上有一个球员名单。
我想通过WebSocket从我的后端发送一条消息，将一个玩家添加到列表中。
我发送消息<li id="player-list" hx-swap-oob="beforeend" type="1">player 2</ li>。
添加到HTML的内容是：
"player 2"<!-- li-->
字符串
这就好像HTML li元素被清理了，<li>...</li>被改为"..."<!-- li-->。
我的HTML页面：
<!DOCTYPE html><html><head><script src="https://unpkg.com/[email protected]"></script><script src="https://unpkg.com/htmx.org/dist/ext/ws.js"></script><title>Hat Game: Your Room Code</title><link rel="stylesheet" href="/stylesheets/style.css" /></head><body><body><h1>Your room code</h1><p>Give this code to everyone in your group:<span id="room-code">RSTWAG</span>.</p><p>As everyone enters the room code, you will see their names populate below.When your entire group is there, tap <b><em>Everybody's in</em></b>.</p><div id="players-in-the-room"><h2>Players in the room</h2><ol id="player-list" hx-ext="ws" ws-connect="/ws-roster/?roomcode=RSTWAG"><li type="1">fur</li></ol></div><div id="ws-messages"></div></body></body></html>
型
出于测试目的，我通过WebSocket发送消息：
aws --profile hat-game-prod apigatewaymanagementapi post-to-connection \--data $(echo -n '<li id="player-list" hx-swap-oob="beforeend" type="1">player 2</ li>' | base64) \--connection-id ${CONNECTION_ID} \--endpoint-url https://qu3vq8riw2.execute-api.us-east-1.amazonaws.com/ws-roster
型
文本player 2被添加到正确的位置，但不是在HTML标签中：
的数据
根据我在开发工具中看到的消息，似乎消息是按预期接收的：
的
我希望我的<ol>元素看起来像这样：
<ol id="player-list" hx-ext="ws" ws-connect="/ws-roster/?roomcode=RSTWAG"><li type="1">fur</li><li type="1">player 2</li></ol>
型
而不是
<ol id="player-list" hx-ext="ws" ws-connect="/ws-roster/?roomcode=RSTWAG"><li type="1">fur</li>"player 2"<!-- li--></ol>
型
在我通过WebSocket发送li元素之后。
我在Chrome和Firefox上都试过，结果都一样。
repo是在https://github.com/douglasnaphas/hatgame，虽然我相信相关的代码包括在上面。
1条答案
按热度按时间csbfibhn1#
htmx Discord上的用户rtrjl解释说，正确的方法是让我的WebSocket消息中的顶级元素是
ol元素，而不是li元素。下面的工作，正如我在Discord上的cross-posted question上所建议的那样：
字符串