channel online count

index.js

@@ -21,7 +21,11 @@ app.get("/playlist", async (req, res) => {
 
 app.get("/channels", async (req, res) => {
 	var channels = await fs.readdir("channels");
-	channels = channels.map(c => c.replace(".json", ""));
+	channels = channels.map(c => {
+		c = c.replace(".json", "");
+		var n = [...require("./mousie-server.js").clients].reduce((num, ws) => ws.channel == c ? num + 1 : num, 0);
+		return [c, n];
+	});
 	res.send(channels);
 });
 

mousie-server.js

@@ -1,7 +1,7 @@
 var {WebSocket, WebSocketServer} = require("ws");
 var {server} = require("./index.js");
 
-var wss = new WebSocketServer({ server, clientTracking: true });
+var wss = module.exports = new WebSocketServer({ server, clientTracking: true });
 
 wss.on('connection', ws => {
 	

public/index.html

@@ -252,6 +252,10 @@
 							break;
 						case "leave":
 							document.getElementById("mousie"+j[1])?.remove();
+							refreshChannels();
+							break;
+						case "join":
+							refreshChannels();
 							break;
 						case "channel":
 							channel = j[1];
@@ -462,16 +466,21 @@
 			ws.send(JSON.stringify(["channel", newChannel]));
 		}
 
-		fetch("channels").then(res => res.json()).then(channels => {
-			for (let channel of channels) {
-				let o = document.createElement("option");
-				o.value = channel;
-				o.innerText = channel;
-				channel_select.appendChild(o);
-			}
-			channel_select.value = channel;
-		});
+		function refreshChannels() {
+			fetch("channels").then(res => res.json()).then(channels => {
+				channel_select.innerHTML = "";
+				for (let [channel, online] of channels) {
+					let o = document.createElement("option");
+					o.value = channel;
+					o.innerText = `(${online}) ${channel}`;
+					channel_select.appendChild(o);
+				}
+				channel_select.value = channel;
+			});
+		}
+		refreshChannels();
 
+		channel_select.onclick = refreshChannels;
 		channel_select.onchange = evt => {
 			changeChannel(evt.target.value);
 		};