jketreno/peddlers-of-ketran
1
0
Fork 0
Code Issues 42 Activity

Added WebSocket reconnect with keepalive

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-02-28 19:59:58 -08:00
parent 3f97e66f46
commit 4024286979
3 changed files with 28 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/Table.css
View File

@ -11,11 +11,11 @@
.Loading { .Loading {
position: absolute; position: absolute;
top: calc(50vh - 1.5em); top: 1em;
left: calc(30vw - 1.5em); right: 31em;
width: 3em !important; width: 3em !important;
height: 3em !important; height: 3em !important;
z-index: 10000; z-index: 10010;
} }
.NoNetwork { .NoNetwork {

32
client/src/Table.js
View File

@ -868,10 +868,7 @@ class Table extends React.Component {
}, 5000); }, 5000);
} }
componentDidMount() { connectWebSocket() {
this.start = new Date();
console.log(`Mounted: ${base}`);
let loc = window.location, new_uri; let loc = window.location, new_uri;
if (loc.protocol === "https:") { if (loc.protocol === "https:") {
new_uri = "wss"; new_uri = "wss";
@ -879,6 +876,8 @@ class Table extends React.Component {
new_uri = "ws"; new_uri = "ws";
} }
new_uri = `${new_uri}://${loc.host}${base}/api/v1/games/ws/${this.id}`; new_uri = `${new_uri}://${loc.host}${base}/api/v1/games/ws/${this.id}`;
console.log(`Attempting WebSocket connection to ${new_uri}`);
this.ws = new WebSocket(new_uri); this.ws = new WebSocket(new_uri);
this.ws.onopen = (event) => { this.ws.onopen = (event) => {
@ -919,12 +918,31 @@ class Table extends React.Component {
this.ws.onerror = (event) => { this.ws.onerror = (event) => {
this.setState({ error: event.message }); this.setState({ error: event.message });
console.error(`WebSocket error:`, event); console.error(`WebSocket error:`, event);
if (!this.websocketReconnect) {
this.websocketReconnect = setTimeout(() => {
delete this.websocketReconnect;
this.connectWebSocket();
}, 1000);
}
}; };
this.ws.onclose = (event) => { this.ws.onclose = (event) => {
this.setState({ noNetowrk: true, error: event.message });
console.error(`WebSocket close:`, event); console.error(`WebSocket close:`, event);
this.setState({ noNetowrk: true, error: event.message });
if (!this.websocketReconnect) {
this.websocketReconnect = setTimeout(() => {
delete this.websocketReconnect;
this.connectWebSocket();
}, 1000);
}
}; };
}
componentDidMount() {
this.start = new Date();
console.log(`Mounted: ${base}`);
this.connectWebSocket();
const params = {}; const params = {};
if (this.id) { if (this.id) {
@ -1050,9 +1068,7 @@ class Table extends React.Component {
return ( return (
<div className="Table"> <div className="Table">
{ this.state.loading > 0 && { this.state.loading > 0 && <CircularProgress className='Loading'/> }
<CircularProgress className='Loading'/>
}
{ this.state.noNetwork && <div className='NoNetwork'/> } { this.state.noNetwork && <div className='NoNetwork'/> }

4
server/routes/games.js
View File

@ -743,9 +743,7 @@ const setPlayerName = (game, session, name) => {
const tmp = game.sessions[key]; const tmp = game.sessions[key];
if (tmp.name && tmp.name.toLowerCase() === name.toLowerCase()) { if (tmp.name && tmp.name.toLowerCase() === name.toLowerCase()) {
if (!tmp.player || (Date.now() - tmp.player.lastActive) > 60000) { if (!tmp.player || (Date.now() - tmp.player.lastActive) > 60000) {
session.color = tmp.color; Object.assign(session, tmp);
session.player = tmp.player;
session.initialSettlement = tmp.initialSettlement;
delete game.sessions[key]; delete game.sessions[key];
} else { } else {
return `${name} is already taken and has been active in the last minute.`; return `${name} is already taken and has been active in the last minute.`;