WebDev
/
VersaWhiteboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(front): creating throttling service 

* ease throttling of events accross the frontend
This commit is contained in:
Florent Chehab 2020-05-11 11:06:42 +02:00
parent b0337d9f5b
commit 409681b217
No known key found for this signature in database
GPG Key ID: 9A0CE018889EA246
2 changed files with 70 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/js/services/ThrottlingService.js Normal file
View File

@ -0,0 +1,41 @@
import Point from "../classes/Point";
import { getCurrentTimeMs } from "../utils";
import ConfigService from "./ConfigService";
class ThrottlingService {
/**
* @type {number}
* @private
*/
_lastSuccessTime = 0;
/**
* @type {Point}
* @private
*/
_lastPointPosition = new Point(0, 0);
/**
* Helper to throttle events based on the configuration.
* Only if checks are ok, the onSuccess callback will be called.
*
* @param {Point} newPosition New point position to base the throttling on
* @param {function()} onSuccess Callback called when the throttling is successful
*/
throttle(newPosition, onSuccess) {
const newTime = getCurrentTimeMs();
const { _lastPointPosition, _lastSuccessTime } = this;
if (newTime - _lastSuccessTime > ConfigService.pointerEventsThresholdMinTimeDelta) {
if (
_lastPointPosition.distTo(newPosition) >
ConfigService.pointerEventsThresholdMinDistDelta
) {
onSuccess();
this._lastPointPosition = newPosition;
this._lastSuccessTime = newTime;
}
}
}
}
export default new ThrottlingService();

91
src/js/whiteboard.js
View File

@ -1,9 +1,8 @@
import { dom } from "@fortawesome/fontawesome-svg-core"; import { dom } from "@fortawesome/fontawesome-svg-core";
import { getCurrentTimeMs } from "./utils";
import Point from "./classes/Point"; import Point from "./classes/Point";
import ReadOnlyService from "./services/ReadOnlyService"; import ReadOnlyService from "./services/ReadOnlyService";
import InfoService from "./services/InfoService"; import InfoService from "./services/InfoService";
import ConfigService from "./services/ConfigService"; import ThrottlingService from "./services/ThrottlingService";
const RAD_TO_DEG = 180.0 / Math.PI; const RAD_TO_DEG = 180.0 / Math.PI;
const DEG_TO_RAD = Math.PI / 180.0; const DEG_TO_RAD = Math.PI / 180.0;
@ -209,25 +208,15 @@ const whiteboard = {
const currentPos = Point.fromEvent(e); const currentPos = Point.fromEvent(e);
const pointerSentTime = getCurrentTimeMs(); ThrottlingService.throttle(currentPos, () => {
if ( _this.lastPointerPosition = currentPos;
pointerSentTime - _this.lastPointerSentTime > _this.sendFunction({
ConfigService.pointerEventsThresholdMinTimeDelta t: "cursor",
) { event: "move",
if ( d: [currentPos.x, currentPos.y],
_this.lastPointerPosition.distTo(currentPos) > username: _this.settings.username,
ConfigService.pointerEventsThresholdMinDistDelta });
) { });
_this.lastPointerSentTime = pointerSentTime;
_this.lastPointerPosition = currentPos;
_this.sendFunction({
t: "cursor",
event: "move",
d: [currentPos.x, currentPos.y],
username: _this.settings.username,
});
}
}
}); });
_this.mouseOverlay.on("mousemove touchmove", function (e) { _this.mouseOverlay.on("mousemove touchmove", function (e) {
@ -541,26 +530,15 @@ const whiteboard = {
_this.prevPos = currentPos; _this.prevPos = currentPos;
}); });
const pointerSentTime = getCurrentTimeMs(); ThrottlingService.throttle(currentPos, () => {
if ( _this.lastPointerPosition = currentPos;
pointerSentTime - _this.lastPointerSentTime > _this.sendFunction({
ConfigService.pointerEventsThresholdMinTimeDelta t: "cursor",
) { event: "move",
const newPointerPosition = currentPos; d: [currentPos.x, currentPos.y],
if ( username: _this.settings.username,
_this.lastPointerPosition.distTo(newPointerPosition) > });
ConfigService.pointerEventsThresholdMinDistDelta });
) {
_this.lastPointerSentTime = pointerSentTime;
_this.lastPointerPosition = newPointerPosition;
_this.sendFunction({
t: "cursor",
event: "move",
d: [newPointerPosition.x, newPointerPosition.y],
username: _this.settings.username,
});
}
}
}, },
triggerMouseOver: function () { triggerMouseOver: function () {
var _this = this; var _this = this;
@ -877,28 +855,17 @@ const whiteboard = {
currX += textBox.width() - 4; currX += textBox.width() - 4;
} }
const pointerSentTime = getCurrentTimeMs();
const newPointerPosition = new Point(currX, currY); const newPointerPosition = new Point(currX, currY);
// At least 100 ms between messages to reduce server load
if ( ThrottlingService.throttle(newPointerPosition, () => {
pointerSentTime - _this.lastPointerSentTime > _this.lastPointerPosition = newPointerPosition;
ConfigService.pointerEventsThresholdMinTimeDelta _this.sendFunction({
) { t: "cursor",
// Minimal distance between messages to reduce server load event: "move",
if ( d: [newPointerPosition.x, newPointerPosition.y],
_this.lastPointerPosition.distTo(newPointerPosition) > username: _this.settings.username,
ConfigService.pointerEventsThresholdMinDistDelta });
) { });
_this.lastPointerSentTime = pointerSentTime;
_this.lastPointerPosition = newPointerPosition;
_this.sendFunction({
t: "cursor",
event: "move",
d: [newPointerPosition.x, newPointerPosition.y],
username: _this.settings.username,
});
}
}
}); });
this.textContainer.append(textBox); this.textContainer.append(textBox);
textBox.draggable({ textBox.draggable({