add socketio to app

src/serverCom.ts

@@ -78,7 +78,7 @@ http.interceptors.response.use(
   }
 );
 
-export async function refreshToken(): Promise<void> {
+async function refreshToken(): Promise<void> {
   return new Promise<void>(async (resolve, reject) => {
     await http
       .post(`/auth/refresh`, {
@@ -135,4 +135,4 @@ async function* streamingFetch(path: string, abort?: AbortController) {
   }
 }
 
-export { http, newEventSource, streamingFetch, host, url };
+export { http, newEventSource, streamingFetch, host, url, refreshToken };

src/socketManager.ts

@@ -0,0 +1,81 @@
+import { Manager, Socket } from "socket.io-client";
+import { refreshToken, url } from "./serverCom";
+import { useNotificationStore } from "./stores/notification";
+
+export enum SocketConnectionTypes {
+  scanner = "/scanner",
+  pscanner = "/public_scanner",
+}
+
+export abstract class SocketManager {
+  private readonly manager = new Manager(url, {
+    reconnection: true,
+    reconnectionDelayMax: 10000,
+  });
+  private readonly connections = new Map<SocketConnectionTypes, Socket>();
+
+  public establishConnection(connection: SocketConnectionTypes) {
+    if (this.connections.has(connection)) return this.connections.get(connection);
+    const notificationStore = useNotificationStore();
+    let socket = this.manager.socket(connection, {
+      auth: (cb) => {
+        cb({ token: localStorage.getItem("accessToken") });
+      },
+    });
+    socket.on("connect", () => {
+      notificationStore.push("Socket-Erfolg", `Verbindung aufgebaut`, "success");
+    });
+    socket.on("connect_error", (err) => {
+      this.socketHandleError(connection, err, true);
+    });
+    socket.on("disconnect", () => {
+      this.establishConnection(connection);
+    });
+    socket.on("warning", (msg: string) => {
+      notificationStore.push("Socket-Warnung", msg, "warning");
+    });
+    socket.on("error", (msg: string) => {
+      this.socketHandleError(connection, {
+        name: "Error",
+        message: msg,
+      });
+    });
+
+    this.connections.set(connection, socket);
+    return socket;
+  }
+
+  public getConnection(connection: SocketConnectionTypes) {
+    return this.connections.get(connection);
+  }
+
+  public closeConnection(connection: SocketConnectionTypes) {
+    let socket = this.connections.get(connection);
+    if (socket) {
+      socket.disconnect();
+      this.connections.delete(connection);
+    }
+  }
+
+  private socketHandleError(connection: SocketConnectionTypes, err: Error, onConnect = false) {
+    const notificationStore = useNotificationStore();
+
+    if (err.message == "xhr poll error") {
+      notificationStore.push("Socket-Netzwerk-Fehler", "Reconnect Versuch in 10s", "error");
+    } else if (err.message == "Token expired") {
+      notificationStore.push("Session", "Session wird verlängert", "info");
+      refreshToken()
+        .then(() => {
+          notificationStore.push("Session", "Session erfolgreich verlängert", "success");
+          this.closeConnection(connection);
+        })
+        .catch(() => {
+          notificationStore.push("Session-Fehler", "Anmeldung wurde nicht verlängert", "error");
+        });
+    } else if (onConnect) {
+      notificationStore.push("Socket-Fehler", `Verbindung fehlgeschlagen`, "error");
+    } else {
+      notificationStore.push("Socket-Fehler", err.message, "error");
+    }
+  }
+}

src/stores/notification.ts

@@ -8,7 +8,7 @@ export interface Notification {
   indicator: boolean;
 }
 
-export type NotificationType = "info" | "warning" | "error";
+export type NotificationType = "info" | "warning" | "error" | "success";
 
 export const useNotificationStore = defineStore("notification", {
   state: () => {