Merge pull request #1047 from fdm-monster/fix/double-socket

fix: do not double connect socketio
fdm-monster · Feb 20, 2024 · 36cd405 · 36cd405
2 parents 7c98a4d + 0da320c
commit 36cd405
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 5 deletions.
diff --git a/src/AppLoader.vue b/src/AppLoader.vue
@@ -133,7 +133,11 @@ async function loadAppWithAuthenticationReady() {
     captureException(e);
   }
 
-  await socketIoClient.setupSocketConnection();
+  if (!socketIoClient.socketState().setup) {
+    await socketIoClient.setupSocketConnection();
+  } else {
+    socketIoClient.reconnect();
+  }
 
   setOverlay(false);
 }

diff --git a/src/shared/socketio.service.ts b/src/shared/socketio.service.ts
@@ -1,4 +1,3 @@
-import { io, Socket } from "socket.io-client";
 import {
   PrinterStateDto,
   SocketIoUpdateMessage,
@@ -11,7 +10,13 @@ import { useSnackbar } from "./snackbar.composable";
 import { getBaseUri } from "@/shared/http-client";
 import { useAuthStore } from "@/store/auth.store";
 import { IdType } from "@/utils/id.type";
-import { appSocketIO, constructSocket, getSocketState } from "@/store/connection.store";
+import {
+  appSocketIO,
+  constructSocket,
+  deconstructSocket,
+  getSocketState,
+  resetSocketConnection,
+} from "@/store/connection.store";
 
 enum IO_MESSAGES {
   LegacyUpdate = "legacy-update",
@@ -42,13 +47,18 @@ export class SocketIoService {
     appSocketIO?.on(IO_MESSAGES.LegacyUpdate, (data) => this.onMessage(JSON.parse(data)));
     appSocketIO?.on(IO_MESSAGES.TestPrinterState, (data) => {
       this.testPrinterStore.saveEvent(data);
+      console.log(data);
     });
   }
 
   disconnect() {
+    deconstructSocket();
+  }
+
+  reconnect() {
     if (appSocketIO) {
-      console.debug("Disconnecting socket.io client");
-      appSocketIO.disconnect();
+      console.debug("Resetting socket.io client connection");
+      resetSocketConnection();
     }
   }
 

diff --git a/src/store/connection.store.ts b/src/store/connection.store.ts
@@ -10,6 +10,9 @@ export const socketState = reactive({
 });
 
 export function constructSocket(apiBase: string, token?: string | null) {
+  if (socketState.setup) {
+    throw new Error("Socket already set up");
+  }
   socketState.setup = false;
   appSocketIO = io(apiBase, {
     auth: token?.length ? { token } : undefined,
@@ -27,6 +30,22 @@ export function constructSocket(apiBase: string, token?: string | null) {
   });
 }
 
+export function resetSocketConnection() {
+  socketState.connected = false;
+  appSocketIO?.close();
+  appSocketIO?.open();
+}
+
+export function deconstructSocket() {
+  if (appSocketIO) {
+    appSocketIO.close();
+  }
+  appSocketIO = null;
+  socketState.setup = false;
+  socketState.connected = false;
+  socketState.id = "";
+}
+
 export function getSocketState() {
   if (!appSocketIO) {
     console.warn("Socket not set-up");