La semaine dernière, j'ai écrit sur la modification de HTML pour afficher les messages instantanés. Après une semaine d'utilisation de HTMX, j'en avais besoin de plus. Je voulais une meilleure façon de diffuser du HTML à partir du serveur, en utilisant des composants JSX au lieu de simples chaînes HTML pour une meilleure convivialité du code.

 ? Petit rappel : si vous trouvez cela utile, n'hésitez pas à mettre un pouce bleu ! Votre soutien m'aide à créer plus de contenu.

Outils que j'ai utilisés :

• HTMX
• Extension Websockets HTML
• Hono pour le backend
• Websockets - côté client

L'idée est simple. Mon composant Conversation est enveloppé dans un div avec hx-ext="ws", qui se connecte à mon backend lors du rendu.

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

      

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

            
        ))}
      
      
);

La prochaine chose importante est le InputMessageForm. Ajoutez simplement ws-send au formulaire et il enverra un message dont la clé est l'ID de la zone de texte (messageInput) avec sa valeur.

export const InputMessageForm = () => (
  

Websockets - Serveur

Voici le bloc de code complet du serveur Hono. Quelques journaux de console pour l'ouverture et la fermeture de la connexion. onMessage est l'endroit où la magie opère.

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

Le flux est donc :

1. Recevoir la requête
2. Renvoyer vide juste pour le rendre propre. Il n'y a pas de hx-swap-oob spécifié, donc c'est True par défaut. Cela signifie qu'il trouvera l'élément avec id=query-submit-form et l'échangera.
3. Renvoyer le composant avec le message utilisateur. Ici, hx-swap-oob est spécifié avant la fin, ce qui signifie simplement qu'il sera ajouté aux messages existants.
4. parler → voici votre logique. Je parle à AI Assistant et je fais donc des appels d'API externes.
5. Renvoyez le composant avec la réponse de l'assistant. Identique à l'étape 3 mais le composant est différent.

Problèmes que j'ai trouvés

Renvoyer la réponse était un peu problématique car les documents sont hmm… pas si faciles à comprendre je pense. Il y a même un problème créé pour résoudre ce problème : améliorer la documentation pour l'extension Websocket. Cela m'a beaucoup aidé !

Donc, la chose la plus importante est :

Vous devez renvoyer une chaîne, qui analyse en HTML et qui a le même identifiant que la chose que vous souhaitez échanger !

Donc le problème nr. 1

J'ai accidentellement renvoyé quelque chose comme ceci :

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

C'est faux. Notez l'ID et les caractères d'échappement ! Ne stringifiez pas la chaîne ici.

Le problème nr. 2

Vous pourriez penser que vous pouvez retourner quelque chose et qu'il sera échangé où vous le souhaitez. Pas exactement. Le premier div est simplement une information pour HTMX sur ce qu'il faut faire. Au moins je le comprends de cette façon ?.

Je renvoie du HTML comme ceci :

Seulement  est ajouté à l'intérieur du 

Résultat final

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

 ? Cet article vous aide-t-il ? Merci de spammer le bouton J'aime ! Votre soutien est génial. Merci!

Vous voulez en savoir plus ?

Restez à l'écoute pour plus d'informations et de tutoriels ! Visiter mon blog ?