Search code examples
websockethtmx

HTML elements in response using htmx's websockets extension are getting hyphens added, tags commented out

I am using the htmx websockets extension.

I have a list of players on my page.

I want to send a message from my backend over the WebSocket to add a player to the list.

I send the message <li id="player-list" hx-swap-oob="beforeend" type="1">player 2</ li>.

What gets added to the HTML is:

"player 2"
<!-- li-->

It's as if the HTML li element is getting sanitized, with <li>...</li> changed to "..."<!-- li-->.

My HTML page is:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/htmx.org@1.9.8"></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>

For testing purposes, I am sending the message over the WebSocket with:

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

The text player 2 gets added in the right place, but not within HTML tags:

enter image description here

It seems the message is received as intended, based on the Messages I can see in dev tools:

enter image description here

I would like for my <ol> element to look like:

    <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>

instead of

    <ol id="player-list" hx-ext="ws" ws-connect="/ws-roster/?roomcode=RSTWAG">
      <li type="1">fur</li>
      "player 2"
      <!-- li-->
    </ol>

after I send an li element over the WebSocket.

I've tried in Chrome and Firefox with the same result.

The repo is at https://github.com/douglasnaphas/hatgame, though I believe the relevant code is included above.

Solution

  • User rtrjl on the htmx Discord explained that the correct way to do what I'm trying to do is to have the top-level element in my WebSocket message be an ol element, not an li element.

    The following worked, as suggested on my cross-posted question on Discord:

    aws --profile hat-game-prod apigatewaymanagementapi post-to-connection \
  --data $(echo -n '<ol id="player-list" hx-swap-oob="beforeend"> <li> type="1">player 2 </li> </ol>' | base64) \
  --connection-id ${CONNECTION_ID} \
  --endpoint-url https://qu3vq8riw2.execute-api.us-east-1.amazonaws.com/ws-roster