From 685caffd437e3b739c00307c0a68cb3bb12ac71f Mon Sep 17 00:00:00 2001 From: Florent Chehab Date: Sun, 10 May 2020 15:34:19 +0200 Subject: [PATCH] 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 | 45 +++++++++++++++++++++++++++++ scripts/config.js | 5 ++++ scripts/server-backend.js | 42 ++++++++++++++++++++++++--- src/index.html | 1 + src/js/main.js | 4 +++ src/js/services/InfoService.js | 16 ++++++++++ 6 files changed, 109 insertions(+), 4 deletions(-) create mode 100644 scripts/WhiteboardServerSideInfo.js create mode 100644 scripts/config.js diff --git a/scripts/WhiteboardServerSideInfo.js b/scripts/WhiteboardServerSideInfo.js new file mode 100644 index 0000000..7b075be --- /dev/null +++ b/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; diff --git a/scripts/config.js b/scripts/config.js new file mode 100644 index 0000000..5f97f52 --- /dev/null +++ b/scripts/config.js @@ -0,0 +1,5 @@ +const config = { + whiteboardInfoBroadcastFreq: 1, // once per second +}; + +module.exports = config; diff --git a/scripts/server-backend.js b/scripts/server-backend.js index 7d84260..35a41d3 100644 --- a/scripts/server-backend.js +++ b/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} + */ + 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] : {}; diff --git a/src/index.html b/src/index.html index 335fdf4..5284ee4 100644 --- a/src/index.html +++ b/src/index.html @@ -253,6 +253,7 @@

Whiteboard information:

+

# connected users: 0

# msg. sent to server: 0

# msg. received from server: 0

diff --git a/src/js/main.js b/src/js/main.js index c16dace..dbdaa04 100644 --- a/src/js/main.js +++ b/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(); diff --git a/src/js/services/InfoService.js b/src/js/services/InfoService.js index ed67fe6..49af8c0 100644 --- a/src/js/services/InfoService.js +++ b/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() {