Add connect timeout

webAO/client.ts

@@ -98,6 +98,14 @@ fpPromise
 
 export const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
 
+export enum clientState {
+    NotConnected,
+    // Should be set once the client has established a connection
+    Connected,
+    // Should be set once the client has joined the server (after handshake)
+    Joined
+}
+
 export let lastICMessageTime = new Date(0);
 export const setLastICMessageTime = (val: Date) => {
     lastICMessageTime = val
@@ -129,12 +137,14 @@ class Client extends EventEmitter {
     viewport: Viewport;
     partial_packet: boolean;
     temp_packet: string;
+    state: clientState;
     connect: () => void;
     loadResources: () => void
     isLowMemory: () => void
     constructor(connectionString: string) {
         super();
 
+        this.state = clientState.NotConnected;
         this.connect = () => {
             this.on("open", this.onOpen.bind(this));
             this.on("close", this.onClose.bind(this));
@@ -147,6 +157,14 @@ class Client extends EventEmitter {
                 this.serv.addEventListener("close", this.emit.bind(this, "close"));
                 this.serv.addEventListener("message", this.emit.bind(this, "message"));
                 this.serv.addEventListener("error", this.emit.bind(this, "error"));
+
+                // If the client is still not connected 5 seconds after attempting to join
+                // It's fair to assume that the server is not reachable
+                setTimeout(() => {
+                    if (this.state === clientState.NotConnected) {
+                        this.serv.close();
+                    }
+                }, 5000);
             } else {
                 this.joinServer();
             }
@@ -227,6 +245,7 @@ class Client extends EventEmitter {
    * Triggered when a connection is established to the server.
    */
     onOpen(_e: Event) {
+        client.state = clientState.Connected;
         client.joinServer();
     }
 
@@ -235,6 +254,7 @@ class Client extends EventEmitter {
    * @param {CloseEvent} e
    */
     onClose(e: CloseEvent) {
+        client.state = clientState.NotConnected;
         console.error(`The connection was closed: ${e.reason} (${e.code})`);
         if (extrafeatures.length == 0 && banned === false) {
             document.getElementById("client_errortext").textContent =
@@ -315,7 +335,9 @@ class Client extends EventEmitter {
    * @param {ErrorEvent} e
    */
     onError(e: ErrorEvent) {
+        client.state = clientState.NotConnected;
         console.error(`A network error occurred`);
+        console.error(e);
         document.getElementById("client_error").style.display = "flex";
         this.cleanup();
     }

webAO/packets/handlers/handleDONE.ts

@@ -1,4 +1,5 @@
 import queryParser from "../../utils/queryParser";
+import { client, clientState } from "../../client";
 
 const { mode } = queryParser()
 /**
@@ -8,9 +9,11 @@ const { mode } = queryParser()
    * @param {Array} args packet arguments
    */
 export const handleDONE = (_args: string[]) => {
-    document.getElementById("client_loading")!.style.display = "none";
-    if (mode === "watch") {
-      // Spectators don't need to pick a character
-      document.getElementById("client_waiting")!.style.display = "none";
-    }
-}
+  // DONE packet signals that the handshake is complete
+  client.state = clientState.Joined;
+  document.getElementById("client_loading")!.style.display = "none";
+  if (mode === "watch") {
+    // Spectators don't need to pick a character
+    document.getElementById("client_waiting")!.style.display = "none";
+  }
+}