На прошлой неделе я писал о настройке htmx для отображения мгновенных сообщений. Через неделю использования HTMX мне нужно было больше. Мне нужен был лучший способ потоковой передачи HTML с сервера, используя компоненты JSX вместо простых строк HTML для повышения удобства использования кода.

? Напоминаем: если вы нашли это полезным, пожалуйста, поставьте палец вверх! Ваша поддержка помогает мне создавать больше контента.

Инструменты, которые я использовал:

• HTMX
• Расширение веб-сокетов HTML
• Hono для серверной части
• Веб-сокеты — клиентская сторона

Идея проста. Мой компонент разговора заключен в div с hx-ext="ws", который при рендеринге подключается к моему серверу.

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

      

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

            
        ))}
      
      
);

Следующая важная вещь — это форма InputMessageForm. Просто добавьте ws-send в форму, и она отправит сообщение, где ключом является идентификатор текстовой области (messageInput) с ее значением.

export const InputMessageForm = () => (
  

Вебсокеты — Сервер

Вот полный блок кода сервера 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, что просто означает, что оно будет добавлено к существующим сообщениям.
4. разговор → вот вам и ваша логика. Я разговариваю с AI Assistant, поэтому делаю несколько внешних вызовов API.
5. Отправьте компонент обратно с ответом помощника. То же, что и шаг 3, но компонент другой.

Проблемы, которые я обнаружил

Отправить ответ обратно было немного проблематично, поскольку документы, хм… думаю, их не так-то легко понять. Существует даже проблема, созданная для исправления этой проблемы: улучшить документацию для расширения веб-сокета. Это мне очень помогло!

Итак, самое главное:

Вам нужно отправить обратно строку, которая анализируется в html и имеет тот же идентификатор, что и объект, который вы хотите поменять!

Итак, проблема №. 1

Я случайно отправил обратно что-то вроде этого:

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

Это неправильно. Обратите внимание на идентификатор и escape-символы! Не преобразуйте строку здесь.

Проблема №. 2

Вы можете подумать, что можете что-то вернуть, и оно будет заменено там, где вы хотите. Не совсем. Первый div  — это просто информация для HTMX о том, что делать. По крайней мере я так понимаю?.

Я возвращаю html вот так:

Только добавляется внутри существующего 

Конечный результат

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

? Этот пост поможет вам? Пожалуйста, спамьте кнопку лайк! Ваша поддержка потрясающая. Спасибо!

Хотите узнать больше?

Следите за новостями и обучающими материалами! Посетите мой блог ?