我用的是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上所建议的那样：
字符串