add close messages and clean up code
This commit is contained in:
parent
6b3751aff2
commit
13521f76d1
7 changed files with 74 additions and 13 deletions
|
@ -9,6 +9,24 @@ const { warn: experimentsWarn } = logger(["globalGatewayConnection", "Experiment
|
||||||
const globalGatewayConnection = new GatewayConnection(config.gatewayUrl);
|
const globalGatewayConnection = new GatewayConnection(config.gatewayUrl);
|
||||||
let currentlyReconnecting = false;
|
let currentlyReconnecting = false;
|
||||||
|
|
||||||
|
const wsCloseCodes = {
|
||||||
|
PAYLOAD_ERROR: [4001, "Error while handling payload"],
|
||||||
|
NOT_AUTHENTICATED: [4002, "Not authenticated"],
|
||||||
|
SERVER_DENIED_CONNECTION: [4003, "Server denied connection"],
|
||||||
|
AUTHENTICATION_ERROR: [4004, "Authentication error"],
|
||||||
|
TOO_MANY_SESSIONS: [4005, "Too many sessions"],
|
||||||
|
NOT_AUTHORIZED: [4006, "Not authorized"],
|
||||||
|
FLOODING: [4007, "Flooding"],
|
||||||
|
NO_PING: [4008, "No ping"],
|
||||||
|
};
|
||||||
|
const cancelReconnectionForCodes = [
|
||||||
|
wsCloseCodes.NOT_AUTHENTICATED[0],
|
||||||
|
wsCloseCodes.NOT_AUTHORIZED[0],
|
||||||
|
wsCloseCodes.SERVER_DENIED_CONNECTION[0],
|
||||||
|
wsCloseCodes.TOO_MANY_SESSIONS[0],
|
||||||
|
wsCloseCodes.FLOODING[0],
|
||||||
|
];
|
||||||
|
|
||||||
globalGatewayConnection.onopen = (sessionData) => {
|
globalGatewayConnection.onopen = (sessionData) => {
|
||||||
if (currentlyReconnecting) {
|
if (currentlyReconnecting) {
|
||||||
store.dispatch({ type: 'application/updatebannertext', text: undefined });
|
store.dispatch({ type: 'application/updatebannertext', text: undefined });
|
||||||
|
@ -48,7 +66,19 @@ const dispatchConnectionClose = () => {
|
||||||
globalGatewayConnection.onclose = function(code) {
|
globalGatewayConnection.onclose = function(code) {
|
||||||
currentlyReconnecting = true; // NOTE: no
|
currentlyReconnecting = true; // NOTE: no
|
||||||
dispatchConnectionClose();
|
dispatchConnectionClose();
|
||||||
if (code === 4004) return;
|
if (code === wsCloseCodes.AUTHENTICATION_ERROR[0]) return;
|
||||||
|
if (cancelReconnectionForCodes.includes(code)) {
|
||||||
|
store.dispatch({
|
||||||
|
type: "application/updatefullscreenmessage",
|
||||||
|
fullscreenMessage: {
|
||||||
|
content: `you have lost connection and a reconnect may not be possible at this time - disconnect code: ${code}`,
|
||||||
|
title: "an error has occurred",
|
||||||
|
glyph: "?!",
|
||||||
|
enabled: true
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (globalGatewayConnection.ws.readyState === 0 || globalGatewayConnection.ws.readyState === 1) return;
|
if (globalGatewayConnection.ws.readyState === 0 || globalGatewayConnection.ws.readyState === 1) return;
|
||||||
log("Attempting reconnection...");
|
log("Attempting reconnection...");
|
||||||
|
|
|
@ -21,8 +21,8 @@ function ChannelList({ selectedChannelId, channels }) {
|
||||||
|
|
||||||
const stateToProps = (state) => {
|
const stateToProps = (state) => {
|
||||||
return {
|
return {
|
||||||
selectedChannelId: state?.selectedChannelId,
|
selectedChannelId: state.selectedChannelId,
|
||||||
channels: state?.channels
|
channels: state.channels
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -74,9 +74,9 @@ const stateToProps = (state, ownProps) => {
|
||||||
const channelId = ownProps.channelId;
|
const channelId = ownProps.channelId;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
channel: state?.channels?.find(x => x._id === channelId),
|
channel: state.channels?.find(x => x._id === channelId),
|
||||||
messages: state?.messages[channelId] || [],
|
messages: state.messages[channelId] || [],
|
||||||
channelPresenceClientList: state?.channelPresenceClientList,
|
channelPresenceClientList: state.channelPresenceClientList,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -9,8 +9,9 @@ import { useEffect, useState } from 'react';
|
||||||
import { useDispatch, connect } from 'react-redux'
|
import { useDispatch, connect } from 'react-redux'
|
||||||
import { BrowserRouter, Switch, Route } from 'react-router-dom';
|
import { BrowserRouter, Switch, Route } from 'react-router-dom';
|
||||||
import LoggedInMount from './LoggedInMount';
|
import LoggedInMount from './LoggedInMount';
|
||||||
|
import FullMessage from '../UI/FullMessage';
|
||||||
|
|
||||||
function App({ user }) {
|
function App({ user, fullscreenMessage }) {
|
||||||
const [ notificationText ] = useState('');
|
const [ notificationText ] = useState('');
|
||||||
const [ hasError ] = useState(false);
|
const [ hasError ] = useState(false);
|
||||||
|
|
||||||
|
@ -28,6 +29,14 @@ function App({ user }) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (fullscreenMessage && fullscreenMessage.enabled) {
|
||||||
|
return (
|
||||||
|
<div id="root-container" className="main-display">
|
||||||
|
<FullMessage glyph={ fullscreenMessage.glyph } title={ fullscreenMessage.title } content={ fullscreenMessage.content } />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
if (!hasError) {
|
if (!hasError) {
|
||||||
return (
|
return (
|
||||||
<div id="root-container" className="main-display">
|
<div id="root-container" className="main-display">
|
||||||
|
@ -61,7 +70,8 @@ function App({ user }) {
|
||||||
|
|
||||||
const stateToProps = (state) => {
|
const stateToProps = (state) => {
|
||||||
return {
|
return {
|
||||||
user: state?.user
|
user: state.user,
|
||||||
|
fullscreenMessage: state.fullscreenMessage
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
11
bfrontend/src/Components/UI/FullMessage.js
Normal file
11
bfrontend/src/Components/UI/FullMessage.js
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
export default function FullMessage({ glyph, title, content }) {
|
||||||
|
return (<div className="center grow col-flex">
|
||||||
|
<div className="greeter-logo">
|
||||||
|
<span className="greeter-logo-text">{ glyph }</span>
|
||||||
|
</div>
|
||||||
|
<span className="greeter-branding-name">{ title }</span>
|
||||||
|
<div className="center">
|
||||||
|
{ content }
|
||||||
|
</div>
|
||||||
|
</div>)
|
||||||
|
}
|
|
@ -20,7 +20,7 @@ function Sidebar({ user }) {
|
||||||
|
|
||||||
const stateToProps = (state) => {
|
const stateToProps = (state) => {
|
||||||
return {
|
return {
|
||||||
user: state?.user
|
user: state.user
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -2,15 +2,18 @@ import { createStore } from 'redux';
|
||||||
|
|
||||||
const intitialState = {
|
const intitialState = {
|
||||||
user: null,
|
user: null,
|
||||||
|
|
||||||
channels: null,
|
channels: null,
|
||||||
|
|
||||||
gateway: { isConnected: false },
|
gateway: { isConnected: false },
|
||||||
messages: {},
|
messages: {},
|
||||||
channelPresenceClientList: {},
|
channelPresenceClientList: {},
|
||||||
gradientBannerNotificationText: undefined,
|
gradientBannerNotificationText: undefined,
|
||||||
|
selectedChannelId: undefined,
|
||||||
selectedChannelId: undefined
|
fullscreenMessage: {
|
||||||
|
enabled: false,
|
||||||
|
glyph: "",
|
||||||
|
title: "",
|
||||||
|
content: ""
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const reducer = (state = intitialState, payload) => {
|
const reducer = (state = intitialState, payload) => {
|
||||||
|
@ -79,6 +82,13 @@ const reducer = (state = intitialState, payload) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
case "application/updatefullscreenmessage": {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
fullscreenMessage: payload.fullscreenMessage
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
default: {
|
default: {
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue