feat: 'new websocket' to share whiteboard info

* share whiteboard info only on change and at specific frequency
* front update to track nb user connected

scripts/WhiteboardServerSideInfo.js

@@ -0,0 +1,45 @@
+class WhiteboardServerSideInfo {
+    constructor() {
+        /**
+         * @type {number}
+         * @private
+         */
+        this._nbConnectedUsers = 0;
+
+        /**
+         * Variable to tell if these info have been sent or not
+         *
+         * @private
+         * @type {boolean}
+         */
+        this._hasNonSentUpdates = false;
+    }
+
+    incrementNbConnectedUsers() {
+        this._nbConnectedUsers++;
+        this._hasNonSentUpdates = true;
+    }
+
+    decrementNbConnectedUsers() {
+        this._nbConnectedUsers--;
+        this._hasNonSentUpdates = true;
+    }
+
+    hasConnectedUser() {
+        return this._nbConnectedUsers > 0;
+    }
+
+    asObject() {
+        return { nbConnectedUsers: this._nbConnectedUsers };
+    }
+
+    infoWasSent() {
+        this._hasNonSentUpdates = false;
+    }
+
+    shouldSendInfo() {
+        return this._hasNonSentUpdates;
+    }
+}
+
+module.exports = WhiteboardServerSideInfo;

scripts/config.js

@@ -0,0 +1,5 @@
+const config = {
+    whiteboardInfoBroadcastFreq: 1, // once per second
+};
+
+module.exports = config;

scripts/server-backend.js

@@ -1,6 +1,9 @@
-const { getArgs } = require("./utils");
 const path = require("path");
 
+const { getArgs } = require("./utils");
+const config = require("./config");
+const WhiteboardServerSideInfo = require("./WhiteboardServerSideInfo");
+
 function startBackendServer(port) {
     var accessToken = ""; //Can be set here or as start parameter (node server.js --accesstoken=MYTOKEN)
     var disableSmallestScreen = false; //Can be set to true if you dont want to show (node server.js --disablesmallestscreen=true)
@@ -205,9 +208,26 @@ function startBackendServer(port) {
     }
 
     var smallestScreenResolutions = {};
+
+    /**
+     * @type {Map<string, WhiteboardServerSideInfo>}
+     */
+    const infoByWhiteboard = new Map();
+
+    setInterval(() => {
+        infoByWhiteboard.forEach((info, whiteboardId) => {
+            if (info.shouldSendInfo()) {
+                io.sockets
+                    .in(whiteboardId)
+                    .compress(false)
+                    .emit("whiteboardInfoUpdate", info.asObject());
+                info.infoWasSent();
+            }
+        });
+    }, (1 / config.whiteboardInfoBroadcastFreq) * 1000);
+
     io.on("connection", function (socket) {
         var whiteboardId = null;
-
         socket.on("disconnect", function () {
             if (
                 smallestScreenResolutions &&
@@ -217,8 +237,15 @@ function startBackendServer(port) {
             ) {
                 delete smallestScreenResolutions[whiteboardId][socket.id];
             }
-            socket.compress(false).broadcast.emit("refreshUserBadges", null); //Removes old user Badges
-            sendSmallestScreenResolution();
+
+            const whiteboardServerSideInfo = infoByWhiteboard.get(whiteboardId);
+            whiteboardServerSideInfo.decrementNbConnectedUsers();
+            if (whiteboardServerSideInfo.hasConnectedUser()) {
+                socket.compress(false).broadcast.emit("refreshUserBadges", null); //Removes old user Badges
+                sendSmallestScreenResolution();
+            } else {
+                infoByWhiteboard.delete(whiteboardId);
+            }
         });
 
         socket.on("drawToWhiteboard", function (content) {
@@ -236,6 +263,13 @@ function startBackendServer(port) {
             if (accessToken === "" || accessToken == content["at"]) {
                 whiteboardId = content["wid"];
                 socket.join(whiteboardId); //Joins room name=wid
+                if (!infoByWhiteboard.has(whiteboardId)) {
+                    infoByWhiteboard.set(whiteboardId, new WhiteboardServerSideInfo());
+                }
+
+                const whiteboardServerSideInfo = infoByWhiteboard.get(whiteboardId);
+                whiteboardServerSideInfo.incrementNbConnectedUsers();
+
                 smallestScreenResolutions[whiteboardId] = smallestScreenResolutions[whiteboardId]
                     ? smallestScreenResolutions[whiteboardId]
                     : {};

src/index.html

@@ -253,6 +253,7 @@
 
         <div id="whiteboardInfoContainer">
             <p><b>Whiteboard information:</b></p>
+            <p># connected users: <i id="connectedUsersCount">0</i></p>
             <p># msg. sent to server: <i id="messageSentCount">0</i></p>
             <p># msg. received from server: <i id="messageReceivedCount">0</i></p>
         </div>

src/js/main.js

@@ -49,6 +49,10 @@ function main() {
     signaling_socket.on("connect", function () {
         console.log("Websocket connected!");
 
+        signaling_socket.on("whiteboardInfoUpdate", (info) => {
+            InfoService.updateInfoFromServer(info);
+        });
+
         signaling_socket.on("drawToWhiteboard", function (content) {
             whiteboard.handleEventsAndData(content, true);
             InfoService.incrementNbMessagesReceived();

src/js/services/InfoService.js

@@ -12,6 +12,14 @@ class InfoService {
      */
     _infoAreDisplayed = false;
 
+    /**
+     * Holds the number of user connected to the server
+     *
+     * @type {number}
+     * @private
+     */
+    _nbConnectedUsers = 0;
+
     /**
      * @type {number}
      * @private
@@ -31,6 +39,13 @@ class InfoService {
      */
     _refreshInfoIntervalId = undefined;
 
+    /**
+     * @param {number} nbConnectedUsers
+     */
+    updateInfoFromServer({ nbConnectedUsers }) {
+        this._nbConnectedUsers = nbConnectedUsers;
+    }
+
     incrementNbMessagesReceived() {
         this._nbMessagesReceived++;
     }
@@ -42,6 +57,7 @@ class InfoService {
     refreshDisplayedInfo() {
         $("#messageReceivedCount")[0].innerText = String(this._nbMessagesReceived);
         $("#messageSentCount")[0].innerText = String(this._nbMessagesSent);
+        $("#connectedUsersCount")[0].innerText = String(this._nbConnectedUsers);
     }
 
     displayInfo() {