HTMX Websockets不会替换DOM中的内容

uoifb46i 于 12个月前发布在其他

关注(0)|答案(1)|浏览(108)

我正试图让一个HTMX WebSocket工作。它是一个聊天系统，应该通过WebSocket取代聊天内容。
这是聊天的代码片段：

<div class="min-h-96">
    <div hx-ext="ws" ws-connect="/socket/register-chat/{{.ChatId}}">
    </div>
    <div id="chat-messages"></div>
</div>

<div class="flex">
    <form class="flex w-full" hx-post="/actions/message" hx-target="#chat-messages" id="chat-form">
        <input type="text" name="chatId" value="{{.ChatId}}" hidden>
        <input type="text" placeholder="Ihre Nachricht..." name="message"
            class="w-4/5 p-2 border rounded-l-md border-blue-300 focus:outline-none" autofocus>
        <button type="submit"
            class="w-1/5 bg-blue-600 text-white py-2 rounded-r-md hover:bg-blue-800 focus:outline-none">Absenden</button>
    </form>
</div>

字符串
连接已建立x1c 0d1x
内容接收

但由于某种原因，我不能掌握它不会取代它在DOM中。既不直接到包含WebSocket数据的div中，也不到id为“chat-messages”的div中，当有一个hx-target命令时。
任何帮助是赞赏：）

websocket

来源：https://stackoverflow.com/questions/77422127/htmx-websockets-are-not-replacing-content-in-dom

1条答案

按热度按时间

8wtpewkr1#

所以，我找到了解决方案感谢this post（使用Haskell.）
从服务器返回的内容需要GUID。
所以目前的工作设置如下。
此代码片段创建WebSocket连接

<div class="min-h-96">
    <div hx-ext="ws" ws-connect="/socket/register-chat/{{.ChatId}}" hx-target="chat-messages">
    </div>
    <div id="chat-messages"></div>
</div>

字符串
消息需要 Package 在一个div中，该div的id与目标相同。

<div id="chat-messages">
    {{range .Messages}}
    <div class="flex mb-4 {{if .IsKunde}} justify-end {{end}}" id="{{.MessageId}}">
        <div class="message-container max-h-screen overflow-y-auto max-w-[50%]">
            <div class="text-gray-600">
                <p>{{.SentFrom}}</p>
                <p class="text-xs text-blue-500">{{.SentAt}}</p>
            </div>
            <div class="rounded-lg {{if .IsKunde}} bg-blue-600 {{else}} bg-lime-700 {{end}} text-white py-2 px-4">
                {{.Message}}
            </div>
        </div>
    </div>
    {{end}}
</div>

型
多么直观和有据可查 smh

赞(0）回复(0）举报 12个月前

我来回答

HTMX Websockets不会替换DOM中的内容

1条答案

相关问题

热门标签

最新问答