上周，我写了一篇关于调整 htmx 以显示即时消息的文章。使用 HTMX 一周后，我需要更多。我想要一种更好的方法从服务器流式传输 HTML，使用 JSX 组件而不是纯 HTML 字符串以获得更好的代码可用性。

？温馨提示：如果您觉得有用，请点赞！您的支持帮助我创作更多内容。

我使用的工具：

• HTMX
• HTMX Websockets 扩展
• Hono 后端
• Websockets - 客户端

这个想法很简单。我的对话组件包装在 hx-ext="ws" 的 div 中，在渲染时连接到我的后端。

export const Conversation = (props: { messages: Message[] }) => (
  

      

        {props.messages.reverse().map((message) => (
          

            
            
          
        ))}
      
      
  
);

下一个重要的事情是InputMessageForm。只需将 ws-send 添加到表单中，它就会发送一条消息，其中键是文本区域的 ID (messageInput) 及其值。

export const InputMessageForm = () => (
  

Websocket - 服务器

这是 Hono 服务器的完整代码块。一些用于打开和关闭连接的控制台日志。 onMessage 是神奇发生的地方。

get(
    '/chatroom-ws',
    upgradeWebSocket((c) => {
      return {
        onOpen: () => {
          console.log('WS Connection open');
        },
        onClose: () => {
          console.log('WS Connection closed');
        },
        onMessage: async (event, ws) => {
          const { userMessage } = JSON.parse(event.data.toString());
          console.log('Got user message', userMessage);
          const inputArea = await c.html(
            

              
            
,
          );
          ws.send(await inputArea.text());
          const htmlUser = await c.html(
            

              
            
,
          );
          ws.send(await htmlUser.text());
          const response = await talk(userMessage);
          const htmlAgent = await c.html(
            

              
            
,
          );
          ws.send(await htmlAgent.text());
        },
      };
    }),
);

所以流程是：

1. 接收查询
2. 空寄回去只是为了让它干净。没有指定 hx-swap-oob，因此默认为 True。这意味着它将找到 id=query-submit-form 的元素并交换它。
3. 将组件与用户消息一起发送回。这里 hx-swap-oob 被指定为 beforeend ，这仅仅意味着它将被添加到现有消息中。
4. 谈话→你的逻辑来了。我正在与 AI 助手交谈，以便进行一些外部 API 调用。
5. 发回带有助理应答的组件。与步骤3相同，但组件不同。

我发现的问题

发回回复有点问题，因为文档是嗯……我认为不太容易理解。甚至创建了一个问题来解决此问题：改进 websocket 扩展的文档。这对我帮助很大！

所以最重要的是：

您需要发回字符串，该字符串解析为与您要交换的内容具有相同 id 的 html！

所以问题。 1

我不小心发回了这样的东西：

JSON.stringify('
test 123
')
// '"
test 123
"'

这是错误的。请注意 ID 和转义字符！不要在这里对字符串进行字符串化。

问题编号。 2

您可能认为您可以退回某些东西，并且它会被交换到您想要的地方。不完全是。第一个 div 只是 HTMX 的操作信息。至少我是这样理解的？

我返回这样的html：

仅附加在客户端现有的

最终结果

https://assets.super.so/c0fc84d8-fb32-4194-8758-4be657666aab/videos/c814dcd2-b9e9-4bb2-b8db-2ed9cd7819b7/lucy-chat-example.mov

？这篇文章对您有帮助吗？请发送垃圾邮件“赞”按钮！您的支持非常棒。谢谢！

想了解更多吗？

请继续关注更多见解和教程！访问我的博客？