1
0
Fork 0
mirror of https://github.com/sbrl/Nibriboard.git synced 2018-01-10 21:33:49 +00:00

Store client state updates sent by the server.

This commit is contained in:
Starbeamrainbowlabs 2017-02-19 11:57:42 +00:00
parent 8f3b7b9bd9
commit 08ee44a5c4
2 changed files with 87 additions and 1 deletions

View file

@ -41,6 +41,8 @@ class BoardWindow extends EventEmitter
// Setup the input controls
window.panzoom(canvas, this.handleCanvasMovement.bind(this));
// --~~~--
// Fetch the RippleLink connection information and other settings from
// the server
get("/Settings.json").then(JSON.parse).then((function(settings) {
@ -51,8 +53,15 @@ class BoardWindow extends EventEmitter
console.error(`Error: Failed to fetch settings from server! Response: ${errorMessage}`);
});
// --~~~--
// Setup a bunch of event listeners
// The ones that depend on the RippleLink will get setup later
// Make the canvas track the window size
this.trackWindowSize();
this.on("OtherClientUpdate", this.)
}
/**
@ -74,12 +83,16 @@ class BoardWindow extends EventEmitter
InitialAbsCursorPosition: this.cursorPosition
});
}).bind(this));
// Create a map to store information about other clients in
this.otherClients = new Map();
// Track the mouse position
// Keep the server up to date on our viewport and cursor position
this.viewportSyncer = new ViewportSyncer(this.rippleLink, this.cursorUpdateFrequency)
// RippleLink message bindings
// Handle other clients' state updates
this.rippleLink.on("ClientStates", this.handlePeerUpdates.bind(this));
}
/**
@ -151,6 +164,23 @@ class BoardWindow extends EventEmitter
handleCanvasMovement(event) {
this.viewportState = event; // Store the viewport information for later
}
handlePeerUpdates(message) {
// Update our knowledge about other clients
for (let otherClient of message) {
// If this client is new, emit an event about it
if(!this.otherClients.has(otherClient.Id))
this.emit("OtherClientConnect", otherClient);
else // If not, emit a normal update message about it
this.emit("OtherClientUpdate", otherClient);
// Store the information for later
this.otherClients.set(otherClient.Id, otherClient);
}
}
handleOtherClientUpdate(otherClientData) {
}
}
export default BoardWindow;

View file

@ -0,0 +1,56 @@
"use strict";
class CursorSyncer
{
constructor(inRippleLink, syncFrequency)
{
// The ripple link we should send the cursor updates down
this.rippleLink = inRippleLink;
// The target frequency in fps at we should send sursor updates.
this.cursorUpdateFrequency = syncFrequency;
// Register ourselves to start sending cursor updates once the ripple
// link connects
this.rippleLink.on("connect", this.setup.bind(this));
}
setup()
{
// The last time we sent a cursor update to the server.
this.lastCursorUpdate = 0;
document.addEventListener("mousemove", (function(event) {
this.cursorPosition = {
X: event.clientX,
Y: event.clientY
};
setTimeout((function() {
// Throttle the cursor updates we send to the server - a high
// update frequency here will just consume bandwidth and is only
// noticable if you have a good connection
if(+new Date() - this.lastCursorUpdate < 1 / this.cursorUpdateFrequency)
return false;
// Update the server on the mouse's position
this.sendCursorUpdate();
this.lastFrameStart = +new Date();
}).bind(this), 1 / this.cursorUpdateFrequency);
}).bind(this));
this.sendCursorUpdate();
}
sendCursorUpdate()
{
// Update the server on the mouse's position
this.rippleLink.send({
"event": "CursorPosition",
"AbsCursorPosition": this.cursorPosition
});
}
}
export default CursorSyncer;