Add websocket auto reconnect

frontend/src/utils.ts

@@ -5,4 +5,8 @@ export function formatTime(dateString: string) {
     const hoursString = hours < 10 ? '0' + hours : hours;
     const minutesString = minutes < 10 ? '0' + minutes : minutes;
     return hoursString + ':' + minutesString;
+}
+
+export function delay(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
 }

frontend/src/websocket.ts

@@ -2,9 +2,13 @@ import { currentUser } from "./auth";
 import { addMessage } from "./chat";
 import { API_FULL_BASE_URL } from "./config";
 import type { WebSocketMessage, Message } from "./types";
+import { delay } from "./utils";
 
+function create() {
+    return new WebSocket(`ws://${API_FULL_BASE_URL}/chat/ws`);
+}
 
-export const websocket = new WebSocket(`ws://${API_FULL_BASE_URL}/chat/ws`);
+export let websocket = create();
 
 // --------------
 // Initialization
@@ -19,4 +23,18 @@ websocket.addEventListener("message", (e) => {
             break;
         }
     }
+});
+
+websocket.addEventListener("error", async () => {
+    console.warn("WebSocket disconnected, retrying in 3 seconds...");
+    await delay(3000);
+    websocket = create();
+
+    let listener: () => void | null;
+    listener = () => {
+        console.log("WebSocket successfully reconnected!");
+        websocket.removeEventListener("open", listener);
+    }
+
+    websocket.addEventListener("open", listener);
 });