Guard against duplicate websocket connections. Closes #2773

web/components/stores/ClientConfigStore.tsx

@@ -240,6 +240,7 @@ export const ClientConfigStore: FC = () => {
     const savedAccessToken = getLocalStorage(ACCESS_TOKEN_KEY);
     if (savedAccessToken) {
       setAccessToken(savedAccessToken);
+
       return;
     }
 
@@ -267,6 +268,7 @@ export const ClientConfigStore: FC = () => {
   const resetAndReAuth = () => {
     setLocalStorage(ACCESS_TOKEN_KEY, '');
     setAccessToken(null);
+    ws?.shutdown();
     handleUserRegistration();
   };
 
@@ -358,6 +360,12 @@ export const ClientConfigStore: FC = () => {
 
   const startChat = async () => {
     try {
+      if (ws) {
+        ws?.shutdown();
+        setWebsocketService(null);
+        ws = null;
+      }
+
       const { socketHostOverride } = clientConfig;
 
       // Get a copy of the browser location without #fragments.
@@ -403,9 +411,23 @@ export const ClientConfigStore: FC = () => {
   }, []);
 
   useEffect(() => {
-    if (!clientConfig.chatDisabled && accessToken && hasLoadedConfig) {
-      startChat();
+    if (clientConfig.chatDisabled) {
+      return;
     }
+
+    if (!accessToken) {
+      return;
+    }
+
+    if (!hasLoadedConfig) {
+      return;
+    }
+
+    if (ws) {
+      return;
+    }
+
+    startChat();
   }, [hasLoadedConfig, accessToken]);
 
   useEffect(() => {

web/services/websocket-service.ts

@@ -43,6 +43,11 @@ export default class WebsocketService {
     if (!this.host) {
       return;
     }
+
+    if (this.isShutdown) {
+      return;
+    }
+
     const url = new URL(this.host);
     url.protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     url.pathname = '/ws';
@@ -76,6 +81,10 @@ export default class WebsocketService {
   }
 
   scheduleReconnect() {
+    if (this.isShutdown) {
+      return;
+    }
+
     if (this.websocketReconnectTimer) {
       clearTimeout(this.websocketReconnectTimer);
     }