HTMX and WebSockets usage in SSR project type

[jerrygzy]

Hi, I have been trying to implement a chat app using HTMX with WebSockets, I have looked at the htmx websocket extensions doc and the example code from happyx here

htmx has provided a nodejs server code example, So I have modified it in happyx, but I did not get any results, could you help me take a look at my code? thank you.

main.nim

# Import HappyX
import
  happyx
import 
  templates/index


serve("0.0.0.0", 5000):
  get "/{title:string}":
    {.gcsafe.}: 
      return mainPage(title)
  # websockets
  wsConnect:
    echo "Connected"
  ws "/":
    try:
      echo wsData
      let reply = "<div id=\"idMessage\" hx-swap-oob=\"true\">" & $parseJson(wsData)["text"] & "</div>"
      echo reply
      for connection in wsConnections:
        if connection.readyState == Open:
          await connection.send reply
    except JsonParsingError:
      await wsClient.send $(%*{
        "response": "failure"
      })

index.nim

import happyx
import std/[random,strutils]
import ../htmx/comp

# Header
proc header(title: string): TagRef =
  return buildHtml:
    tHead:
      tMeta(charset = "utf-8")
      tTitle: { title }
      # Htmx , hyperscript, extensions
      tScript(src = "https://unpkg.com/[email protected]") 
      tScript(src = "https://unpkg.com/[email protected]") 
      tScript(src = "https://unpkg.com/htmx.org/dist/ext/ws.js")
      tScript(src = "https://unpkg.com/htmx.org/dist/ext/morphdom-swap.js")
      # daisyUI and tailwind from CDN
      tLink( href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css", rel="stylesheet", type="text/css" )  
      tScript(src = "https://cdn.tailwindcss.com")  


# Chat 
component ChatWidget:
    name: string
    `template`:
        tDiv("hx-ext"="ws", "ws-connect"="/"):
            tDiv(id="notifications"):
                "New message received"
            tDiv(id="idMessage"):
                "..."
            tForm(id="form", "ws-send"):
                tInput(id="input", name="text", type="text", placeholder=self.name)


proc mainPage*(title: string): TagRef =
  return buildHtml:
    tHtml("data-theme" = "dark"):
      {header(title)}
      tBody( ):
        tDiv(class="hero min-h-screen", style="background-image: url(https://daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.jpg);"):
            tDiv(class="hero-overlay bg-opacity-60")
            tDiv(class="hero-content text-center text-neutral-content"):
                tDiv(class="max-w-md"):
                    tH1(class="mb-5 text-5xl font-bold"):
                        "Hello {title}!"
                    ChatWidget("Test")

[Ethosa]

Here is example of working with websockets

# Import HappyX
import
  happyx
import 
  templates/index


serve("0.0.0.0", 5000):
  get "/{title:string}":
    {.gcsafe.}: 
      return mainPage(title)
      
  # websockets
  wsConnect:
    echo "Connected"
    echo wsClient  # you also can get WebSocket connection
    
  ws "/":
    echo wsData  # This is connection data
    # You should just answer to wsClient
    # For every ws connection wsClient is different WebSocket Connection
    await wsClient.send("<div id=\"idMessage\" hx-swap-oob=\"true\">" & $parseJson(wsData)["text"] & "</div>")
    
  wsError:
    echo "This will be printed on websocket connection error"
    echo wsClient  # you also can get WebSocket connection
    
  wsClosed:
    echo "This will be printed on websocket connection closed"
    echo wsClient  # you also can get WebSocket connection

[jerrygzy]

just tried it, but did not work, do I need to update to latest version? I am currently on [email protected]

[Ethosa]

Can you show source code?

[Ethosa]

@jerrygzy try id = r"idMessage", it should help

[jerrygzy]

component ChatWidget:
    name: string
    `template`:
        tDiv("hx-ext"="ws", "ws-connect"="/"):
            tDiv(id = fmt"idMessage", "hx-swap-oob"="beforeend"):
                "..."
            tForm(id="form", "ws-send"):
                tInput(id="input", name="text", type="text", placeholder=self.name)

[jerrygzy]

cool, this one works, thank you!

[jerrygzy]

btw, If I want to implement a chat app, where multiple user can chat in a group or 1 to 1 message, do I need to change wsClient.send logic? for example A send a message to B, then wsClient for A and B are different connections, how should I use wsClient.send ?

[Ethosa]

You can use wsClient.tspSocket as unique ID for ws client and work with wsConnections (seq[WebSocket])

So, here is example solution:

proc sendTo(manager: TableRef[WebSocket, int], client: WebSocket, target: int, data: string) {.async.} =
  for k, v in manager.pairs():
    if v == target:
      await client.send(data)
      break

serve "127.0.0.1", 5000:
  var connectionManager = newTable[WebSocket, int]()
  var uniqueId = 0
  
  wsConnect:
    # add ws connection into manager
    connectionManager[wsClient] = uniqueId
    inc uniqueId
  
  wsClosed:
    # remove ws connection from manager
    connectionManager.del(wsClient)
  
  ws "/chat":
    # {"action": "send_to", "target_id": OTHER_WS_CLIENT_ID, "data": "Hello!"}
    let data = parseJson(wsData)
    if data["action"] == "send_to":
      await connectionManager.sendTo(wsClient, data["target_id"], data["data"])

More info about websocket lib that HappyX uses: https://github.com/treeform/ws/blob/master/src/ws.nim#L12