zoom : socket.io - rooms, users count

zoom/src/public/js/app.js

@@ -56,12 +56,30 @@ function handleRoomSubmit(event) {
 
 form.addEventListener("submit", handleRoomSubmit);
 
-socket.on("welcome", (user) => {
+socket.on("welcome", (user, count) => {
+    const h3 = room.querySelector("h3");
+    h3.innerText = `Room : ${roomName} (${count})`;
     addMessage(`${user} joined!`);
 })
 
-socket.on("bye", (left) => {
+socket.on("bye", (left, count) => {
+    const h3 = room.querySelector("h3");
+    h3.innerText = `Room : ${roomName} (${count})`;
     addMessage(`${left} left...`);
 })
 
-socket.on("message", addMessage);
+socket.on("message", addMessage);
+
+socket.on("room_change", (rooms) => {
+    const roomList = welcome.querySelector("ul");
+    roomList.innerHTML = "";
+
+    if (rooms.length === 0) {
+        return;
+    }
+    rooms.forEach(room => {
+        const li = document.createElement("li");
+        li.innerText = room;
+        roomList.appendChild(li);
+    });
+});

zoom/src/server.js

@@ -16,6 +16,22 @@ const handleListen = () => console.log(`Listening on http://localhost:3000`);
 const httpServer = http.createServer(app);
 const wsServer = SocketIo(httpServer);
 
+function publicRooms() {
+    const {sockets: {adapter: {sids, rooms}}} = wsServer;
+
+    const publicRooms = [];
+    rooms.forEach((_, key) => {
+        if(sids.get(key) === undefined) {
+            publicRooms.push(key);
+        }
+    });
+    return publicRooms;
+}
+
+function countUsers(roomName) {
+    return wsServer.sockets.adapter.rooms.get(roomName)?.size;
+}
+
 wsServer.on("connection", socket => {
     socket['nickname'] = "Anonymous";
     socket.onAny((event) => {
@@ -24,13 +40,17 @@ wsServer.on("connection", socket => {
     socket.on("enter_room", (roomName, done) => {
         socket.join(roomName);
         done();
-        socket.to(roomName).emit("welcome", socket.nickname);
+        socket.to(roomName).emit("welcome", socket.nickname, countUsers(roomName));
+        wsServer.sockets.emit("room_change", publicRooms())
     });
     socket.on("disconnecting", () => {
         socket.rooms.forEach((room) => {
-            socket.to(room).emit("bye", socket.nickname);
+            socket.to(room).emit("bye", socket.nickname, countUsers(room) - 1);
         });
     })
+    socket.on("disconnect", () => {
+        wsServer.sockets.emit("room_change", publicRooms())
+    })
     socket.on("message", (msg, room, done) => {
         socket.to(room).emit("message", `${socket.nickname}: ${msg}`);
         done();

zoom/src/views/home.pug

@@ -15,6 +15,8 @@ html(lang="en")
 				form
 					input(placeholder="room name", required, type="text")
 					button Enter Room
+				h4 Open Rooms:
+				ul 
 			
 			div#room
 				h3