Ehrenamt/ff-operation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

socketio client and connection

Browse source
This commit is contained in:
Julian Krauser 2025-02-21 11:55:49 +01:00
parent 83988ad68a
commit e57738649a
8 changed files with 96 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
package-lock.json generated
View file

@ -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"
}

2
package.json
View file

@ -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"

7
src/components/Notification.vue
View file

@ -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 {

2
src/serverCom.ts
View file

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

63
src/stores/admin/operation/connection.ts Normal file
View file

@ -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();
},
},
});

2
src/stores/notification.ts
View file

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

5
src/views/admin/operation/mission/MissionList.vue
View file

@ -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;

3
src/views/admin/operation/mission/MissionOverview.vue
View file

@ -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 });