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

Send cursor updates to the server.

This commit is contained in:
Starbeamrainbowlabs 2017-02-07 21:29:17 +00:00
parent 64e3a4db59
commit 18eb1abb11
4 changed files with 130 additions and 28 deletions

View file

@ -42,7 +42,8 @@ namespace Nibriboard.Client
private static readonly Dictionary<string, Type> messageEventTypes = new Dictionary<string, Type>()
{
["handshakeRequest"] = typeof(HandshakeRequestMessage)
["HandshakeRequest"] = typeof(HandshakeRequestMessage),
["CursorPosition"] = typeof(CursorPositionMessage)
};
/// <summary>
@ -92,7 +93,10 @@ namespace Nibriboard.Client
//Task.Run(async () => await onMessage(frame)).Wait();
};
// Store whether this NibriClient is still connected or not
client.ConnectionClosed += (WebSocket socket) => Connected = false;
client.ConnectionClosed += (WebSocket socket) => {
Connected = false;
Disconnected(this);
};
}
private async Task handleMessage(string frame)

View file

@ -7,6 +7,7 @@ window.panzoom = require("pan-zoom");
// Our files
import RippleLink from './RippleLink';
import CursorSyncer from './CursorSyncer';
import { get } from './Utilities';
class BoardWindow extends EventEmitter
@ -17,7 +18,9 @@ class BoardWindow extends EventEmitter
// The maximum target fps.
this.maxFps = 60;
// Setup the fps indicator in the corner
// The target fps at which we should send sursor updates.
this.cursorUpdateFrequency = 5;
// Setup the fps indicator in the top right corner
this.renderTimeIndicator = document.createElement("span");
this.renderTimeIndicator.innerHTML = "0ms";
document.querySelector(".fps").appendChild(this.renderTimeIndicator);
@ -50,8 +53,6 @@ class BoardWindow extends EventEmitter
// Make the canvas track the window size
this.trackWindowSize();
// Track the mouse position
this.trackMousePosition();
}
/**
@ -63,7 +64,7 @@ class BoardWindow extends EventEmitter
this.rippleLink.on("connect", (function(event) {
// Send the handshake request
this.rippleLink.send({
event: "handshakeRequest",
event: "HandshakeRequest",
InitialViewport: { // TODO: Add support for persisting this between sessions
X: 0,
Y: 0,
@ -74,6 +75,9 @@ class BoardWindow extends EventEmitter
});
}).bind(this));
// Track the mouse position
this.cursorSyncer = new CursorSyncer(this.rippleLink, this.cursorUpdateFrequency)
// RippleLink message bindings
}
@ -140,15 +144,6 @@ class BoardWindow extends EventEmitter
window.addEventListener("resize", this.matchWindowSize.bind(this));
}
trackMousePosition() {
document.addEventListener("mousemove", (function(event) {
this.cursorPosition = {
X: event.clientX,
Y: event.clientY
};
}).bind(this));
}
/**
* Handles events generated by pan-zoom, the package that handles the
* dragging and zooming of the whiteboard.

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;

View file

@ -87,6 +87,59 @@ class RippleLink extends EventEmitter$1
}
}
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
});
}
}
function get(u){return new Promise(function(r,t,a){a=new XMLHttpRequest();a.onload=function(b,c){b=a.status;c=a.response;if(b>199&&b<300){r(c);}else{t(c);}};a.open("GET",u,true);a.send(null);})}
// npm modules
@ -103,7 +156,9 @@ class BoardWindow extends EventEmitter
// The maximum target fps.
this.maxFps = 60;
// Setup the fps indicator in the corner
// The target fps at which we should send sursor updates.
this.cursorUpdateFrequency = 5;
// Setup the fps indicator in the top right corner
this.renderTimeIndicator = document.createElement("span");
this.renderTimeIndicator.innerHTML = "0ms";
document.querySelector(".fps").appendChild(this.renderTimeIndicator);
@ -136,8 +191,6 @@ class BoardWindow extends EventEmitter
// Make the canvas track the window size
this.trackWindowSize();
// Track the mouse position
this.trackMousePosition();
}
/**
@ -149,7 +202,7 @@ class BoardWindow extends EventEmitter
this.rippleLink.on("connect", (function(event) {
// Send the handshake request
this.rippleLink.send({
event: "handshakeRequest",
event: "HandshakeRequest",
InitialViewport: { // TODO: Add support for persisting this between sessions
X: 0,
Y: 0,
@ -160,6 +213,9 @@ class BoardWindow extends EventEmitter
});
}).bind(this));
// Track the mouse position
this.cursorSyncer = new CursorSyncer(this.rippleLink, this.cursorUpdateFrequency);
// RippleLink message bindings
}
@ -226,15 +282,6 @@ class BoardWindow extends EventEmitter
window.addEventListener("resize", this.matchWindowSize.bind(this));
}
trackMousePosition() {
document.addEventListener("mousemove", (function(event) {
this.cursorPosition = {
X: event.clientX,
Y: event.clientY
};
}).bind(this));
}
/**
* Handles events generated by pan-zoom, the package that handles the
* dragging and zooming of the whiteboard.