socketio client and connection

package-lock.json

@@ -22,7 +22,7 @@
         "pinia": "^2.3.0",
         "qrcode": "^1.5.3",
         "qs": "^6.11.2",
-        "socket.io-client": "^4.5.0",
+        "socket.io-client": "^4.8.1",
         "uuid": "^9.0.0",
         "vue": "^3.4.29",
         "vue-router": "^4.3.3"
@@ -4856,21 +4856,23 @@
       }
     },
     "node_modules/engine.io-client": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.4.tgz",
-      "integrity": "sha512-GeZeeRjpD2qf49cZQ0Wvh/8NJNfeXkXXcoGh+F77oEAgo9gUHwT1fCRxSNU+YEEaysOJTnsFHmM5oAcPy4ntvQ==",
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.3.tgz",
+      "integrity": "sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==",
+      "license": "MIT",
       "dependencies": {
         "@socket.io/component-emitter": "~3.1.0",
         "debug": "~4.3.1",
         "engine.io-parser": "~5.2.1",
         "ws": "~8.17.1",
-        "xmlhttprequest-ssl": "~2.0.0"
+        "xmlhttprequest-ssl": "~2.1.1"
       }
     },
     "node_modules/engine.io-parser": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
       "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
       }
@@ -8563,13 +8565,14 @@
       "dev": true
     },
     "node_modules/socket.io-client": {
-      "version": "4.7.5",
-      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.5.tgz",
-      "integrity": "sha512-sJ/tqHOCe7Z50JCBCXrsY3I2k03iOiUe+tj1OmKeD2lXPiGH/RUCdTZFoqVyN7l1MnpIzPrGtLcijffmeouNlQ==",
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
+      "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
+      "license": "MIT",
       "dependencies": {
         "@socket.io/component-emitter": "~3.1.0",
         "debug": "~4.3.2",
-        "engine.io-client": "~6.5.2",
+        "engine.io-client": "~6.6.1",
         "socket.io-parser": "~4.2.4"
       },
       "engines": {
@@ -10225,6 +10228,7 @@
       "version": "8.17.1",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
       "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
       },
@@ -10251,9 +10255,9 @@
       }
     },
     "node_modules/xmlhttprequest-ssl": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
-      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+      "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
       "engines": {
         "node": ">=0.4.0"
       }

package.json

@@ -37,7 +37,7 @@
     "pinia": "^2.3.0",
     "qrcode": "^1.5.3",
     "qs": "^6.11.2",
-    "socket.io-client": "^4.5.0",
+    "socket.io-client": "^4.8.1",
     "uuid": "^9.0.0",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3"

src/components/Notification.vue

@@ -20,6 +20,7 @@
           notification.type == 'error' ? 'border border-red-400' : '',
           notification.type == 'warning' ? 'border border-red-400' : '',
           notification.type == 'info' ? 'border border-gray-400' : '',
+          notification.type == 'success' ? 'border border-green-400' : '',
         ]"
       >
         <!-- @mouseover="hovering(notification.id, true)"
@@ -36,6 +37,10 @@
           v-if="notification.type == 'info'"
           class="flex items-center justify-center min-w-12 w-12 h-12 bg-gray-500 rounded-lg text-white p-1"
         />
+        <HandThumbUpIcon
+          v-if="notification.type == 'success'"
+          class="flex items-center justify-center min-w-12 w-12 h-12 bg-green-500 rounded-lg text-white p-1"
+        />
 
         <div class="flex flex-col">
           <span
@@ -44,6 +49,7 @@
               notification.type == 'error' ? 'text-red-500' : '',
               notification.type == 'warning' ? 'text-red-500' : '',
               notification.type == 'info' ? 'text-gray-700' : '',
+              notification.type == 'success' ? 'text-green-700' : '',
             ]"
             >{{ notification.title }}</span
           >
@@ -71,6 +77,7 @@ import {
   ExclamationCircleIcon,
   InformationCircleIcon,
   XMarkIcon,
+  HandThumbUpIcon,
 } from "@heroicons/vue/24/outline";
 
 export interface Props {

src/serverCom.ts

@@ -102,4 +102,4 @@ export async function refreshToken(): Promise<void> {
   });
 }
 
