speed + more config

css/boxes.css

@@ -1,9 +1,6 @@
 .boxes-container {
-  max-width: 800px;
-  margin: 0 auto;
   border: #4a7c59 1px dotted;
   border-radius: 4px;
-
 }
 .boxes input{
   margin: 0;
@@ -52,4 +49,11 @@
 
 .counter-label {
   color: #4a7c59;
+}
+
+.users-container {
+  border: #4a7c59 1px dotted;
+  margin-top:50px;
+  color:#4a7c59;
+  font-size: 0.5rem; /* Adjust font size as needed */
 }

css/main.css

@@ -31,4 +31,8 @@ a:hover {
 
 nav li {
   list-style: none;
+}
+main{
+  max-width: 800px;
+  margin: 0 auto;
 }

js/boxes.js

@@ -16,7 +16,6 @@
                 const box = deserializeBox(i);
                 const el = document.getElementById("box-" + box.id);
                 el.checked = box.value;
-                // console.log(i,box,el)
             });
             return;
         }
@@ -24,8 +23,8 @@
             const items = instruction.split(":");
             const el = document.getElementById("counter");
             el.innerText = items[1];
-            const el2 = document.getElementById("ips");
-            el2.innerText = items[2].replaceAll(",", "\n");
+            const el2 = document.getElementById("users");
+            el2.innerText = items[2].replaceAll(",,,", "\n");
             return;
         }
     };

js/boxes.ts

@@ -25,7 +25,6 @@ type Box = {
 
         const el = document.getElementById("box-" + box.id) as CheckboxEl;
         el.checked = box.value;
-        // console.log(i,box,el)
       });
       return;
     }
@@ -34,8 +33,8 @@ type Box = {
   
       const el = document.getElementById("counter") as CheckboxEl;
       el.innerText = items[1];
-      const el2 = document.getElementById("ips") as CheckboxEl;
-      el2.innerText = items[2].replaceAll(",", "<br/>");
+      const el2 = document.getElementById("users") as CheckboxEl;
+      el2.innerText = items[2].replaceAll(",,,", "\n");
 
       return;
     }

src/boxes/boxes.go

@@ -161,13 +161,13 @@ func handleMessage(msg string, ws *websocket.Conn) error {
 func InitWs(c echo.Context) error {
 	websocket.Handler(func(ws *websocket.Conn) {
 		wsMutex.Lock()
-		wsConnections[ws] = c.RealIP()
+		wsConnections[ws] = c.Request().UserAgent()
 		wsMutex.Unlock()
 
 		boxes := GetBoxes()
 		msg := "u:" + strconv.Itoa(len(wsConnections)) + ":"
 		for _, addr := range wsConnections {
-			msg += addr + ","
+			msg += addr + ",,,"
 		}
 		msg += "\n"
 

src/main.go

@@ -3,6 +3,9 @@ package main
 import (
 	"html/template"
 	"io"
+	"net/http"
+	"strings"
+	"time"
 
 	"github.com/labstack/echo/v4"
 	"github.com/labstack/echo/v4/middleware"
@@ -47,9 +50,21 @@ func main() {
 
 	e.Logger.SetLevel(log.DEBUG)
 	e.Use(middleware.Logger())
+	e.Use(middleware.Gzip())
+	e.Use(middleware.HTTPSRedirect())
 
 	e.GET("/health", healthCheck)
 
+	e.Use(func(next echo.HandlerFunc) echo.HandlerFunc {
+		return func(c echo.Context) error {
+			if strings.HasPrefix(c.Request().URL.Path, "/css/") || strings.HasPrefix(c.Request().URL.Path, "/js/") {
+				c.Response().Header().Set("Cache-Control", "public, max-age=31536000") // 1 year
+				c.Response().Header().Set("Expires", time.Now().AddDate(1, 0, 0).Format(http.TimeFormat))
+			}
+			return next(c)
+		}
+	})
+
 	e.Static("/css", "css")
 	e.Static("/js", "js")
 

views/boxes.html

@@ -3,7 +3,6 @@
 
 
 <span class="counter-label">Currently Online: <span id="counter"></span></span>
-<div id="ips" class="ips-container"></div>  
 
 <div class="boxes-container">
   <div class="boxes">
@@ -19,6 +18,9 @@
   </div>
 </div>
 
+<div id="users" class="users-container"></div>  
+
+
 <script src="js/ws.js?v={{.BuildNumber}}"></script>
 <script src="js/boxes.js?v={{.BuildNumber}}"></script>
 {{end}}