Enha: shorter sse patience; style cleaning

assets/style.css

@@ -2,12 +2,13 @@ body{
     background-color: #0C1616FF;
     color: #8896b2;
     min-width: 0px;
-    margin: 2em auto !important;
+    margin: 2em 2em !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;
 }
@@ -22,18 +23,6 @@ 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,17 +1,15 @@
 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.Second * 1
+const patience time.Duration = time.Millisecond * 500
 
 type (
 	NotificationEvent struct {
@@ -21,23 +19,23 @@ type (
 	NotifierChan chan NotificationEvent
 	Broker       struct {
 		// Events are pushed to this channel by the main events-gathering routine
-		Notifier  NotifierChan
-		log       *slog.Logger
-		addClient chan NotifierChan
-		clients   map[NotifierChan]struct{}
+		Notifier NotifierChan
+		// New client connections
+		newClients chan NotifierChan
+		// Closed client connections
+		closingClients chan NotifierChan
+		// Client connections registry
+		clients map[NotifierChan]struct{}
 	}
 )
 
 func NewBroker() (broker *Broker) {
 	// Instantiate a broker
 	return &Broker{
-		Notifier: make(NotifierChan, 100),
-		log: slog.New(slog.NewJSONHandler(os.Stderr, &slog.HandlerOptions{
-			Level:     slog.LevelDebug,
-			AddSource: true,
-		})),
-		addClient: make(chan NotifierChan, 10),
-		clients:   map[NotifierChan]struct{}{},
+		Notifier:       make(NotifierChan, 1),
+		newClients:     make(chan NotifierChan),
+		closingClients: make(chan NotifierChan),
+		clients:        make(map[NotifierChan]struct{}),
 	}
 }
 
@@ -46,6 +44,7 @@ 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) {
@@ -60,38 +59,29 @@ 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(8 * time.Second)
+	heartbeat := time.NewTicker(2 * time.Second)
 	defer heartbeat.Stop()
 	for {
 		select {
 		case <-ctx.Done():
-			broker.log.Debug("broker: got ctx done")
 			// Client disconnected
 			return
-		case event := <-broker.Notifier:
-			broker.log.Debug("got event", "event", event)
-			for i := 0; i < 10; i++ { // Repeat 3 times
-				_, err := fmt.Fprintf(w, "event: %s\ndata: %s\n\n", event.EventName, event.Payload)
-				if err != nil {
-					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
-				}
+		case event := <-messageChan:
+			_, err := fmt.Fprintf(w, "event: %s\ndata: %s\n\n", event.EventName, event.Payload)
+			if err != nil {
+				fmt.Println(err)
+				// Client disconnected
+				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()
@@ -99,14 +89,38 @@ func (broker *Broker) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
-func (broker *Broker) Listen(ctx context.Context) {
+// Listen for new notifications and redistribute them to clients
+func (broker *Broker) Listen() {
+	slog.Info("Broker listener started")
 	for {
+		slog.Info("Broker waiting for event")
 		select {
-		case <-ctx.Done():
-			return
-		case clientChan := <-broker.addClient:
-			// mutex
-			broker.clients[clientChan] = struct{}{}
+		case s := <-broker.newClients:
+			// A new client has connected.
+			// Register their message channel
+			broker.clients[s] = struct{}{}
+			slog.Info("Client added", "clients listening", len(broker.clients))
+		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,12 +13,6 @@
 </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-orange-500 text-orange-700 p-4" role="alert">
+    <div id=errorbox class="bg-orange-100 border-l-4 border-black text-black 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,7 +22,6 @@
 		{{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

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

handlers/elements.go

@@ -334,19 +334,3 @@ 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,8 +106,9 @@ 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, "")
+		notify(models.NotifyRoomListUpdate, "") // why is it needed?
 	} 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,7 +92,6 @@ 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