don't endlessly poll websocket when disconnected due to suspension (#5464)

Author: DaneEveritt

resources/scripts/components/server/WebsocketHandler.tsx

@@ -34,6 +34,9 @@ export default () => {
 
         socket.on('auth success', () => setConnectionState(true));
         socket.on('SOCKET_CLOSE', () => setConnectionState(false));
+        socket.on('SOCKET_CONNECT_ERROR', () => {
+            setError('Failed to connect to websocket instance after multiple attempts: try refreshing the page.');
+        });
         socket.on('SOCKET_ERROR', () => {
             setError('connecting');
             setConnectionState(false);

resources/scripts/plugins/Websocket.ts

@@ -2,12 +2,6 @@ import Sockette from 'sockette';
 import { EventEmitter } from 'events';
 
 export class Websocket extends EventEmitter {
-    // Timer instance for this socket.
-    private timer: any = null;
-
-    // The backoff for the timer, in milliseconds.
-    private backoff = 5000;
-
     // The socket instance being tracked.
     private socket: Sockette | null = null;
 
@@ -26,6 +20,8 @@ export class Websocket extends EventEmitter {
         this.url = url;
 
         this.socket = new Sockette(`${this.url}`, {
+            timeout: 1000,
+            maxAttempts: 20,
             onmessage: (e) => {
                 try {
                     const { event, args } = JSON.parse(e.data);
@@ -35,30 +31,29 @@ export class Websocket extends EventEmitter {
                 }
             },
             onopen: () => {
-                // Clear the timers, we managed to connect just fine.
-                this.timer && clearTimeout(this.timer);
-                this.backoff = 5000;
-
                 this.emit('SOCKET_OPEN');
                 this.authenticate();
             },
             onreconnect: () => {
-                this.emit('SOCKET_RECONNECT');
-                this.authenticate();
+                // We return code 4409 from Wings when a server is suspended. We've
+                // gone ahead and reserved 4400 as well here for future expansion without
+                // having to loop back around.
+                //
+                // If either of those codes is returned go ahead and abort here. Unfortunately
+                // the underlying sockette logic always calls reconnect for any code that isn't
+                // 1000/1001/1003, which is painful but we can just stop the flow here.
+                // @ts-expect-error code is actually present here.
+                if (evt.code === 4409 || evt.code === 4400) {
+                    this.close(1000);
+                } else {
+                    this.emit('SOCKET_RECONNECT');
+                }
             },
             onclose: () => this.emit('SOCKET_CLOSE'),
             onerror: (error) => this.emit('SOCKET_ERROR', error),
+            onmaximum: () => this.emit('SOCKET_CONNECT_ERROR'),
         });
 
-        this.timer = setTimeout(() => {
-            this.backoff = this.backoff + 2500 >= 20000 ? 20000 : this.backoff + 2500;
-            this.socket && this.socket.close();
-            clearTimeout(this.timer);
-
-            // Re-attempt connecting to the socket.
-            this.connect(url);
-        }, this.backoff);
-
         return this;
     }
 
@@ -83,24 +78,18 @@ export class Websocket extends EventEmitter {
     close(code?: number, reason?: string) {
         this.url = null;
         this.token = '';
-        this.socket && this.socket.close(code, reason);
+        this.socket?.close(code, reason);
     }
 
     open() {
-        this.socket && this.socket.open();
+        this.socket?.open();
     }
 
     reconnect() {
-        this.socket && this.socket.reconnect();
+        this.socket?.reconnect();
     }
 
     send(event: string, payload?: string | string[]) {
-        this.socket &&
-            this.socket.send(
-                JSON.stringify({
-                    event,
-                    args: Array.isArray(payload) ? payload : [payload],
-                })
-            );
+        this.socket?.json({ event, args: Array.isArray(payload) ? payload : [payload] });
     }
 }