上週，我寫了一篇關於調整 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&mot]

？這篇文章對您有幫助嗎？請發送垃圾郵件「讚」按鈕！您的支持非常棒。謝謝！