HTMX、WebSocket、Hono でチャットする-jsチュートリアル-php.cn

Chat with HTMX, WebSockets and Hono

Last week, I wrote about tweaking htmx to display instant messages. A week into using HTMX, I needed more. I wanted a better way to stream HTML from the server, using JSX components instead of plain HTML strings for better code usability.

? Quick reminder: if you find this useful, please give it a thumbs up! Your support helps me create more content.

Tools I Used:

HTMX
HTMX Websockets Extension
Honofor the backend
Websockets- client-side

The idea is simple. My Conversation component is wrapped in a div with hx-ext="ws", which connects to my backend when rendered.

export const Conversation = (props: { messages: Message[] }) => (   {props.messages.reverse().map((message) => (    
 ))} 
  
 );

ログイン後にコピー

Next important thing is the InputMessageForm. Just add ws-send to the form, and it will send a message where the key is the textarea’s ID (messageInput) with its value.

export const InputMessageForm = () => (    
 );

ログイン後にコピー

Websockets - Server

Here’s the full code block for the Hono server. Some console logs for opening and closing connection. onMessage is where the magic happens.

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

ログイン後にコピー

So the flow is:

Receive the query
Send back empty just to make it clean. There is no hx-swap-oob specified so its True by default. That means that it will find the element with id=query-submit-form and swap it.
Send back the component with the user message. Here hx-swap-oob is specified to beforeend which simply means that it will be added to existing messages.
talk → here comes your logic. I’m talking to AI assistant so making some external API calls.
Send back the component with assistant answer. The same as step 3 but the component is different.

Problems I found

Sending response back was a bit problematic since docs are hmm… not that easy to understand I think. There is even an issue created to fix this: Improve documentation for websocket extension. That helped me a lot!

So the most important thing is:

You need to send back string, that parses to html that has the same id as the thing you want to swap!

So the problem nr. 1

I accidentally sent back something like this:

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

ログイン後にコピー

This is wrong. Note the ID and escape characters! Don’t stringify the string here.

The problem nr. 2

You might think you can return something and it will get swapped where you want. Not exactly. The firstdivis just information for HTMX on what to do. At least I understand it this way ?.

I’m returning html like this:

ログイン後にコピー

Only is appended inside the existing

on the client side.