Chat UI

[amitmahajan82]

Hello All,

I don't know frontend development. One of my teammates suggest me to use htmx for website UI. Website is having chat messaging functionality as well. I am wondering can htmx be used for chat messaging UI (like WhatsApp web)?

Idea is that on chat page load in browser, chat history for different people in the friend list would can be fetched from server using a REST API, and then real time chat messaging will start through the web socket connection.

Is htmx suitable for such kind of use case?

Thanks.
Amit

[svenberkvens]

HTMX is perfect for such a scenario. Read the HTMX documentation on HATEOAS, though. You're talking about a REST API, and HTMX's philosophy is to not use an API but produce HTML on the server instead.

[amitmahajan82]

Ok. But how will it handle chat scenario where different users 1-1 chat is ongoing from one user with multiple other users in different chat windows. Chat messages will be simply received over websocket and displayed in chat windows once html page is loaded. How will UI be able to display a chat message from a new user which was not in the list of chat users when html page was loaded from server?

[svenberkvens]

I'm assuming that the server knows which chat partners there are for a specific user (i.e. who is talking to whom). Then it should be able to send HTML fragments with a specific target via SSE. See the documentation on hx-sse. You could have a <div> for each current chat partner and a special <div> for new chat partners that the server will target by creating a new <div> for the new chat partner AND include the special <div> for another chat partner again.

For example:

<div hx-sse="connect:/event_stream">
  <div hx-sse="swap:chat-partner-1">
    ...
  </div>
  <div hx-sse="swap:chat-partner-2">
    ...
  </div>
  <div hx-sse="swap:chat-partner-new">
    ...
  </div>
</div>

The server can now target chat-partner-1 or chat-partner-2 for existing partners, and if a new chat partner arrives, it could send:

<div hx-sse="swap:chat-partner-3">
</div>
<div hx-sse="swap:chat-partner-new">
</div>

targetted at chat-partner-new.

You could also use triggers instead:

<div hx-sse="connect:/event_stream">
    <div hx-get="/message/partner/1" hx-trigger="sse:chat-partner-1" hx-swap="beforeend">
      ...
    </div>
    <div hx-get="/message/partner/2" hx-trigger="sse:chat-partner-2" hx-swap="beforeend">
      ...
    </div>
    <div hx-get="/message/partner/new" hx-trigger="sse:chat-partner-new" hx-swap="outerHTML">
      ...
    </div>
  </div>

You'd send events using SSE and then actually get the new message(s) using a GET from the server. New partners can be added using the same mechanism.

[gopiak]

Hi,

I'm also seeking resources to implement a chat UI using HTMX. Please consider the same use case as mentioned above (WhatsApp/Microsoft Teams web UI).

From my understanding, when clicking on a new channel, the previously fetched chat history window will be discarded, and a new chat window HTML fragment will be swapped in place of the previous chat window using HTMX. The server will send a new chat window HTML fragment with some chat messages (from the current channel) populated.

With the intention of minimizing sever calls.
Is it possible to maintain the chat history between switching chat windows without using any client-side JavaScript?

Thanks.

[svenberkvens]

This article has a nice write-up on how to use WebSockets and Django in combination with HTMX to create a chat application. Perhaps it will help you!