debug

quasar.config.ts

@@ -11,10 +11,7 @@ export default defineConfig((/* ctx */) => {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: [
+    boot: ['axios', 'socket'],
-      'axios',
-      'socket',
-    ],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#css
     css: ['app.scss'],
@@ -65,13 +62,10 @@ export default defineConfig((/* ctx */) => {
       // extendViteConf (viteConf) {},
       // viteVuePluginOptions: {},
 
-      extendViteConf () {
+      extendViteConf() {
         return {
           server: {
-            allowedHosts: [
+            allowedHosts: ['localhost'],
-              'localhost',
-              'strixx.famor.org',
-            ],
           },
         };
       },
@@ -95,7 +89,7 @@ export default defineConfig((/* ctx */) => {
     devServer: {
       // https: true,
       open: false, // opens browser window automatically
-      public: 'http://strixx.famor.org:9000',
+      //      public: 'http://strixx.famor.org:9000',
       proxy: {
         // proxy all requests starting with /api to jsonplaceholder
         '/api': {
@@ -108,8 +102,8 @@ export default defineConfig((/* ctx */) => {
           ws: true, // Enable WebSocket proxying
           rewriteWsOrigin: true,
           changeOrigin: true,
-//          rewrite: (path) => path.replace(/^\/socket.io/, ''),
+          //          rewrite: (path) => path.replace(/^\/socket.io/, ''),
-        }
+        },
       },
     },
 
@@ -129,10 +123,7 @@ export default defineConfig((/* ctx */) => {
       // directives: [],
 
       // Quasar plugins
-      plugins: [
+      plugins: ['Dialog', 'Notify'],
-        'Dialog',
-        'Notify',
-      ],
     },
     // animations: 'all', // --- includes all animations
     // https://v2.quasar.dev/options/animations

src/boot/socket.ts

@@ -3,29 +3,56 @@ import type { Socket } from 'socket.io-client';
 import { io } from 'socket.io-client';
 import type { StatusUpdate } from 'src/types';
 
+interface SimulationStatus {
+  status: boolean;
+  data: {
+    latitude: number;
+    longitude: number;
+    start: string;
+    end?: string;
+    next_move?: number;
+  };
+}
+
+interface SimulationRequest {
+  latitude: number;
+  longitude: number;
+  delay?: number;
+  start?: string;
+  end?: string;
+}
+
 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;
+  simulation: (d: SimulationStatus) => 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;
+  set_location: (data: SimulationRequest, callback: (response: SimulationStatus) => void) => void;
   request_update: (callback: (response: { statusUpdate: StatusUpdate }) => void) => void;
-  command: (command: string, callback: (response: { success: boolean; message?: string }) => void ) => void;
+  command: (
-  shutdown: (delay: number, callback: (response: { success: boolean; message?: string }) => void) => void;
+    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<ServerToClientEvents, ClientToServerEvents> = io();
+const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io('/', {
+  autoConnect: true,
+  transports: ['websocket'],
+});
 
 export default defineBoot(({ app }) => {
   app.config.globalProperties.$socket = socket;
 });
 
 export { socket };
- 

src/components/LeafletTest.vue

@@ -42,7 +42,8 @@
 
 <script setup lang="ts">
 import { useQuasar } from "quasar";
-import { Ref, ref } from "vue";
+import type { Ref} from "vue";
+import { ref } from "vue";
 import "leaflet/dist/leaflet.css";
 import { LMap, LTileLayer, LMarker } from "@vue-leaflet/vue-leaflet";
 import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';