From 9022ac1b94bd8f9fa9dd820aa3c038f97edebe80 Mon Sep 17 00:00:00 2001 From: William Bruno Date: Thu, 12 Mar 2026 11:50:56 -0400 Subject: [PATCH] updates --- package-lock.json | 149 ++++++++++++++++++++++++++++++++- package.json | 2 + quasar.config.ts | 13 ++- src/boot/socket.ts | 31 +++++++ src/components/LeafletTest.vue | 2 +- src/components/SocketTest.vue | 23 +++++ src/components/StatusBar.vue | 35 ++++---- src/pages/TestPage.vue | 2 + src/stores/index.ts | 32 +++++++ src/stores/status.ts | 34 ++++++++ src/types.ts | 23 +++++ 11 files changed, 322 insertions(+), 24 deletions(-) create mode 100644 src/boot/socket.ts create mode 100644 src/components/SocketTest.vue create mode 100644 src/stores/index.ts create mode 100644 src/stores/status.ts create mode 100644 src/types.ts diff --git a/package-lock.json b/package-lock.json index 98d3804..c57cd12 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,9 @@ "axios": "^1.2.1", "leaflet": "^1.9.4", "leaflet-geosearch": "^4.2.2", + "pinia": "^3.0.4", "quasar": "^2.16.0", + "socket.io-client": "^4.8.3", "vue": "^3.5.22", "vue-router": "^5.0.0" }, @@ -1937,6 +1939,12 @@ "win32" ] }, + "node_modules/@socket.io/component-emitter": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz", + "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==", + "license": "MIT" + }, "node_modules/@types/body-parser": { "version": "1.19.6", "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.6.tgz", @@ -3872,7 +3880,6 @@ "version": "4.4.3", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==", - "dev": true, "license": "MIT", "dependencies": { "ms": "^2.1.3" @@ -4111,6 +4118,28 @@ "node": ">= 0.8" } }, + "node_modules/engine.io-client": { + "version": "6.6.4", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.4.tgz", + "integrity": "sha512-+kjUJnZGwzewFDw951CDWcwj35vMNf2fcj7xQWOctq1F2i1jkDdVvdFG9kM/BEChymCH36KgjnW0NsL58JYRxw==", + "license": "MIT", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.4.1", + "engine.io-parser": "~5.2.1", + "ws": "~8.18.3", + "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" + } + }, "node_modules/entities": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", @@ -6021,7 +6050,6 @@ "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", - "dev": true, "license": "MIT" }, "node_modules/muggle-string": { @@ -6443,6 +6471,66 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/pinia": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz", + "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==", + "license": "MIT", + "dependencies": { + "@vue/devtools-api": "^7.7.7" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "typescript": ">=4.5.0", + "vue": "^3.5.11" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/pinia/node_modules/@vue/devtools-api": { + "version": "7.7.9", + "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.9.tgz", + "integrity": "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==", + "license": "MIT", + "dependencies": { + "@vue/devtools-kit": "^7.7.9" + } + }, + "node_modules/pinia/node_modules/@vue/devtools-kit": { + "version": "7.7.9", + "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.9.tgz", + "integrity": "sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==", + "license": "MIT", + "dependencies": { + "@vue/devtools-shared": "^7.7.9", + "birpc": "^2.3.0", + "hookable": "^5.5.3", + "mitt": "^3.0.1", + "perfect-debounce": "^1.0.0", + "speakingurl": "^14.0.1", + "superjson": "^2.2.2" + } + }, + "node_modules/pinia/node_modules/@vue/devtools-shared": { + "version": "7.7.9", + "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz", + "integrity": "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==", + "license": "MIT", + "dependencies": { + "rfdc": "^1.4.1" + } + }, + "node_modules/pinia/node_modules/perfect-debounce": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz", + "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==", + "license": "MIT" + }, "node_modules/pkg-types": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz", @@ -7755,6 +7843,34 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/socket.io-client": { + "version": "4.8.3", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.3.tgz", + "integrity": "sha512-uP0bpjWrjQmUt5DTHq9RuoCBdFJF10cdX9X+a368j/Ft0wmaVgxlrjvK3kjvgCODOMMOz9lcaRzxmso0bTWZ/g==", + "license": "MIT", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.4.1", + "engine.io-client": "~6.6.1", + "socket.io-parser": "~4.2.4" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/socket.io-parser": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.5.tgz", + "integrity": "sha512-bPMmpy/5WWKHea5Y/jYAP6k74A+hvmRCQaJuJB6I/ML5JZq/KfNieUVo/3Mh7SAqn7TyFdIo6wqYHInG1MU1bQ==", + "license": "MIT", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.4.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -9356,6 +9472,27 @@ "url": "https://github.com/chalk/wrap-ansi?sponsor=1" } }, + "node_modules/ws": { + "version": "8.18.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz", + "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==", + "license": "MIT", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": ">=5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, "node_modules/wsl-utils": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz", @@ -9382,6 +9519,14 @@ "node": ">=12" } }, + "node_modules/xmlhttprequest-ssl": { + "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" + } + }, "node_modules/y18n": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", diff --git a/package.json b/package.json index 07c4004..3ff2172 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,9 @@ "axios": "^1.2.1", "leaflet": "^1.9.4", "leaflet-geosearch": "^4.2.2", + "pinia": "^3.0.4", "quasar": "^2.16.0", + "socket.io-client": "^4.8.3", "vue": "^3.5.22", "vue-router": "^5.0.0" }, diff --git a/quasar.config.ts b/quasar.config.ts index 70076ac..a0c2925 100644 --- a/quasar.config.ts +++ b/quasar.config.ts @@ -12,7 +12,8 @@ export default defineConfig((/* ctx */) => { // --> boot files are part of "main.js" // https://v2.quasar.dev/quasar-cli-vite/boot-files boot: [ - 'axios' + 'axios', + 'socket', ], // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#css @@ -98,9 +99,17 @@ export default defineConfig((/* ctx */) => { proxy: { // proxy all requests starting with /api to jsonplaceholder '/api': { - target: 'http://strixx.famor.org:8000', + target: 'http://localhost:8000', changeOrigin: true, }, + '/socket.io': { + target: 'http://localhost:8000', // Your backend WebSocket server + secure: false, // Set to true if using wss:// + ws: true, // Enable WebSocket proxying + rewriteWsOrigin: true, + changeOrigin: true, +// rewrite: (path) => path.replace(/^\/socket.io/, ''), + } }, }, diff --git a/src/boot/socket.ts b/src/boot/socket.ts new file mode 100644 index 0000000..047099c --- /dev/null +++ b/src/boot/socket.ts @@ -0,0 +1,31 @@ +import { defineBoot } from '#q-app/wrappers'; +import type { Socket } from 'socket.io-client'; +import { io } from 'socket.io-client'; +import type { StatusUpdate } from 'src/types'; + +interface ServerToClientEvents { + noArg: () => void; + basicEmit: (a: number, b: string, c: Buffer) => void; + withAck: (d: string, callback: (e: number) => void) => void; + status_update: (d: StatusUpdate) => void; +} + +interface ClientToServerEvents { + message: (data: string) => void; + connect: () => void; + disconnect: () => void; + set_location: (latitude: number, longitude: number, callback: (response: { success: boolean; data: { latitude: number; longitude: number }; message?: string }) => void) => void; + request_update: (callback: (response: { statusUpdate: StatusUpdate }) => void) => void; + command: (command: string, callback: (response: { success: boolean; message?: string }) => void ) => void; + shutdown: (delay: number, callback: (response: { success: boolean; message?: string }) => void) => void; + // ... other events +} + +const socket: Socket = io(); + +export default defineBoot(({ app }) => { + app.config.globalProperties.$socket = socket; +}); + +export { socket }; + \ No newline at end of file diff --git a/src/components/LeafletTest.vue b/src/components/LeafletTest.vue index 545793d..e2e318f 100644 --- a/src/components/LeafletTest.vue +++ b/src/components/LeafletTest.vue @@ -51,7 +51,7 @@ import "leaflet/dist/leaflet.css"; import type { Map, LeafletMouseEvent } from 'leaflet'; import SetLocationDialog from "components/SetLocationDialog.vue"; import StatusBar from "components/StatusBar.vue" -import { api } from "src/boot/axios"; +import { api } from "boot/axios"; const $q = useQuasar(); const mapRef = ref(null); diff --git a/src/components/SocketTest.vue b/src/components/SocketTest.vue new file mode 100644 index 0000000..bd7f8b0 --- /dev/null +++ b/src/components/SocketTest.vue @@ -0,0 +1,23 @@ + + diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue index b559eed..d9c3352 100644 --- a/src/components/StatusBar.vue +++ b/src/components/StatusBar.vue @@ -1,36 +1,33 @@