Merge pull request #2 from TheRdMelon/bugfixes
chunk loading fix at load due to websocket issue
This commit is contained in:
commit
37f80f6266
|
@ -3,7 +3,6 @@
|
|||
* @flow
|
||||
*/
|
||||
|
||||
|
||||
import EventEmitter from 'events';
|
||||
|
||||
import CoolDownPacket from './packets/CoolDownPacket';
|
||||
|
@ -16,7 +15,6 @@ import DeRegisterChunk from './packets/DeRegisterChunk';
|
|||
import RequestChatHistory from './packets/RequestChatHistory';
|
||||
import ChangedMe from './packets/ChangedMe';
|
||||
|
||||
|
||||
const chunks = [];
|
||||
|
||||
class ProtocolClient extends EventEmitter {
|
||||
|
@ -26,23 +24,30 @@ class ProtocolClient extends EventEmitter {
|
|||
canvasId: number;
|
||||
timeConnected: number;
|
||||
isConnected: number;
|
||||
isConnecting: boolean;
|
||||
msgQueue: Array;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
console.log('creating ProtocolClient');
|
||||
this.isConnecting = false;
|
||||
this.isConnected = false;
|
||||
this.ws = null;
|
||||
this.name = null;
|
||||
this.canvasId = null;
|
||||
this.msgQueue = [];
|
||||
}
|
||||
|
||||
async connect() {
|
||||
this.isConnecting = true;
|
||||
if (this.ws) {
|
||||
console.log('WebSocket already open, not starting');
|
||||
}
|
||||
this.timeConnected = Date.now();
|
||||
const protocol = (location.protocol === 'https:') ? 'wss:' : 'ws:';
|
||||
const url = `${protocol}//${location.hostname}${location.port ? `:${location.port}` : ''}/ws`;
|
||||
const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const url = `${protocol}//${location.hostname}${
|
||||
location.port ? `:${location.port}` : ''
|
||||
}/ws`;
|
||||
this.ws = new WebSocket(url);
|
||||
this.ws.binaryType = 'arraybuffer';
|
||||
this.ws.onopen = this.onOpen.bind(this);
|
||||
|
@ -51,7 +56,26 @@ class ProtocolClient extends EventEmitter {
|
|||
this.ws.onerror = this.onError.bind(this);
|
||||
}
|
||||
|
||||
sendWhenReady(msg) {
|
||||
if (this.isConnected) {
|
||||
this.ws.send(msg);
|
||||
} else {
|
||||
console.log('Tried sending message when websocket was closed!');
|
||||
this.msgQueue.push(msg);
|
||||
if (!this.isConnecting) {
|
||||
this.connect();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
processMsgQueue() {
|
||||
while (this.msgQueue.length > 0) {
|
||||
this.sendWhenReady(this.msgQueue.shift());
|
||||
}
|
||||
}
|
||||
|
||||
onOpen() {
|
||||
this.isConnecting = false;
|
||||
this.isConnected = true;
|
||||
this.emit('open', {});
|
||||
this.requestChatHistory();
|
||||
|
@ -60,6 +84,7 @@ class ProtocolClient extends EventEmitter {
|
|||
if (this.canvasId !== null) {
|
||||
this.ws.send(RegisterCanvas.dehydrate(this.canvasId));
|
||||
}
|
||||
this.processMsgQueue();
|
||||
}
|
||||
|
||||
onError(err) {
|
||||
|
@ -80,9 +105,7 @@ class ProtocolClient extends EventEmitter {
|
|||
}
|
||||
console.log('Notify websocket server that we changed canvas');
|
||||
this.canvasId = canvasId;
|
||||
if (this.isConnected) {
|
||||
this.ws.send(RegisterCanvas.dehydrate(this.canvasId));
|
||||
}
|
||||
this.sendWhenReady(RegisterCanvas.dehydrate(this.canvasId));
|
||||
}
|
||||
|
||||
registerChunk(cell) {
|
||||
|
@ -119,7 +142,9 @@ class ProtocolClient extends EventEmitter {
|
|||
this.onBinaryMessage(message);
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(`An error occured while parsing websocket message ${message}`);
|
||||
console.log(
|
||||
`An error occured while parsing websocket message ${message}`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -174,9 +199,11 @@ class ProtocolClient extends EventEmitter {
|
|||
this.ws = null;
|
||||
this.isConnected = false;
|
||||
// reconnect in 1s if last connect was longer than 7s ago, else 5s
|
||||
const timeout = (this.timeConnected < Date.now() - 7000) ? 1000 : 5000;
|
||||
console.warn('Socket is closed. '
|
||||
+ `Reconnect will be attempted in ${timeout} ms.`, e.reason);
|
||||
const timeout = this.timeConnected < Date.now() - 7000 ? 1000 : 5000;
|
||||
console.warn(
|
||||
'Socket is closed. ' + `Reconnect will be attempted in ${timeout} ms.`,
|
||||
e.reason,
|
||||
);
|
||||
|
||||
setTimeout(() => this.connect(), 5000);
|
||||
}
|
||||
|
@ -187,6 +214,7 @@ class ProtocolClient extends EventEmitter {
|
|||
|
||||
reconnect() {
|
||||
if (this.isConnected) {
|
||||
this.isConnected = false;
|
||||
console.log('Restarting WebSocket');
|
||||
this.ws.onclose = null;
|
||||
this.ws.onmessage = null;
|
||||
|
|
|
@ -6,9 +6,10 @@
|
|||
|
||||
import ProtocolClient from '../socket/ProtocolClient';
|
||||
|
||||
export default (store) => (next) => (action) => {
|
||||
export default store => next => action => {
|
||||
switch (action.type) {
|
||||
case 'RECEIVE_BIG_CHUNK': {
|
||||
case 'RECEIVE_BIG_CHUNK':
|
||||
case 'RECEIVE_BIG_CHUNK_FAILURE': {
|
||||
const [, cx, cy] = action.center;
|
||||
ProtocolClient.registerChunk([cx, cy]);
|
||||
break;
|
||||
|
@ -27,7 +28,7 @@ export default (store) => (next) => (action) => {
|
|||
}
|
||||
|
||||
default:
|
||||
// nothing
|
||||
// nothing
|
||||
}
|
||||
|
||||
const ret = next(action);
|
||||
|
@ -44,7 +45,7 @@ export default (store) => (next) => (action) => {
|
|||
}
|
||||
|
||||
default:
|
||||
// nothing
|
||||
// nothing
|
||||
}
|
||||
|
||||
return ret;
|
||||
|
|
Loading…
Reference in New Issue
Block a user