fix: Frontend websocket close event listener not being destroyed

frontend/src/stores/websocket.ts

@@ -206,50 +206,55 @@ export const useWebsocketStore = defineStore("websocket", () => {
 		pendingJobs.value = [];
 	});
 
-	const init = () => {
-		if (
-			[WebSocket.CONNECTING, WebSocket.OPEN].includes(
-				socket.value?.readyState
-			)
-		)
-			socket.value.close();
+	const onMessage = async message => {
+		const data = JSON.parse(message.data);
+		const name = data.shift(0);
 
-		socket.value = new WebSocket(`${configStore.urls.ws}?rewrite=1`);
+		if (name === "jobCallback") {
+			const callbackRef = data.shift(0);
+			const response = data.shift(0);
 
-		socket.value.addEventListener("message", async message => {
-			const data = JSON.parse(message.data);
-			const name = data.shift(0);
+			if (response?.status === "success")
+				jobCallbacks.value[callbackRef]?.resolve(response?.data);
+			else jobCallbacks.value[callbackRef]?.reject(response);
 
-			if (name === "jobCallback") {
-				const callbackRef = data.shift(0);
-				const response = data.shift(0);
+			delete jobCallbacks.value[callbackRef];
 
-				if (response?.status === "success")
-					jobCallbacks.value[callbackRef]?.resolve(response?.data);
-				else jobCallbacks.value[callbackRef]?.reject(response);
+			return;
+		}
 
-				delete jobCallbacks.value[callbackRef];
+		if (!subscriptions.value[name]) return;
 
-				return;
-			}
+		await Promise.all(
+			Object.values(subscriptions.value[name].callbacks).map(
+				async subscription => subscription(...data) // TODO: Error handling
+			)
+		);
+	};
 
-			if (!subscriptions.value[name]) return;
+	const onClose = () => {
+		ready.value = false;
 
-			await Promise.all(
-				Object.values(subscriptions.value[name].callbacks).map(
-					async subscription => subscription(...data) // TODO: Error handling
-				)
-			);
-		});
+		// try to reconnect every 1000ms, if the user isn't banned
+		if (!userAuthStore.banned) setTimeout(init, 1000);
+	};
 
-		socket.value.addEventListener("close", () => {
-			// TODO: fix this not going away after reconnect
+	const init = () => {
+		if (
+			[WebSocket.CONNECTING, WebSocket.OPEN].includes(
+				socket.value?.readyState
+			)
+		) {
+			socket.value.close();
+
+			socket.value.removeEventListener("message", onMessage);
+			socket.value.removeEventListener("close", onClose);
+		}
 
-			ready.value = false;
+		socket.value = new WebSocket(`${configStore.urls.ws}?rewrite=1`);
 
-			// try to reconnect every 1000ms, if the user isn't banned
-			if (!userAuthStore.banned) setTimeout(init, 1000);
-		});
+		socket.value.addEventListener("message", onMessage);
+		socket.value.addEventListener("close", onClose);
 	};
 
 	init();