Enha: sse update

assets/style.css

@@ -2,13 +2,12 @@ body{
     background-color: #0C1616FF;
     color: #8896b2;
     min-width: 0px;
-    margin: 2em 2em !important;
+    margin: 2em auto !important;
     margin-left: auto;
     margin-right: auto;
     line-height: 1.5;
     font-size: 16px;
     font-family: Open Sans,Arial;
-    font-weight: bold;
     text-align: center;
     display: block;
 }
@@ -23,6 +22,18 @@ tr{
 #usertable{
     display: block ruby;
 }
+.actiontable{
+    display: inline flow-root;
+    margin-inline: 10px;
+}
+.action_name{
+    border: none;
+  display: inline;
+  font-family: inherit;
+  font-size: inherit;
+  padding: none;
+  width: auto;
+}
 #errorbox{
     border: 1px solid black;
     background-color: darkorange;

broker/sse.go

@@ -1,15 +1,17 @@
 package broker
 
 import (
+	"context"
 	"fmt"
 	"log/slog"
 	"net/http"
+	"os"
 	"time"
 )
 
 // the amount of time to wait when pushing a message to
 // a slow client or a client that closed after `range clients` started.
-const patience time.Duration = time.Millisecond * 500
+// const patience time.Duration = time.Second * 1
 
 type (
 	NotificationEvent struct {
@@ -19,23 +21,23 @@ type (
 	NotifierChan chan NotificationEvent
 	Broker       struct {
 		// Events are pushed to this channel by the main events-gathering routine
-		Notifier NotifierChan
+		Notifier  NotifierChan
-		// New client connections
+		log       *slog.Logger
-		newClients chan NotifierChan
+		addClient chan NotifierChan
-		// Closed client connections
+		clients   map[NotifierChan]struct{}
-		closingClients chan NotifierChan
-		// Client connections registry
-		clients map[NotifierChan]struct{}
 	}
 )
 
 func NewBroker() (broker *Broker) {
 	// Instantiate a broker
 	return &Broker{
-		Notifier:       make(NotifierChan, 1),
+		Notifier: make(NotifierChan, 100),
-		newClients:     make(chan NotifierChan),
+		log: slog.New(slog.NewJSONHandler(os.Stderr, &slog.HandlerOptions{
-		closingClients: make(chan NotifierChan),
+			Level:     slog.LevelDebug,
-		clients:        make(map[NotifierChan]struct{}),
+			AddSource: true,
+		})),
+		addClient: make(chan NotifierChan, 10),
+		clients:   map[NotifierChan]struct{}{},
 	}
 }
 
@@ -44,7 +46,6 @@ var Notifier *Broker
 // for use in different packages
 func init() {
 	Notifier = NewBroker()
-	go Notifier.Listen()
 }
 
 func (broker *Broker) ServeHTTP(w http.ResponseWriter, r *http.Request) {
@@ -59,29 +60,38 @@ func (broker *Broker) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 	}
 	w.Header().Set("Access-Control-Allow-Origin", origin)
 	w.Header().Set("Access-Control-Allow-Credentials", "true")
-	messageChan := make(NotifierChan, 10) // Buffered channel
-	broker.newClients <- messageChan
-	defer func() { broker.closingClients <- messageChan }()
 	ctx := r.Context()
+	msgChan := make(NotifierChan, 10)
+	broker.addClient <- msgChan
 	// browser can close sse on its own; ping every 2s to prevent
-	heartbeat := time.NewTicker(2 * time.Second)
+	heartbeat := time.NewTicker(8 * time.Second)
 	defer heartbeat.Stop()
 	for {
 		select {
 		case <-ctx.Done():
+			broker.log.Debug("broker: got ctx done")
 			// Client disconnected
 			return
-		case event := <-messageChan:
+		case event := <-broker.Notifier:
-			_, err := fmt.Fprintf(w, "event: %s\ndata: %s\n\n", event.EventName, event.Payload)
+			broker.log.Debug("got event", "event", event)
-			if err != nil {
+			for i := 0; i < 10; i++ { // Repeat 3 times
-				fmt.Println(err)
+				_, err := fmt.Fprintf(w, "event: %s\ndata: %s\n\n", event.EventName, event.Payload)
-				// Client disconnected
+				if err != nil {
-				return
+					broker.log.Error("write failed", "error", err)
+					return
+				}
+				w.(http.Flusher).Flush()
+				// Short delay between sends (non-blocking)
+				select {
+				case <-time.After(20 * time.Millisecond): // Adjust delay as needed
+				case <-ctx.Done():
+					return
+				}
 			}
-			w.(http.Flusher).Flush()
 		case <-heartbeat.C:
 			// Send SSE heartbeat comment
 			if _, err := fmt.Fprint(w, ":\n\n"); err != nil {
+				broker.log.Error("failed to write heartbeat", "error", err)
 				return // Client disconnected
 			}
 			w.(http.Flusher).Flush()
@@ -89,38 +99,14 @@ func (broker *Broker) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
-// Listen for new notifications and redistribute them to clients
+func (broker *Broker) Listen(ctx context.Context) {
-func (broker *Broker) Listen() {
-	slog.Info("Broker listener started")
 	for {
-		slog.Info("Broker waiting for event")
 		select {
-		case s := <-broker.newClients:
+		case <-ctx.Done():
-			// A new client has connected.
+			return
-			// Register their message channel
+		case clientChan := <-broker.addClient:
-			broker.clients[s] = struct{}{}
+			// mutex
-			slog.Info("Client added", "clients listening", len(broker.clients))
+			broker.clients[clientChan] = struct{}{}
-		case s := <-broker.closingClients:
-			// A client has dettached and we want to
-			// stop sending them messages.
-			delete(broker.clients, s)
-			slog.Info("Client removed", "clients listening", len(broker.clients))
-		case event := <-broker.Notifier:
-			slog.Info("Received new event", "event", event.EventName, "payload", event.Payload)
-			// We got a new event from the outside!
-			// Send event to all connected clients
-			slog.Info("Broadcasting event to clients", "client_count", len(broker.clients))
-			for clientMessageChan := range broker.clients {
-				slog.Info("Sending event to client", "client", clientMessageChan)
-				select {
-				case clientMessageChan <- event:
-					slog.Info("Successfully sent event to client", "client", clientMessageChan)
-				case <-time.After(patience):
-					delete(broker.clients, clientMessageChan)
-					slog.Warn("Client timed out, removed", "client", clientMessageChan, "clients listening", len(broker.clients))
-				}
-			}
-			slog.Info("Finished broadcasting event")
 		}
 	}
 }

components/base.html

@@ -13,6 +13,12 @@
 </head>
 <body>
 <div id="ancestor" hx-ext="sse" sse-connect="/sub/sse">
+    <script type="text/javascript">
+    document.body.addEventListener('htmx:sseError', function (e) {
+    // do something before the event data is swapped in
+    console.log(e)
+})
+    </script>
     <div id="main-content">
         {{template "main" .}}
     </div>

components/error.html

@@ -1,6 +1,6 @@
 {{define "error"}}
 <a href="/">
-    <div id=errorbox class="bg-orange-100 border-l-4 border-black text-black p-4" role="alert">
+    <div id=errorbox class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" role="alert">
       <p class="font-bold">An error from server</p>
       <p>{{.}}</p>
       <p>Click this banner to return to main page.</p>

components/index.html

@@ -22,6 +22,7 @@
 		{{template "roomlist" .List}}
 		</div>
 	{{else}}
+		<div id="sse-listener" sse-connect="/sub/sse" hx-trigger="sse:roomupdate_{{.State.RoomID}}" hx-get="/room" hx-target="#room-interier" hx-swap="none" style="display:none;"></div>
 		<div id="room">
 		{{template "room" .}}
 		</div>

components/journal.html

@@ -1,11 +0,0 @@
-{{define "journal"}}
-<div id="systembox" class="overflow-y-auto max-h-96 border-2 border-gray-300 p-4 rounded-lg space-y-2">
-    bot journal: <br>
-    <ul>
-    {{range .LogJournal}} 
-    <li>{{.Username}}: {{.Entry}}</li>
-    {{end}}
-    </ul>
-</div>
-{{end}}
-

components/room.html

@@ -1,5 +1,5 @@
 {{define "room"}}
-<div id="interier" hx-get="/" hx-trigger="sse:roomupdate_{{.State.RoomID}}" class=space-y-2>
+<div id="room-interier" class=space-y-2>
   <div id="headwrapper" class="grid grid-cols-1 md:grid-cols-5 md:gap-4">
   <div id="meta" class="md:col-span-1 border-2 rounded-lg text-center space-y-2">
     <p>Hello {{.State.Username}};</p>
@@ -53,16 +53,22 @@
   </div>
   <hr/>
   <div class="grid grid-cols-1 md:grid-cols-5 md:gap-4">
-    <div class="md:col-span-1">
+    <div hx-get="/actionhistory" class="md:col-span-1">
       {{template "actionhistory" .Room.ActionHistory}}
     </div>
     <div id="cardtable" class="md:col-span-3">
       {{template "cardtable" .Room}}
     </div>
-    <div class="hidden md:block md:col-span-1">
+    <div class="hidden md:block md:col-span-1"></div> <!-- Spacer -->
-      {{template "journal" .Room}}
+  </div>
-    </div> <!-- Spacer -->
+  <div id="systembox" class="overflow-y-auto max-h-96 border-2 border-gray-300 p-4 rounded-lg space-y-2">
-  </div> 
+    bot thought: <br>
+    <ul>
+    {{range .Room.LogJournal}} 
+    <li>{{.Username}}: {{.Entry}}</li>
+    {{end}}
+    </ul>
+  </div>
   <div>
     {{if .Room.IsRunning}}
     {{if and (eq .State.Role "guesser") (eq .State.Team .Room.TeamTurn)}}

handlers/elements.go

@@ -334,3 +334,19 @@ func HandleRemoveBot(w http.ResponseWriter, r *http.Request) {
 	}
 	notify(models.NotifyRoomUpdatePrefix+fi.Room.ID, "")
 }
+
+func HandleGetRoom(w http.ResponseWriter, r *http.Request) {
+	fi, err := getFullInfoByCtx(r.Context())
+	if err != nil {
+		abortWithError(w, err.Error())
+		return
+	}
+	tmpl, err := template.ParseGlob("components/*.html")
+	if err != nil {
+		abortWithError(w, err.Error())
+		return
+	}
+	if err := tmpl.ExecuteTemplate(w, "room", fi); err != nil {
+		log.Error("failed to execute template", "error", err)
+	}
+}

handlers/handlers.go

@@ -106,9 +106,8 @@ func HandleExit(w http.ResponseWriter, r *http.Request) {
 		if err := repo.RoomDeleteByID(r.Context(), fi.Room.ID); err != nil {
 			log.Error("failed to remove room", "error", err)
 		}
-		notify(models.NotifyRoomListUpdate, "") // why is it needed?
+		notify(models.NotifyRoomListUpdate, "")
 	} else {
-		notify(models.NotifyRoomUpdatePrefix, "")
 		// if regular player leaves, just exit room
 		if err := repo.PlayerExitRoom(r.Context(), fi.State.Username); err != nil {
 			log.Error("failed to exit room", "error", err)

main.go

@@ -92,6 +92,7 @@ func ListenToRequests(port string) *http.Server {
 	mux.HandleFunc("GET /add-bot", handlers.HandleAddBot)
 	mux.HandleFunc("GET /remove-bot", handlers.HandleRemoveBot)
 	mux.HandleFunc("GET /mark-card", handlers.HandleMarkCard)
+	mux.HandleFunc("GET /room", handlers.HandleGetRoom)
 	// special
 	mux.HandleFunc("GET /renotify-bot", handlers.HandleRenotifyBot)
 	// sse