Browse Source
* Websocket refactor: Pull it out of the UI and support listeners * Changes required for Safari to be happy with modules * Move to explicit ad-hoc callback registrationpull/98/head
Gabe Kangas
5 years ago
committed by
GitHub
7 changed files with 246 additions and 139 deletions
@ -0,0 +1,11 @@
@@ -0,0 +1,11 @@
|
||||
/** |
||||
* These are the types of messages that we can handle with the websocket. |
||||
* Mostly used by `websocket.js` but if other components need to handle |
||||
* different types then it can import this file. |
||||
*/ |
||||
export default { |
||||
CHAT: 'CHAT', |
||||
PING: 'PING', |
||||
NAME_CHANGE: 'NAME_CHANGE', |
||||
PONG: 'PONG' |
||||
} |
||||
@ -0,0 +1,142 @@
@@ -0,0 +1,142 @@
|
||||
import SOCKET_MESSAGE_TYPES from './chat/socketMessageTypes.js'; |
||||
|
||||
const LOCAL_TEST = window.location.href.indexOf('localhost:') >= 0; |
||||
const URL_WEBSOCKET = LOCAL_TEST |
||||
? 'wss://goth.land/entry' |
||||
: `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/entry`; |
||||
|
||||
const TIMER_WEBSOCKET_RECONNECT = 5000; // ms
|
||||
|
||||
const CALLBACKS = { |
||||
RAW_WEBSOCKET_MESSAGE_RECEIVED: 'rawWebsocketMessageReceived', |
||||
WEBSOCKET_CONNECTED: 'websocketConnected', |
||||
WEBSOCKET_DISCONNECTED: 'websocketDisconnected', |
||||
} |
||||
|
||||
class Websocket { |
||||
|
||||
constructor() { |
||||
this.websocket = null; |
||||
this.websocketReconnectTimer = null; |
||||
|
||||
this.websocketConnectedListeners = []; |
||||
this.websocketDisconnectListeners = []; |
||||
this.rawMessageListeners = []; |
||||
|
||||
this.send = this.send.bind(this); |
||||
|
||||
const ws = new WebSocket(URL_WEBSOCKET); |
||||
ws.onopen = this.onOpen.bind(this); |
||||
ws.onclose = this.onClose.bind(this); |
||||
ws.onerror = this.onError.bind(this); |
||||
ws.onmessage = this.onMessage.bind(this); |
||||
|
||||
this.websocket = ws; |
||||
} |
||||
|
||||
// Other components should register for websocket callbacks.
|
||||
addListener(type, callback) { |
||||
if (type == CALLBACKS.WEBSOCKET_CONNECTED) { |
||||
this.websocketConnectedListeners.push(callback); |
||||
} else if (type == CALLBACKS.WEBSOCKET_DISCONNECTED) { |
||||
this.websocketDisconnectListeners.push(callback); |
||||
} else if (type == CALLBACKS.RAW_WEBSOCKET_MESSAGE_RECEIVED) { |
||||
this.rawMessageListeners.push(callback); |
||||
} |
||||
} |
||||
|
||||
|
||||
// Interface with other components
|
||||
|
||||
// Outbound: Other components can pass an object to `send`.
|
||||
send(message) { |
||||
// Sanity check that what we're sending is a valid type.
|
||||
if (!message.type || !SOCKET_MESSAGE_TYPES[message.type]) { |
||||
console.warn(`Outbound message: Unknown socket message type: "${message.type}" sent.`); |
||||
} |
||||
|
||||
const messageJSON = JSON.stringify(message); |
||||
this.websocket.send(messageJSON); |
||||
} |
||||
|
||||
// Private methods
|
||||
|
||||
// Fire the callbacks of the listeners.
|
||||
|
||||
notifyWebsocketConnectedListeners(message) { |
||||
this.websocketConnectedListeners.forEach(function (callback) { |
||||
callback(message); |
||||
}); |
||||
} |
||||
|
||||
notifyWebsocketDisconnectedListeners(message) { |
||||
this.websocketDisconnectListeners.forEach(function (callback) { |
||||
callback(message); |
||||
}); |
||||
} |
||||
|
||||
|
||||
notifyRawMessageListeners(message) { |
||||
this.rawMessageListeners.forEach(function (callback) { |
||||
callback(message); |
||||
}); |
||||
} |
||||
|
||||
// Internal websocket callbacks
|
||||
|
||||
onOpen(e) { |
||||
if (this.websocketReconnectTimer) { |
||||
clearTimeout(this.websocketReconnectTimer); |
||||
} |
||||
|
||||
this.notifyWebsocketConnectedListeners(); |
||||
} |
||||
|
||||
onClose(e) { |
||||
// connection closed, discard old websocket and create a new one in 5s
|
||||
this.websocket = null; |
||||
this.notifyWebsocketDisconnectedListeners(); |
||||
this.handleNetworkingError('Websocket closed.'); |
||||
this.websocketReconnectTimer = setTimeout(this.setupWebsocket, TIMER_WEBSOCKET_RECONNECT); |
||||
} |
||||
|
||||
// On ws error just close the socket and let it re-connect again for now.
|
||||
onError(e) { |
||||
this.handleNetworkingError(`Socket error: ${JSON.parse(e)}`); |
||||
this.websocket.close(); |
||||
} |
||||
|
||||
/* |
||||
onMessage is fired when an inbound object comes across the websocket. |
||||
If the message is of type `PING` we send a `PONG` back and do not |
||||
pass it along to listeners. |
||||
*/ |
||||
onMessage(e) { |
||||
try { |
||||
var model = JSON.parse(e.data); |
||||
} catch (e) { |
||||
console.log(e) |
||||
} |
||||
|
||||
// Send PONGs
|
||||
if (model.type === SOCKET_MESSAGE_TYPES.PING) { |
||||
this.sendPong(); |
||||
return; |
||||
} |
||||
|
||||
// Notify any of the listeners via the raw socket message callback.
|
||||
this.notifyRawMessageListeners(model); |
||||
} |
||||
|
||||
// Reply to a PING as a keep alive.
|
||||
sendPong() { |
||||
const pong = { type: SOCKET_MESSAGE_TYPES.PONG }; |
||||
this.send(pong); |
||||
} |
||||
|
||||
handleNetworkingError(error) { |
||||
console.error(`Websocket Error: ${error}`) |
||||
}; |
||||
} |
||||
|
||||
export default Websocket; |
||||
Loading…
Reference in new issue