sidebar fixes

examples/chat/chat/broadcast.go

@@ -45,6 +45,27 @@ func (m *Manager) StartListener() {
 	}
 }
 
+func (m *Manager) dispatchConnectedUsers(roomId string, predicate func(conn ws.SocketConnection) bool) {
+
+	connectedUsers := make([]db.User, 0)
+
+	// backfill all existing clients to the connected client
+	m.socketManager.ForEachSocket(roomId, func(conn ws.SocketConnection) {
+		if !predicate(conn) {
+			return
+		}
+		user, err := m.queries.GetUserBySessionId(context.Background(), conn.Id)
+		if err != nil {
+			return
+		}
+		connectedUsers = append(connectedUsers, user)
+	})
+
+	m.socketManager.ForEachSocket(roomId, func(conn ws.SocketConnection) {
+		m.socketManager.SendText(conn.Id, h.Render(ConnectedUsers(connectedUsers, conn.Id)))
+	})
+}
+
 func (m *Manager) OnConnected(e ws.SocketEvent) {
 	room, _ := m.service.GetRoom(e.RoomId)
 
@@ -62,26 +83,10 @@ func (m *Manager) OnConnected(e ws.SocketEvent) {
 
 	fmt.Printf("User %s connected to %s\n", user.Name, e.RoomId)
 
-	// backfill all existing clients to the connected client
-	m.socketManager.ForEachSocket(e.RoomId, func(conn ws.SocketConnection) {
-		user, err := m.queries.GetUserBySessionId(context.Background(), conn.Id)
-		if err != nil {
-			return
-		}
-		isMe := conn.Id == e.Id
-		fmt.Printf("Sending connected user %s to %s\n", user.Name, e.Id)
-		m.socketManager.SendText(e.Id, h.Render(ConnectedUsers(user.Name, isMe)))
+	m.dispatchConnectedUsers(e.RoomId, func(conn ws.SocketConnection) bool {
+		return true
 	})
 
-	// send the connected user to all existing clients
-	m.socketManager.BroadcastText(
-		e.RoomId,
-		h.Render(ConnectedUsers(user.Name, false)),
-		func(conn ws.SocketConnection) bool {
-			return conn.Id != e.Id
-		},
-	)
-
 	m.backFill(e.Id, e.RoomId)
 }
 
@@ -95,7 +100,7 @@ func (m *Manager) OnDisconnected(e ws.SocketEvent) {
 		return
 	}
 	fmt.Printf("User %s disconnected from %s\n", user.Name, room.ID)
-	m.socketManager.BroadcastText(room.ID, h.Render(ConnectedUser(user.Name, true, false)), func(conn ws.SocketConnection) bool {
+	m.dispatchConnectedUsers(e.RoomId, func(conn ws.SocketConnection) bool {
 		return conn.Id != e.Id
 	})
 }

examples/chat/chat/component.go

@@ -1,6 +1,7 @@
 package chat
 
 import (
+	"chat/internal/db"
 	"fmt"
 	"github.com/maddalax/htmgo/framework/h"
 	"strings"
@@ -27,22 +28,19 @@ func MessageRow(message *Message) *h.Element {
 	)
 }
 
-func ConnectedUsers(username string, isMe bool) *h.Element {
+func ConnectedUsers(users []db.User, myId string) *h.Element {
 	return h.Ul(
-		h.Attribute("hx-swap", "none"),
-		h.Attribute("hx-swap-oob", "beforeend"),
+		h.Attribute("hx-swap-oob", "outerHTML"),
 		h.Id("connected-users"),
 		h.Class("flex flex-col"),
-		// This would be populated dynamically with connected users
-		ConnectedUser(username, false, isMe),
+		h.List(users, func(user db.User, index int) *h.Element {
+			return connectedUser(user.Name, user.SessionID == myId)
+		}),
 	)
 }
 
-func ConnectedUser(username string, remove bool, isMe bool) *h.Element {
+func connectedUser(username string, isMe bool) *h.Element {
 	id := fmt.Sprintf("connected-user-%s", strings.ReplaceAll(username, "#", "-"))
-	if remove {
-		return h.Div(h.Id(id), h.Attribute("hx-swap-oob", "delete"))
-	}
 	return h.Li(
 		h.Id(id),
 		h.ClassX("truncate text-slate-700", h.ClassMap{

examples/chat/pages/chat.$id.go

@@ -2,6 +2,7 @@ package pages
 
 import (
 	"chat/chat"
+	"chat/internal/db"
 	"chat/partials"
 	"fmt"
 	"github.com/go-chi/chi/v5"
@@ -111,7 +112,7 @@ func UserSidebar() *h.Element {
 		h.Class("pt-[67px] min-w-48 w-48 bg-neutral-200 p-4 flex flex-col justify-between gap-3 rounded-l-lg"),
 		h.Div(
 			h.H3F("Connected Users", h.Class("text-lg font-bold")),
-			chat.ConnectedUsers("", false),
+			chat.ConnectedUsers(make([]db.User, 0), ""),
 		),
 		h.A(
 			h.Class("cursor-pointer"),

examples/chat/ws/manager.go

@@ -195,10 +195,8 @@ func (manager *SocketManager) writeTextRaw(writer WriterChan, event string, mess
 		} else {
 			data = fmt.Sprintf("data: %s\n\n", message)
 		}
-		fmt.Printf("writing to channel:\n")
 		select {
 		case writer <- data:
-			fmt.Println("Sent to the channel")
 		case <-time.After(timeout):
 			fmt.Printf("could not send %s to channel after %s\n", data, timeout)
 		}

framework/assets/js/htmxextensions/sse.ts

@@ -55,12 +55,13 @@ function connectEventSource(ele: Element, url: string) {
     }
 
     eventSource.onmessage = function(event) {
+        const settleInfo = api.makeSettleInfo(ele);
         htmx.trigger(ele, "htmx:sseBeforeMessage", {event: event});
         const response = event.data
         const fragment = api.makeFragment(response) as DocumentFragment;
         const children = Array.from(fragment.children);
         for (let child of children) {
-            api.oobSwap(api.getAttributeValue(child, 'hx-swap-oob') || 'true', child, {tasks: []});
+            api.oobSwap(api.getAttributeValue(child, 'hx-swap-oob') || 'true', child, settleInfo);
             // support htmgo eval__ scripts
             if(child.tagName === 'SCRIPT' && child.id.startsWith("__eval")) {
                 document.body.appendChild(child);