Fix duplicate events + reconnect issues (#8)
* Fix duplicate display events * oops * Fix everything else
This commit is contained in:
parent
af48aa7e19
commit
daf8541ced
1 changed files with 40 additions and 18 deletions
44
src/index.js
44
src/index.js
|
@ -63,6 +63,18 @@ const forceVotePanel = document.getElementById("forceVotePanel");
|
||||||
// needed to scroll to bottom
|
// needed to scroll to bottom
|
||||||
const chatListDiv = document.querySelector(".chat-table");
|
const chatListDiv = document.querySelector(".chat-table");
|
||||||
|
|
||||||
|
let events = new Map();
|
||||||
|
|
||||||
|
function addListener(element, event, id, callback) {
|
||||||
|
events.set(id, callback);
|
||||||
|
element.addEventListener(event, callback, {capture: true});
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeListener(element, event, id) {
|
||||||
|
element.removeEventListener(event, events.get(id), true);
|
||||||
|
events.delete(id);
|
||||||
|
}
|
||||||
|
|
||||||
class CollabVMClient {
|
class CollabVMClient {
|
||||||
eventemitter = createNanoEvents();
|
eventemitter = createNanoEvents();
|
||||||
socket;
|
socket;
|
||||||
|
@ -71,6 +83,7 @@ class CollabVMClient {
|
||||||
#captcha = false;
|
#captcha = false;
|
||||||
captchaToken;
|
captchaToken;
|
||||||
isMainSocket;
|
isMainSocket;
|
||||||
|
shouldReconnect = true;
|
||||||
constructor(url, isMainSocket) {
|
constructor(url, isMainSocket) {
|
||||||
this.#url = url;
|
this.#url = url;
|
||||||
this.isMainSocket = isMainSocket;
|
this.isMainSocket = isMainSocket;
|
||||||
|
@ -91,15 +104,17 @@ class CollabVMClient {
|
||||||
}
|
}
|
||||||
#onClose() {
|
#onClose() {
|
||||||
cleanup();
|
cleanup();
|
||||||
|
if(this.shouldReconnect) {
|
||||||
setTimeout(async () => {
|
setTimeout(async () => {
|
||||||
try {
|
try {
|
||||||
await this.connect();
|
connected = await this.connect(this.captchaToken);
|
||||||
} catch {
|
} catch {
|
||||||
this.#onClose();
|
this.#onClose();
|
||||||
}
|
}
|
||||||
this.connectToVM(this.node);
|
this.connectToVM(this.node);
|
||||||
}, 2000);
|
}, 2000);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
disconnect() {
|
disconnect() {
|
||||||
this.socket.send(guacutils.encode(["disconnect"]));
|
this.socket.send(guacutils.encode(["disconnect"]));
|
||||||
this.socket.close();
|
this.socket.close();
|
||||||
|
@ -721,6 +736,7 @@ function returnToVMList() {
|
||||||
if(!connected) return;
|
if(!connected) return;
|
||||||
connected = false;
|
connected = false;
|
||||||
vm.disconnect();
|
vm.disconnect();
|
||||||
|
vm.shouldReconnect = false;
|
||||||
vmview.style.display = "none";
|
vmview.style.display = "none";
|
||||||
vmlist.style.display = "block";
|
vmlist.style.display = "block";
|
||||||
}
|
}
|
||||||
|
@ -740,16 +756,14 @@ async function openVM(url, node) {
|
||||||
await vm.connectToVM(node);
|
await vm.connectToVM(node);
|
||||||
vmlist.style.display = "none";
|
vmlist.style.display = "none";
|
||||||
vmview.style.display = "block";
|
vmview.style.display = "block";
|
||||||
display.addEventListener('mousemove', (e) => vm.mouseevent(e, undefined), {capture: true})
|
addListener(display, 'mousemove', 'displayMove', (e) => vm.mouseevent(e, undefined));
|
||||||
display.addEventListener('mousedown', (e) => vm.mouseevent(e, true), {capture: true});
|
addListener(display, 'mousedown', 'displayDown', (e) => vm.mouseevent(e, true));
|
||||||
display.addEventListener('mouseup', (e) => vm.mouseevent(e, false), {capture: true});
|
addListener(display, 'mouseup', 'displayUp', (e) => vm.mouseevent(e, false));
|
||||||
display.addEventListener('wheel', (e) => {vm.mousewheelhandler(e);e.preventDefault();return false;}, {capture: true});
|
addListener(display, 'wheel', 'displayWheel', (e) => {vm.mousewheelhandler(e);e.preventDefault();return false;}); // BUG: mousewheelhandler seems to be broken!
|
||||||
display.addEventListener('contextmenu', (e) => e.preventDefault());
|
addListener(display, 'contextmenu', 'displayContextMenu', (e) => e.preventDefault());
|
||||||
display.addEventListener('click', () => {
|
addListener(display, 'click', 'displayClick', () => { if (turn === -1) vm.turn(); });
|
||||||
if (turn === -1) vm.turn();
|
addListener(display, 'keydown', 'displayKeyDown', (e) => vm.keyevent(e, true));
|
||||||
}, {capture: true});
|
addListener(display, 'keyup', 'displayKeyUp', (e) => vm.keyevent(e, false));
|
||||||
display.addEventListener('keydown', (e) => vm.keyevent(e, true), {capture: true});
|
|
||||||
display.addEventListener('keyup', (e) => vm.keyevent(e, false), {capture: true});
|
|
||||||
}
|
}
|
||||||
function screenshotVM() {
|
function screenshotVM() {
|
||||||
return new Promise((res, rej) => {
|
return new Promise((res, rej) => {
|
||||||
|
@ -778,6 +792,14 @@ function cleanup() {
|
||||||
usernameSpan.classList = "input-group-text bg-dark text-light";
|
usernameSpan.classList = "input-group-text bg-dark text-light";
|
||||||
display.height = 0;
|
display.height = 0;
|
||||||
display.width = 0;
|
display.width = 0;
|
||||||
|
removeListener(display, 'mousemove', 'displayMove');
|
||||||
|
removeListener(display, 'mousedown', 'displayDown');
|
||||||
|
removeListener(display, 'mouseup', 'displayUp');
|
||||||
|
removeListener(display, 'wheel', 'displayWheel');
|
||||||
|
removeListener(display, 'contextmenu', 'displayContextMenu');
|
||||||
|
removeListener(display, 'click', 'displayClick');
|
||||||
|
removeListener(display, 'keydown', 'displayKeyDown');
|
||||||
|
removeListener(display, 'keyup', 'displayKeyUp');
|
||||||
}
|
}
|
||||||
buttons.home.addEventListener('click', async () => returnToVMList());
|
buttons.home.addEventListener('click', async () => returnToVMList());
|
||||||
buttons.screenshot.addEventListener('click', async () => {
|
buttons.screenshot.addEventListener('click', async () => {
|
||||||
|
|
Loading…
Reference in a new issue