La semana pasada, escribí sobre cómo modificar htmx para mostrar mensajes instantáneos. Una semana después de usar HTMX, necesitaba más. Quería una mejor manera de transmitir HTML desde el servidor, usando componentes JSX en lugar de cadenas HTML simples para una mejor usabilidad del código.

? Recordatorio rápido: si esto te resulta útil, ¡dale el visto bueno! Tu apoyo me ayuda a crear más contenido.

Herramientas que utilicé:

• HTMX
• Extensión HTML Websockets
• Hono para el backend
• Websockets - lado del cliente

La idea es simple. Mi componente Conversación está incluido en un div con hx-ext="ws", que se conecta a mi backend cuando se procesa.

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

      

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

            
            
          
        ))}
      
      
  
);

Lo siguiente importante es el InputMessageForm. Simplemente agregue ws-send al formulario y enviará un mensaje donde la clave es el ID del área de texto (messageInput) con su valor.

export const InputMessageForm = () => (
  

Websockets - Servidor

Aquí está el bloque de código completo para el servidor Hono. Algunos registros de la consola para abrir y cerrar la conexión. onMessage es donde ocurre la magia.

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());
        },
      };
    }),
);

Entonces el flujo es:

1. Recibir la consulta
2. Enviar vacío solo para dejarlo limpio. No se especifica hx-swap-oob, por lo que es True de forma predeterminada. Eso significa que encontrará el elemento con id=query-submit-form y lo intercambiará.
3. Devolver el componente con el mensaje del usuario. Aquí hx-swap-oob se especifica antes del final, lo que simplemente significa que se agregará a los mensajes existentes.
4. habla → aquí viene tu lógica. Estoy hablando con el asistente de IA para realizar algunas llamadas API externas.
5. Enviar el componente con la respuesta del asistente. Lo mismo que el paso 3 pero el componente es diferente.

Problemas que encontré

Enviar la respuesta fue un poco problemático ya que los documentos son hmm... creo que no es tan fácil de entender. Incluso se ha creado un problema para solucionar este problema: mejorar la documentación para la extensión websocket. ¡Eso me ayudó mucho!

Entonces lo más importante es:

¡Debes devolver una cadena, que se analiza en html que tiene la misma identificación que el elemento que deseas intercambiar!

Entonces el problema n°. 1

Accidentalmente envié algo como esto:

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

Esto está mal. ¡Tenga en cuenta los caracteres de identificación y escape! No encadene la cadena aquí.

El problema n°. 2

Podrías pensar que puedes devolver algo y que se cambiará donde quieras. No exactamente. El primer div es solo información para HTMX sobre qué hacer. ¿Al menos yo lo entiendo así?.

Estoy devolviendo html como este:

Solo  se agrega dentro del 

Resultado final

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

? ¿Te ayuda esta publicación? ¡Por favor envía spam al botón Me gusta! Tu apoyo es increíble. ¡Gracias!

¿Quieres saber más?

¡Estén atentos para obtener más información y tutoriales! ¿Visitar mi blog?