feat: 'new websocket' to share whiteboard info

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

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() {