Merge pull request #1003 from fdm-monster/fix/socket-client-separated…

…-pinia

Fix/socket client separated pinia

src/AppLoader.vue

@@ -76,7 +76,7 @@ import { AppService } from "@/backend/app.service";
 import { AxiosError } from "axios";
 import { AUTH_ERROR_REASON } from "@/shared/auth.constants";
 import { captureException } from "@sentry/vue";
-import { socketIoClient } from "@/store/connection.store";
+import { SocketIoService } from "@/shared/socketio.service";
 
 const authStore = useAuthStore();
 const settingsStore = useSettingsStore();
@@ -90,6 +90,7 @@ const errorCaught = ref(null);
 const errorUrl = ref(null);
 const errorResponse = ref(null);
 const snackbar = useSnackbar();
+const socketIoClient: SocketIoService = new SocketIoService();
 
 function reloadPage() {
   window.location.reload();

src/components/Login/LoginForm.vue

@@ -126,7 +126,9 @@ onMounted(async () => {
   authStore.loadTokens();
   await authStore.checkAuthenticationRequirements();
   if (authStore.loginRequired === false) {
+    // As AppLoader might not trigger, we trigger it ourselves
     console.debug("LoginView, no login required, redirecting to", route.query.redirect, "or home");
+    loginEvent.emit(true);
     return await routeToRedirect();
   }
   if (!authStore.hasRefreshToken) {

src/components/TopBar.vue

@@ -44,12 +44,9 @@
     <span v-if="isDevEnv && expiry" class="ml-2"> AuthExp {{ expiry }} </span>
 
     <span v-if="isDevEnv" class="ml-2">
-      <small v-if="!socketState">No Socket</small>
-      <small v-else>
-        Socket {{ socketState.id }} A:{{ socketState.active ? 1 : 0 }} C:{{
-          socketState.connected ? 1 : 0
-        }}
-        R:{{ socketState.recovered ? 1 : 0 }}
+      <small>
+        S{{ socketState.setup ? 1 : 0 }} C{{ socketState.connected ? 1 : 0 }}
+        {{ socketState.id }}
       </small>
     </span>
 
@@ -98,7 +95,7 @@ import { useRouter } from "vue-router/composables";
 import { routeToLogin } from "@/router/utils";
 import { useIntervalFn } from "@vueuse/core";
 import { isDevEnv, isProdEnv } from "@/shared/app.constants";
-import { socketIoClient } from "@/store/connection.store";
+import { getSocketState, socketState } from "@/store/connection.store";
 
 const profileStore = useProfileStore();
 const authStore = useAuthStore();
@@ -125,9 +122,9 @@ const expiry = computed(() => {
   return `${Math.round(diffValue)}s`;
 });
 
-const socketState = computed(() => {
-  return socketIoClient.socketState();
-});
+// const socketState = computed(() => {
+//   return getSocketState();
+// });
 
 const username = computed(() => {
   return profileStore.username;

src/shared/socketio.service.ts

@@ -11,6 +11,7 @@ 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";
 
 enum IO_MESSAGES {
   LegacyUpdate = "legacy-update",
@@ -21,40 +22,33 @@ enum IO_MESSAGES {
 }
 
 export class SocketIoService {
-  private socket: Socket;
   private printerStore = usePrinterStore();
   private floorStore = useFloorStore();
   private printerStateStore = usePrinterStateStore();
   private testPrinterStore = useTestPrinterStore();
   private snackbar = useSnackbar();
 
   socketState() {
-    return {
-      active: this.socket.active,
-      connected: this.socket.connected,
-      id: this.socket.id,
-      recovered: this.socket.recovered,
-    };
+    return getSocketState();
   }
 
   async setupSocketConnection() {
     console.debug("Setting up socket.io client");
     const apiBase = await getBaseUri();
     const authStore = useAuthStore();
     authStore.loadTokens();
-    this.socket = io(apiBase, {
-      auth: authStore.loginRequired ? { token: authStore.token } : undefined,
-    });
-    this.socket.on(IO_MESSAGES.LegacyUpdate, (data) => this.onMessage(JSON.parse(data)));
-    this.socket.on(IO_MESSAGES.TestPrinterState, (data) => {
+    constructSocket(apiBase, authStore.loginRequired ? authStore.token : undefined);
+
+    appSocketIO?.on(IO_MESSAGES.LegacyUpdate, (data) => this.onMessage(JSON.parse(data)));
+    appSocketIO?.on(IO_MESSAGES.TestPrinterState, (data) => {
       this.testPrinterStore.saveEvent(data);
     });
   }
 
   disconnect() {
-    if (this.socket) {
+    if (appSocketIO) {
       console.debug("Disconnecting socket.io client");
-      this.socket.disconnect();
+      appSocketIO.disconnect();
     }
   }
 

src/store/connection.store.ts

@@ -1,3 +1,47 @@
-import { SocketIoService } from "@/shared/socketio.service";
+import { io, Socket } from "socket.io-client";
+import { reactive } from "vue";
 
-export const socketIoClient: SocketIoService = new SocketIoService();
+export let appSocketIO: Socket | null = null;
+
+export const socketState = reactive({
+  connected: false,
+  setup: false,
+  id: "",
+});
+
+export function constructSocket(apiBase: string, token?: string | null) {
+  socketState.setup = false;
+  appSocketIO = io(apiBase, {
+    auth: token?.length ? { token } : undefined,
+  });
+  socketState.setup = true;
+
+  appSocketIO.on("connect", () => {
+    socketState.id = appSocketIO!.id || "";
+    socketState.connected = true;
+  });
+
+  appSocketIO.on("disconnect", () => {
+    socketState.id = "";
+    socketState.connected = false;
+  });
+}
+
+export function getSocketState() {
+  if (!appSocketIO) {
+    console.warn("Socket not set-up");
+    return {
+      setup: false,
+    };
+  }
+
+  const state = {
+    setup: true,
+    active: appSocketIO.active,
+    connected: appSocketIO.connected,
+    id: appSocketIO.id,
+    recovered: appSocketIO.recovered,
+  };
+  console.warn(state);
+  return state;
+}