fix socketio reconnect

src/App.vue

@@ -15,18 +15,28 @@ import { defineComponent } from "vue";
 import { RouterView } from "vue-router";
 import Header from "./components/Header.vue";
 import Footer from "./components/Footer.vue";
-import { mapState } from "pinia";
+import { mapActions, mapState } from "pinia";
 import { useAuthStore } from "./stores/auth";
 import { isAuthenticatedPromise } from "./router/authGuard";
 import ContextMenu from "./components/ContextMenu.vue";
 import Modal from "./components/Modal.vue";
 import Notification from "./components/Notification.vue";
+import { useConnectionStore } from "./stores/admin/operation/connection";
+import { useMissionStore } from "./stores/admin/operation/mission";
 </script>
 
 <script lang="ts">
 export default defineComponent({
+  watch: {
+    connectionStatus() {
+      if (this.connectionStatus) {
+        this.initialize();
+      }
+    },
+  },
   computed: {
     ...mapState(useAuthStore, ["authCheck"]),
+    ...mapState(useConnectionStore, ["connectionStatus"]),
   },
   mounted() {
     if (!this.authCheck && localStorage.getItem("access_token")) {
@@ -38,11 +48,16 @@ export default defineComponent({
     window.addEventListener("online", function (e) {
       e.preventDefault();
     });
+    this.connectClient();
   },
   beforeUnmount() {
     window.removeEventListener("online", function (e) {
       e.preventDefault();
     });
   },
+  methods: {
+    ...mapActions(useConnectionStore, ["connectClient"]),
+    ...mapActions(useMissionStore, ["initialize"]),
+  },
 });
 </script>

src/stores/admin/operation/connection.ts

@@ -21,9 +21,8 @@ export const useConnectionStore = defineStore("connection", {
       const notificationStore = useNotificationStore();
       this.connection?.disconnect();
       this.connection = io(url, {
-        reconnection: false,
+        reconnection: true,
-        reconnectionDelayMax: 1000,
+        reconnectionDelay: 10000,
-        reconnectionAttempts: 1,
         auth: (cb) => {
           cb({ token: localStorage.getItem("accessToken") });
         },
@@ -39,14 +38,10 @@ export const useConnectionStore = defineStore("connection", {
       });
       this.connection.on("disconnecting", () => {
         this.connected = false;
-        this.connection?.disconnect();
       });
       this.connection.on("disconnect", () => {
         this.connected = false;
-        this.$reset();
+        this.connectClient();
-        if (!this.performingManualReconnect) {
-          this.connectClient();
-        }
       });
       this.connection.on("warning", (msg: string) => {
         notificationStore.push("Socket-Warnung", msg, "warning");
@@ -66,20 +61,12 @@ export const useConnectionStore = defineStore("connection", {
 
       if (err.message == "xhr poll error") {
         notificationStore.push("Socket-Netzwerk-Fehler", "Reconnect Versuch in 10s", "error");
-        this.performingManualReconnect = true;
-        this.disconnectClient();
-        setTimeout(() => {
-          this.connectClient();
-          this.performingManualReconnect = false;
-        }, 10000);
       } 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.performingManualReconnect = true;
+            this.connection?.disconnect();
-            this.connection?.disconnect().connect();
-            this.performingManualReconnect = false;
           })
           .catch(() => {
             notificationStore.push("Session-Fehler", "Anmeldung wurde nicht verlängert", "error");

src/stores/admin/operation/mission.ts

@@ -2,6 +2,8 @@ import { defineStore } from "pinia";
 import type { MissionShortViewModel } from "@/viewmodels/admin/operation/mission.models";
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
+import { useConnectionStore } from "./connection";
+import { useNotificationStore } from "../../notification";
 
 export const useMissionStore = defineStore("mission", {
   state: () => {
@@ -12,6 +14,14 @@ export const useMissionStore = defineStore("mission", {
     };
   },
   actions: {
+    initialize() {
+      const connectionStore = useConnectionStore();
+      connectionStore.connection?.on("created-new-mission", (data) => {
+        const notificationStore = useNotificationStore();
+        notificationStore.push("Neuer Einsatz", `Es wurde ein neuer Einsatz angelegt`, "info");
+        this.fetchMissions(0, 25, true);
+      });
+    },
     fetchMissions(offset = 0, count = 25, clear = false) {
       if (clear) this.missions = [];
       this.loading = "loading";

src/views/admin/operation/mission/MissionList.vue

@@ -7,7 +7,7 @@
           v-if="can('delete', 'operation', 'mission')"
           class="w-5 h-5 cursor-pointer"
           :class="loading == 'loading' ? 'animate-spin' : 'animate-[spin_1s_linear_1]'"
-          @click="fetchMissions()"
+          @click="fetchMissions(0, 25, true)"
         />
       </div>
     </template>
@@ -60,10 +60,8 @@ export default defineComponent({
   },
   mounted() {
     this.fetchMissions();
-    this.connectClient();
   },
   methods: {
-    ...mapActions(useConnectionStore, ["connectClient"]),
     ...mapActions(useMissionStore, ["fetchMissions", "createMission"]),
     reachedEnd() {
       this.hasReachedEnd = true;