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