-export { http, host };
+export { http, host, url };

src/stores/admin/operation/connection.ts

@@ -0,0 +1,63 @@
+import { defineStore } from "pinia";
+import { io, type Socket } from "socket.io-client";
+import { useNotificationStore } from "../../notification";
+import { url } from "../../../serverCom";
+
+export const useConnectionStore = defineStore("connection", {
+  state: () => {
+    return {
+      connection: undefined as undefined | Socket,
+    };
+  },
+  getters: {
+    connectionStatus: (state) => !!state.connection,
+  },
+  actions: {
+    connectClient(): void {
+      if (this.connectionStatus) return;
+      const notificationStore = useNotificationStore();
+      this.connection?.disconnect();
+      this.connection = io(url, {
+        reconnection: true,
+        reconnectionDelayMax: 10000,
+        auth: {
+          token: localStorage.getItem("accessToken"),
+        },
+      });
+
+      this.connection.on("connect", () => {
+        notificationStore.push("Erfolg", `Verbindung aufgebaut`, "success");
+      });
+      this.connection.on("connect_error", () => {
+        notificationStore.push("Fehler", `Verbindung fehlgeschlagen`, "error");
+      });
+      this.connection.on("disconnecting", () => {
+        this.connection?.disconnect();
+      });
+      this.connection.on("disconnect", () => {
+        this.$reset();
+      });
+      this.connection.on("warning", (msg: string) => {
+        notificationStore.push("Warnung", msg, "warning");
+      });
+      this.connection.on("error", (msg: string) => {
+        notificationStore.push("Fehler", msg, "error");
+      });
+      this.connection.on("reconnect", (attemptNumber) => {
+        notificationStore.push("Reconnect", `Reconnect erfolgreich`, "success");
+      });
+      this.connection.on("reconnect_attempt", (attemptNumber) => {
+        notificationStore.push("Reconnect-Versuch", `Reconnect-Versuch Nr.${attemptNumber}`, "info");
+      });
+      this.connection.on("reconnect_error", (error) => {
+        notificationStore.push("Warnung", "Reconnect fehlgeschlagen", "warning");
+      });
+      this.connection.on("reconnect_failed", () => {
+        notificationStore.push("Fehler", "Reconnect-Versuche erfolglos beendet", "error");
+      });
+    },
+    disconnectClient(): void {
+      this.connection?.disconnect();
+    },
+  },
+});

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: () => {

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

@@ -35,8 +35,9 @@ import MainTemplate from "@/templates/Main.vue";
 import { useAbilityStore } from "@/stores/ability";
 import MissionListItem from "@/components/admin/operation/mission/MissionListItem.vue";
 import { useMissionStore } from "@/stores/admin/operation/mission";
-import { ArrowPathIcon } from "@heroicons/vue/24/outline";
+import { ArrowPathIcon, CloudIcon } from "@heroicons/vue/24/outline";
 import Spinner from "@/components/Spinner.vue";
+import { useConnectionStore } from "@/stores/admin/operation/connection";
 </script>
 
 <script lang="ts">
@@ -59,8 +60,10 @@ export default defineComponent({
   },
   mounted() {
     this.fetchMissions();
+    this.connectClient();
   },
   methods: {
+    ...mapActions(useConnectionStore, ["connectClient"]),
     ...mapActions(useMissionStore, ["fetchMissions", "createMission"]),
     reachedEnd() {
       this.hasReachedEnd = true;

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

@@ -38,6 +38,7 @@ import { defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import { useAbilityStore } from "@/stores/ability";
+import { useConnectionStore } from "@/stores/admin/operation/connection";
 </script>
 
 <script lang="ts">
@@ -64,8 +65,10 @@ export default defineComponent({
   },
   mounted() {
     this.manageHash();
+    this.connectClient();
   },
   methods: {
+    ...mapActions(useConnectionStore, ["connectClient"]),
     manageHash() {
       if (!this.$route.hash || !this.tabs.map((t) => t.hash).includes(this.$route.hash)) {
         this.$router.replace({ hash: this.tabs[0].hash });