socket io

2025-07-06 18:17:40 +02:00
parent 4ead1cc0b9
commit 36d5f98dc9
7 changed files with 129 additions and 10 deletions
--- a/web/bun.lock
+++ b/web/bun.lock
@@ -18,6 +18,7 @@
        "moment": "^2.30.1",
        "nuxt": "^3.17.2",
        "nuxt-app": "file:",
+        "socket.io-client": "^4.8.1",
        "typescript": "^5.6.3",
        "vue": "^3.5.13",
        "vue-router": "^4.5.1",
@@ -422,6 +423,8 @@

    "@sindresorhus/merge-streams": ["@sindresorhus/merge-streams@2.3.0", "", {}, "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg=="],

+    "@socket.io/component-emitter": ["@socket.io/component-emitter@3.1.2", "", {}, "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="],
+
    "@speed-highlight/core": ["@speed-highlight/core@1.2.7", "", {}, "sha512-0dxmVj4gxg3Jg879kvFS/msl4s9F3T9UXC1InxgOf7t5NvcPD97u/WTA5vL/IxWHMn7qSxBozqrnnE2wvl1m8g=="],

    "@standard-schema/spec": ["@standard-schema/spec@1.0.0", "", {}, "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA=="],
@@ -940,6 +943,10 @@

    "end-of-stream": ["end-of-stream@1.4.4", "", { "dependencies": { "once": "^1.4.0" } }, "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q=="],

+    "engine.io-client": ["engine.io-client@6.6.3", "", { "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.1.1" } }, "sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w=="],
+
+    "engine.io-parser": ["engine.io-parser@5.2.3", "", {}, "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q=="],
+
    "enhanced-resolve": ["enhanced-resolve@5.18.1", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" } }, "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg=="],

    "entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
@@ -1778,6 +1785,10 @@

    "smob": ["smob@1.5.0", "", {}, "sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig=="],

+    "socket.io-client": ["socket.io-client@4.8.1", "", { "dependencies": { "@socket.io/component-emitter": "~3.1.0", "debug": "~4.3.2", "engine.io-client": "~6.6.1", "socket.io-parser": "~4.2.4" } }, "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ=="],
+
+    "socket.io-parser": ["socket.io-parser@4.2.4", "", { "dependencies": { "@socket.io/component-emitter": "~3.1.0", "debug": "~4.3.1" } }, "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew=="],
+
    "source-map": ["source-map@0.7.4", "", {}, "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA=="],

    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
@@ -2026,6 +2037,8 @@

    "xml-name-validator": ["xml-name-validator@4.0.0", "", {}, "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw=="],

+    "xmlhttprequest-ssl": ["xmlhttprequest-ssl@2.1.2", "", {}, "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ=="],
+
    "y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],

    "yallist": ["yallist@5.0.0", "", {}, "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw=="],
@@ -2192,6 +2205,10 @@

    "dir-glob/path-type": ["path-type@4.0.0", "", {}, "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="],

+    "engine.io-client/debug": ["debug@4.3.7", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ=="],
+
+    "engine.io-client/ws": ["ws@8.17.1", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ=="],
+
    "escodegen/source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],

    "eslint/find-up": ["find-up@5.0.0", "", { "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" } }, "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="],
@@ -2294,6 +2311,10 @@

    "send/mime-types": ["mime-types@3.0.1", "", { "dependencies": { "mime-db": "^1.54.0" } }, "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA=="],

+    "socket.io-client/debug": ["debug@4.3.7", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ=="],
+
+    "socket.io-parser/debug": ["debug@4.3.7", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ=="],
+
    "source-map-support/source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],

    "spdx-correct/spdx-expression-parse": ["spdx-expression-parse@3.0.1", "", { "dependencies": { "spdx-exceptions": "^2.1.0", "spdx-license-ids": "^3.0.0" } }, "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q=="],
--- a/web/package.json
+++ b/web/package.json
@@ -24,6 +24,7 @@
    "moment": "^2.30.1",
    "nuxt": "^3.17.2",
    "nuxt-app": "file:",
+    "socket.io-client": "^4.8.1",
    "typescript": "^5.6.3",
    "vue": "^3.5.13",
    "vue-router": "^4.5.1",
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -5,17 +5,19 @@ import MainContent from '~/components/ui/MainContent.vue';
 import Sidebar from '~/components/ui/Sidebar.vue';
 import { Event, type SerializableEvent } from '~/utils/event';

+const {$socket} = useNuxtApp()
+
 const date = ref<DateTime>(DateTime.now())
 const events = ref<Event[]>([])
 const tasks = ref<Task[]>([])
 const draggedTask = ref<DraggedTask | undefined>(undefined)

-const { data: eventsResponse } = await useAsyncData<SerializableEvent[]>(
+const { data: eventsResponse, refresh: refreshEvent } = await useAsyncData<SerializableEvent[]>(
 	'events',
 	() => axios.get<SerializableEvent[]>('/events').then(res => res.data)
 );

-const { data: tasksResponse, refresh } = await useAsyncData<SerializableTask[]>(
+const { data: tasksResponse, refresh: refreshTask } = await useAsyncData<SerializableTask[]>(
 	'tasks',
 	() => axios.get<SerializableTask[]>('/tasks').then(res => res.data)
 );
@@ -23,11 +25,18 @@ const { data: tasksResponse, refresh } = await useAsyncData<SerializableTask[]>(
 onMounted(() => {
 	events.value = eventsResponse.value?.map(Event.fromSerializable) ?? []
 	tasks.value = tasksResponse.value?.map(Task.fromSerializable) ?? []
+	$socket.on('change', async () => {
+		console.log("change socket")
+		location.reload()
+		//await refreshEvent()
+		//await refreshTask()
+	})
 })

 async function postEvent(event: Event) {
 	console.log('posting Event')
 	await axios.post('/events', event.toSerializable())
+	$socket.emit('change')
 }

 async function postTask(task: Task) {
@@ -35,30 +44,35 @@ async function postTask(task: Task) {
 	const createdTask = await axios.post<SerializableTask>('/tasks', task)
 	console.log(createdTask)
 	task.id = createdTask.data.id
+	$socket.emit('change')
 }

 async function deleteEvent(id: number) {
 	console.log('deleting Event')
 	await axios.delete(`/events/${id}`)
-	await refresh()
+	await refreshTask()
+	$socket.emit('change')
 }

 async function deleteTask(id: number) {
 	console.log('deleting Task')
 	await axios.delete(`/tasks/${id}`)
-	await refresh()
+	await refreshTask()
+	$socket.emit('change')
 }

 async function putEvent(event: Event) {
 	console.log('editing event')
 	await axios.put(`/events/${event.id}`, event)
-	await refresh()
+	await refreshTask()
+	$socket.emit('change')
 }

 async function putTask(task: Task) {
 	console.log('editing task')
 	await axios.put(`/tasks/${task.id}`, task)
-	await refresh()
+	await refreshTask()
+	$socket.emit('change')
 }

 function scheduleTask(task: Task) {
--- a/web/plugins/socket.client.ts
+++ b/web/plugins/socket.client.ts
@@ -0,0 +1,18 @@
+// Only runs on client-side
+import { io } from 'socket.io-client';
+
+export default defineNuxtPlugin(() => {
+  const socket = io('http://localhost:8080'); // Update with your backend URL
+
+  // Optional: handle connect
+  socket.on('connect', () => {
+    console.log('Connected with socket ID:', socket.id);
+  });
+
+  // Inject globally
+  return {
+    provide: {
+      socket,
+    },
+  };
+});