added online

html/logic.js

@@ -6,6 +6,7 @@ var canvas = document.getElementById("board");
 var colorInput = document.getElementById("color");
 var canvasHidden = document.getElementById("hidden");
 var timer = document.getElementById("timer");
+var online = document.getElementById("online");
 
 var ctx = canvas.getContext("2d");
 var ctx2 = canvasHidden.getContext("2d");
@@ -28,6 +29,7 @@ function drawTimer() {
 function connect() {
 //    socket.close();
     const handler = (event) => {
+        console.log(event.data)
         event.data.text().then(function(packet){
             packet = JSON.parse(packet)
             let code = packet.code
@@ -60,6 +62,10 @@ function connect() {
                     drawPixel(contentJson.x * 4, contentJson.y * 4, color)
                     redraw();
                 break;
+                case 2:
+                    online.textContent = packet.online;
+                    console.log(`Online: ${packet.online}`);
+                break;
                 case undefined:
                     console.log("ping!");
                 break                

src/index.js

@@ -103,6 +103,13 @@ server.on('connection', (client) => {
                 response.content = board;
                 response.timeBetweenPixels = timeBetweenPixels;
                 client.send(Buffer.from(JSON.stringify(response)));
+                response = {}
+                for (let i = 0; i < clients.length; i++) {
+                    response.code = 2;
+                    response.online = clients.length;
+                    clients[i].send(Buffer.from(JSON.stringify(response)));
+                }
+
                 break;
             case 1:
                 response.code = 1;

views/index.pug

@@ -16,6 +16,9 @@ html(lang='en')
             br
             | timer: 
             b(id="timer")
+            br
+            | online: 
+            b(id="online")
         canvas(id="board" width="1920" height="1080" style="border:1px solid #000000;" display="block")
         canvas(hidden id="hidden" width="1920" height="1080")
         script(type="text/javascript" src="./logic.js")