先週、インスタント メッセージを表示するために htmx を調整することについて書きました。 HTMX を使い始めて 1 週間が経ち、さらに必要になりました。コードの使いやすさを向上させるために、プレーンな HTML 文字列の代わりに JSX コンポーネントを使用して、サーバーから HTML をストリーミングするより良い方法が必要でした。

?簡単な注意事項: これが役に立ったと思われる場合は、高評価をお願いします。あなたのサポートは、より多くのコンテンツを作成するのに役立ちます。

使用したツール:

• HTMX
• HTMX Websocket 拡張機能
• ほの (バックエンド用)
• Websocket - クライアント側

アイデアはシンプルです。私の会話コンポーネントは、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

?この投稿は役に立ちますか?いいねボタンをスパムしてください！あなたのサポートは素晴らしいです。ありがとう！

もっと知りたいですか?

さらなる洞察とチュートリアルにご期待ください!私のブログにアクセスしてください ?