ERU widget updates with data from mockWebsock. added option to have MEA widget display data from test-websocket-server to show faster component rendering if needed

changed other local WS server to match Steven's way. this server sends data only to ERU status in StaticScreen
merge DEMO WS
2024-04-13 05:29:07 -07:00 · 2024-04-13 04:37:01 -07:00 · 2024-04-13 02:18:45 -07:00 · 2024-04-13 02:12:57 -07:00 · 2024-04-12 23:59:44 -07:00 · 2024-04-12 23:53:19 -07:00
15 changed files with 439 additions and 159 deletions
--- a/mockWebsock.cjs
+++ b/mockWebsock.cjs
@ -0,0 +1,75 @@
+const WebSocket = require('ws');
+
+// Define the WebSocket server port
+const PORT = 5135;
+
+// Define the server's local IP address
+const serverIpAddress = 'localhost';
+
+// Create a new WebSocket server using the server's local IP address and port
+const wss = new WebSocket.Server({ host: serverIpAddress, port: PORT });
+
+console.log(`Mock WebSocket server listening on ws://${serverIpAddress}:${PORT}/ws`);
+
+// Event listener for new client connections
+wss.on('connection', (ws) => {
+    console.log('New client connected');
+
+    // Sample vehicle data object
+    let vehicleData = {
+        key: 'ERU',
+        speed: 1.1,
+        pitch: 2.2,
+        yaw: 3.3,
+        roll: 4.4,
+        altitude: 5.5,
+        batteryLife: 6.6,
+        lastUpdated: '00:00:00',
+        currentPosition: {
+            latitude: 7.7,
+            longitude: 8.8,
+        },
+        dummyConnection: 0,
+        vehicleStatus: 0,
+    };
+
+    // Send the initial sample data to the client
+    ws.send(JSON.stringify(vehicleData));
+     // continuously send random battery values to client
+    setInterval(() => {
+        vehicleData.altitude = Math.random() * 10000; 
+        vehicleData.batteryLife = Math.floor((Math.random() * (100 - 0 + 1)) + 0);
+        vehicleData.currentPosition.longitude = Number(((Math.random() * (180 - (-180) + 1)) + (-180)).toFixed(6));
+        vehicleData.currentPosition.latitude = Number(((Math.random() * (180 - (-180) + 1)) + (-180)).toFixed(6));
+        vehicleData.lastUpdated = new Date().toLocaleTimeString();
+        vehicleData.dummyConnection = Math.floor((Math.random() * (100 - 0 + 1)) + 0);
+
+        ws.send(JSON.stringify(vehicleData));
+    }, 1000);
+
+    // Event listener for messages from the client
+    ws.on('message', (message) => {
+        console.log(`Received message from client: ${message}`);
+
+        // Parse the received message as JSON
+        const updatedData = JSON.parse(message);
+
+        // Update the vehicleData object with the received data
+        vehicleData = {
+            ...vehicleData,
+            ...updatedData, // Merge the updated data into the existing data
+            lastUpdated: new Date().toLocaleTimeString() // Update the last updated time
+        };
+
+        // Print out the updated data
+        console.log('Updated vehicle data:', vehicleData);
+
+        // Optionally, you can send the updated data back to the client
+        ws.send(JSON.stringify(vehicleData));
+    });
+
+    // Event listener for client disconnection
+    ws.on('close', () => {
+        console.log('Client disconnected');
+    });
+});
--- a/package-lock.json
+++ b/package-lock.json
@ -9,8 +9,10 @@
      "version": "0.0.0",
      "dependencies": {
        "@tauri-apps/api": "^1.4.0",
+        "express": "^4.19.2",
        "vue": "^3.2.45",
-        "vue-router": "^4.3.0"
+        "vue-router": "^4.3.0",
+        "ws": "^8.16.0"
      },
      "devDependencies": {
        "@tauri-apps/cli": "^1.4.0",
@ -2320,7 +2322,6 @@
      "version": "1.3.8",
      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
-      "dev": true,
      "dependencies": {
        "mime-types": "~2.1.34",
        "negotiator": "0.6.3"
@ -2599,8 +2600,7 @@
    "node_modules/array-flatten": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
-      "dev": true
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
    },
    "node_modules/array-union": {
      "version": "2.1.0",
@ -2918,13 +2918,12 @@
      "dev": true
    },
    "node_modules/body-parser": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
-      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
-      "dev": true,
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
+      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
      "dependencies": {
        "bytes": "3.1.2",
-        "content-type": "~1.0.4",
+        "content-type": "~1.0.5",
        "debug": "2.6.9",
        "depd": "2.0.0",
        "destroy": "1.2.0",
@ -2932,7 +2931,7 @@
        "iconv-lite": "0.4.24",
        "on-finished": "2.4.1",
        "qs": "6.11.0",
-        "raw-body": "2.5.1",
+        "raw-body": "2.5.2",
        "type-is": "~1.6.18",
        "unpipe": "1.0.0"
      },
@ -2945,7 +2944,6 @@
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.8"
      }
@ -2954,7 +2952,6 @@
      "version": "2.6.9",
      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
      "dependencies": {
        "ms": "2.0.0"
      }
@ -2962,8 +2959,7 @@
    "node_modules/body-parser/node_modules/ms": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
    },
    "node_modules/bonjour": {
      "version": "3.5.0",
@ -3401,7 +3397,6 @@
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.6.tgz",
      "integrity": "sha512-Mj50FLHtlsoVfRfnHaZvyrooHcrlceNZdL/QBvJJVd9Ta55qCQK0gs4ss2oZDeV9zFCs6ewzYgVE5yfVmfFpVg==",
-      "dev": true,
      "dependencies": {
        "es-errors": "^1.3.0",
        "function-bind": "^1.1.2",
@ -4058,7 +4053,6 @@
      "version": "0.5.4",
      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
-      "dev": true,
      "dependencies": {
        "safe-buffer": "5.2.1"
      },
@ -4070,7 +4064,6 @@
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@ -4082,10 +4075,9 @@
      "dev": true
    },
    "node_modules/cookie": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
-      "dev": true,
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
      "engines": {
        "node": ">= 0.6"
      }
@ -4093,8 +4085,7 @@
    "node_modules/cookie-signature": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
-      "dev": true
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
    },
    "node_modules/copy-concurrently": {
      "version": "1.0.5",
@ -4782,7 +4773,6 @@
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.3.tgz",
      "integrity": "sha512-h3GBouC+RPtNX2N0hHVLo2ZwPYurq8mLmXpOLTsw71gr7lHt5VaI4vVkDUNOfiWmm48JEXe3VM7PmLX45AMmmg==",
-      "dev": true,
      "dependencies": {
        "es-errors": "^1.3.0",
        "get-intrinsic": "^1.2.4",
@ -4893,7 +4883,6 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-      "dev": true,
      "engines": {
        "node": ">= 0.8"
      }
@ -4902,7 +4891,6 @@
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.8",
        "npm": "1.2.8000 || >= 1.4.16"
@ -5168,8 +5156,7 @@
    "node_modules/ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
-      "dev": true
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
    },
    "node_modules/electron-to-chromium": {
      "version": "1.4.667",
@ -5196,7 +5183,6 @@
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
-      "dev": true,
      "engines": {
        "node": ">= 0.8"
      }
@ -5268,7 +5254,6 @@
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
      "engines": {
        "node": ">= 0.4"
      }
@ -5340,8 +5325,7 @@
    "node_modules/escape-html": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-      "dev": true
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
    },
    "node_modules/escape-string-regexp": {
      "version": "1.0.5",
@ -5462,7 +5446,6 @@
      "version": "1.8.1",
      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@ -5553,17 +5536,16 @@
      "dev": true
    },
    "node_modules/express": {
-      "version": "4.18.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
-      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
-      "dev": true,
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
+      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
      "dependencies": {
        "accepts": "~1.3.8",
        "array-flatten": "1.1.1",
-        "body-parser": "1.20.1",
+        "body-parser": "1.20.2",
        "content-disposition": "0.5.4",
        "content-type": "~1.0.4",
-        "cookie": "0.5.0",
+        "cookie": "0.6.0",
        "cookie-signature": "1.0.6",
        "debug": "2.6.9",
        "depd": "2.0.0",
@ -5598,7 +5580,6 @@
      "version": "2.6.9",
      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
      "dependencies": {
        "ms": "2.0.0"
      }
@ -5606,8 +5587,7 @@
    "node_modules/express/node_modules/ms": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
    },
    "node_modules/extend": {
      "version": "3.0.2",
@ -5799,7 +5779,6 @@
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
-      "dev": true,
      "dependencies": {
        "debug": "2.6.9",
        "encodeurl": "~1.0.2",
@ -5817,7 +5796,6 @@
      "version": "2.6.9",
      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
      "dependencies": {
        "ms": "2.0.0"
      }
@ -5825,8 +5803,7 @@
    "node_modules/finalhandler/node_modules/ms": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
    },
    "node_modules/find-cache-dir": {
      "version": "2.1.0",
@ -6176,7 +6153,6 @@
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@ -6211,7 +6187,6 @@
      "version": "0.5.2",
      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@ -6355,7 +6330,6 @@
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
      }
@ -6397,7 +6371,6 @@
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
-      "dev": true,
      "dependencies": {
        "es-errors": "^1.3.0",
        "function-bind": "^1.1.2",
@ -6555,7 +6528,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dev": true,
      "dependencies": {
        "get-intrinsic": "^1.1.3"
      },
@ -6603,7 +6575,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
      "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
-      "dev": true,
      "dependencies": {
        "get-intrinsic": "^1.2.2"
      },
@ -6615,7 +6586,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.4"
      },
@ -6627,7 +6597,6 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
      "engines": {
        "node": ">= 0.4"
      },
@ -6729,7 +6698,6 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz",
      "integrity": "sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==",
-      "dev": true,
      "dependencies": {
        "function-bind": "^1.1.2"
      },
@ -6914,7 +6882,6 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
-      "dev": true,
      "dependencies": {
        "depd": "2.0.0",
        "inherits": "2.0.4",
@ -6991,7 +6958,6 @@
      "version": "0.4.24",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dev": true,
      "dependencies": {
        "safer-buffer": ">= 2.1.2 < 3"
      },
@ -7133,8 +7099,7 @@
    "node_modules/inherits": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
    },
    "node_modules/ini": {
      "version": "1.3.8",
@ -8545,7 +8510,6 @@
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@ -8605,8 +8569,7 @@
    "node_modules/merge-descriptors": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==",
-      "dev": true
+      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
    },
    "node_modules/merge-source-map": {
      "version": "1.1.0",
@ -8637,7 +8600,6 @@
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@ -8679,7 +8641,6 @@
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "dev": true,
      "bin": {
        "mime": "cli.js"
      },
@ -8691,7 +8652,6 @@
      "version": "1.52.0",
      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@ -8700,7 +8660,6 @@
      "version": "2.1.35",
      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
      "dependencies": {
        "mime-db": "1.52.0"
      },
@ -9162,7 +9121,6 @@
      "version": "0.6.3",
      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@ -9364,7 +9322,6 @@
      "version": "1.13.1",
      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
-      "dev": true,
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
      }
@ -9446,7 +9403,6 @@
      "version": "2.4.1",
      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-      "dev": true,
      "dependencies": {
        "ee-first": "1.1.1"
      },
@ -9790,7 +9746,6 @@
      "version": "1.3.3",
      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-      "dev": true,
      "engines": {
        "node": ">= 0.8"
      }
@ -9863,8 +9818,7 @@
    "node_modules/path-to-regexp": {
      "version": "0.1.7",
      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
-      "dev": true
+      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
    },
    "node_modules/path-type": {
      "version": "4.0.0",
@ -10879,7 +10833,6 @@
      "version": "2.0.7",
      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-      "dev": true,
      "dependencies": {
        "forwarded": "0.2.0",
        "ipaddr.js": "1.9.1"
@ -10892,7 +10845,6 @@
      "version": "1.9.1",
      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-      "dev": true,
      "engines": {
        "node": ">= 0.10"
      }
@ -11119,7 +11071,6 @@
      "version": "6.11.0",
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
-      "dev": true,
      "dependencies": {
        "side-channel": "^1.0.4"
      },
@ -11178,16 +11129,14 @@
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
    },
    "node_modules/raw-body": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
-      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
-      "dev": true,
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
      "dependencies": {
        "bytes": "3.1.2",
        "http-errors": "2.0.0",
@ -11202,7 +11151,6 @@
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.8"
      }
@ -12048,7 +11996,6 @@
      "version": "5.2.1",
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "dev": true,
      "funding": [
        {
          "type": "github",
@ -12076,8 +12023,7 @@
    "node_modules/safer-buffer": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
    },
    "node_modules/scheduler": {
      "version": "0.23.0",
@ -12139,7 +12085,6 @@
      "version": "0.18.0",
      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
-      "dev": true,
      "dependencies": {
        "debug": "2.6.9",
        "depd": "2.0.0",
@ -12163,7 +12108,6 @@
      "version": "2.6.9",
      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
      "dependencies": {
        "ms": "2.0.0"
      }
@ -12171,14 +12115,12 @@
    "node_modules/send/node_modules/debug/node_modules/ms": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
    },
    "node_modules/send/node_modules/ms": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
    },
    "node_modules/serialize-javascript": {
      "version": "6.0.2",
@ -12271,7 +12213,6 @@
      "version": "1.15.0",
      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
-      "dev": true,
      "dependencies": {
        "encodeurl": "~1.0.2",
        "escape-html": "~1.0.3",
@ -12292,7 +12233,6 @@
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz",
      "integrity": "sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==",
-      "dev": true,
      "dependencies": {
        "define-data-property": "^1.1.2",
        "es-errors": "^1.3.0",
@ -12337,8 +12277,7 @@
    "node_modules/setprototypeof": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
-      "dev": true
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
    },
    "node_modules/shallow-clone": {
      "version": "3.0.1",
@ -12387,7 +12326,6 @@
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.5.tgz",
      "integrity": "sha512-QcgiIWV4WV7qWExbN5llt6frQB/lBven9pqliLXfGPB+K9ZYXxDozp0wLkHS24kWCm+6YXH/f0HhnObZnZOBnQ==",
-      "dev": true,
      "dependencies": {
        "call-bind": "^1.0.6",
        "es-errors": "^1.3.0",
@ -12805,7 +12743,6 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-      "dev": true,
      "engines": {
        "node": ">= 0.8"
      }
@ -13478,7 +13415,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
-      "dev": true,
      "engines": {
        "node": ">=0.6"
      }
@ -13563,7 +13499,6 @@
      "version": "1.6.18",
      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-      "dev": true,
      "dependencies": {
        "media-typer": "0.3.0",
        "mime-types": "~2.1.24"
@ -13762,7 +13697,6 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
-      "dev": true,
      "engines": {
        "node": ">= 0.8"
      }
@ -13957,7 +13891,6 @@
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
-      "dev": true,
      "engines": {
        "node": ">= 0.4.0"
      }
@ -14000,7 +13933,6 @@
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.8"
      }
@ -16485,6 +16417,28 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/webpack-bundle-analyzer/node_modules/ws": {
+      "version": "7.5.9",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/webpack-chain": {
      "version": "6.5.1",
      "resolved": "https://registry.npmjs.org/webpack-chain/-/webpack-chain-6.5.1.tgz",
@ -16731,28 +16685,6 @@
        "url": "https://opencollective.com/webpack"
      }
    },
-    "node_modules/webpack-dev-server/node_modules/ws": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
-      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
-      "dev": true,
-      "peer": true,
-      "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/webpack-log": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-2.0.0.tgz",
@ -16953,17 +16885,15 @@
      "dev": true
    },
    "node_modules/ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true,
-      "peer": true,
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
+      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
      "engines": {
-        "node": ">=8.3.0"
+        "node": ">=10.0.0"
      },
      "peerDependencies": {
        "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
+        "utf-8-validate": ">=5.0.2"
      },
      "peerDependenciesMeta": {
        "bufferutil": {
--- a/package.json
+++ b/package.json
@ -12,8 +12,10 @@
  },
  "dependencies": {
    "@tauri-apps/api": "^1.4.0",
+    "express": "^4.19.2",
    "vue": "^3.2.45",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "ws": "^8.16.0"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^1.4.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -14,6 +14,9 @@ dependencies:
  vue-router:
    specifier: ^4.3.0
    version: 4.3.0(vue@3.2.45)
+  ws:
+    specifier: ^8.16.0
+    version: 8.16.0

 devDependencies:
  '@tauri-apps/cli':
@ -8914,6 +8917,7 @@ packages:
      '@vue/devtools-api': 6.6.1
      vue: 3.2.45
    dev: false
+
  /vue-style-loader@4.1.3:
    resolution: {integrity: sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==}
    dependencies:
@ -9451,7 +9455,6 @@ packages:
        optional: true
      utf-8-validate:
        optional: true
-    dev: true

  /xtend@4.0.2:
    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
--- a/src/client.js
+++ b/src/client.js
@ -0,0 +1,11 @@
+import WebSocket from 'ws';
+
+// this file was just to test receiving stuff from websocket connection. WebSocket connection is being used in StaticScreen.vue
+let client = new WebSocket('ws://localhost:3000/');
+client.on('open', () => {
+    client.send('Hello');
+})
+
+client.addEventListener("message", (event) => {
+    console.log(`Message from server: ${event.data}`);
+});
--- a/src/components/Camera.vue
+++ b/src/components/Camera.vue
@ -3,7 +3,7 @@
    props: ['cameraID'],
    data() {
      return {
-        localIp: 'http://localhost', //maybe change accordingly .env?
+        localIp: 'http://192.168.1.65', //maybe change accordingly .env?
        port: '5000', //maybe change accordingly
        cameraUrls: { 
          1: 'video_feed', //cam url here
--- a/src/components/Greet.vue
+++ b/src/components/Greet.vue
@ -1,12 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { invoke } from "@tauri-apps/api/tauri";
-
-const greetMsg = ref("");
-const name = ref("");
-
-async function greet() {
-  // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-  greetMsg.value = await invoke("greet", { name: name.value });
-}
-</script>
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@ -80,7 +80,7 @@ export default {
          <!-- Insert your menu items here -->
          <li><a href="#" style="text-decoration: none;">Home</a></li>
          <li><a href="#" style="text-decoration: none;" @click="openNewWindow">Link</a></li>
-          <li><router-link to="/1" style="text-decoration: none;">Disabled</router-link></li>
+          <li><router-link to="/test" style="text-decoration: none;">Disabled</router-link></li>
        </ul>
      </div>
    </nav>
--- a/src/components/mockWS.vue
+++ b/src/components/mockWS.vue
@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { ref, onBeforeUnmount } from "vue";
+
+// const webSocketUrl = "ws://192.168.1.65:5135/ws"; // WebSocket server URL
+const webSocketUrl = "ws://localhost:5135/ws"; // WebSocket server URL
+const socket = ref<WebSocket | null>(null);
+const receivedData = ref<any>(null);
+
+// Reactive variables for user input
+const key = ref("Vehicle");
+const speed = ref<number>(0);
+const pitch = ref<number>(0);
+const yaw = ref<number>(0);
+const roll = ref<number>(0);
+const altitude = ref<number>(0);
+const batteryLife = ref<number>(0);
+const latitude = ref<number>(0);
+const longitude = ref<number>(0);
+
+// Function to establish the WebSocket connection
+function establishWebSocketConnection() {
+  socket.value = new WebSocket(webSocketUrl);
+
+  // Set up event listeners
+  socket.value.onopen = () => {
+    console.log("WebSocket connection opened.");
+  };
+
+  socket.value.onmessage = (event: MessageEvent) => {
+    // Handle incoming message
+    const data = JSON.parse(event.data);
+    console.log("Received data:", data);
+    
+    // Update receivedData with the parsed data
+    receivedData.value = data;
+  };
+
+  socket.value.onerror = (error: Event) => {
+    console.error("WebSocket error:", error);
+  };
+
+  socket.value.onclose = () => {
+    console.log("WebSocket connection closed.");
+  };
+}
+
+// Function to send updated vehicle data to the server
+function sendUpdatedData() {
+  if (socket.value) {
+    // Create a vehicle data object using user input
+    const updatedData = {
+      key: key.value,
+      speed: speed.value,
+      pitch: pitch.value,
+      yaw: yaw.value,
+      roll: roll.value,
+      altitude: altitude.value,
+      batteryLife: batteryLife.value,
+      lastUpdated: new Date().toLocaleTimeString(),
+      currentPosition: {
+        latitude: latitude.value,
+        longitude: longitude.value,
+      },
+      vehicleStatus: receivedData.value?.vehicleStatus ?? 0, // Use existing vehicle status if available
+    };
+
+    // Send the updated data to the server as a JSON string
+    socket.value.send(JSON.stringify(updatedData));
+    console.log("Sent updated data:", updatedData);
+  }
+}
+
+// Establish the WebSocket connection when the component is created
+establishWebSocketConnection();
+
+// Close the WebSocket connection on component unmount
+onBeforeUnmount(() => {
+  if (socket.value) {
+    socket.value.close();
+  }
+});
+
+</script>
+
+<template>
+  <div>
+    <h1>Vehicle Data</h1>
+    <div v-if="receivedData">
+      <p><strong>Key:</strong> {{ receivedData.key }}</p>
+      <p><strong>Speed:</strong> {{ receivedData.speed }}</p>
+      <p><strong>Pitch:</strong> {{ receivedData.pitch }}</p>
+      <p><strong>Yaw:</strong> {{ receivedData.yaw }}</p>
+      <p><strong>Roll:</strong> {{ receivedData.roll }}</p>
+      <p><strong>Altitude:</strong> {{ receivedData.altitude }}</p>
+      <p><strong>Battery Life:</strong> {{ receivedData.batteryLife }}</p>
+      <p><strong>Last Updated:</strong> {{ receivedData.lastUpdated }}</p>
+      <p><strong>Current Position:</strong> 
+        <p>Latitude: {{ receivedData.currentPosition.latitude }}</p>
+        <P>Longitude: {{ receivedData.currentPosition.longitude }}</P>
+      </p>
+      <p><strong>Vehicle Status:</strong> {{ receivedData.vehicleStatus }}</p>
+    </div>
+    <div v-else>
+      <p>No data received yet.</p>
+    </div>
+    
+    <h2>Update Vehicle Data</h2>
+    <form @submit.prevent="sendUpdatedData">
+      <div>
+        <label>Key:</label>
+        <input type="text" v-model="key" />
+      </div>
+      <div>
+        <label>Speed:</label>
+        <input type="number" v-model="speed" step="0.1" />
+      </div>
+      <div>
+        <label>Pitch:</label>
+        <input type="number" v-model="pitch" step="0.1" />
+      </div>
+      <div>
+        <label>Yaw:</label>
+        <input type="number" v-model="yaw" step="0.1" />
+      </div>
+      <div>
+        <label>Roll:</label>
+        <input type="number" v-model="roll" step="0.1" />
+      </div>
+      <!-- <div>
+        <label>Altitude:</label>
+        <input type="number" v-model="altitude" step="0.1" />
+      </div> -->
+      <!-- <div>
+        <label>Battery Life:</label>
+        <input type="number" v-model="batteryLife" step="0.1" />
+      </div> -->
+      <!-- <div>
+        <label>Latitude:</label>
+        <input type="number" v-model="latitude" step="0.1" />
+      </div>
+      <div>
+        <label>Longitude:</label>
+        <input type="number" v-model="longitude" step="0.1" />
+      </div> -->
+      <button type="submit">Send Updated Data</button>
+    </form>
+  </div>
+</template>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -3,7 +3,7 @@ import HomeScreen from "../views/HomeScreen.vue";
 import StaticScreen from "../views/StaticScreen.vue";
 import Cam2Focus from "../views/Cam2Focus.vue";
 import CamFocus from "../views/CamFocus.vue";
-import test from "../views/test.vue";
+import mockWS from "../views/mockWS.vue";


 const routes = [
@ -11,7 +11,7 @@ const routes = [
  { path: '/1', component: StaticScreen },
  { path: '/2', component: Cam2Focus },
  { path: '/CamFocus/:id', component: CamFocus },
-  { path: '/test', component: test },
+  { path: '/test', component: mockWS },
 ]

 const router = createRouter({
--- a/src/test-websocket-server.cjs
+++ b/src/test-websocket-server.cjs
@ -0,0 +1,80 @@
+// Import required modules
+const express = require("express");
+const http = require("http");
+const WebSocket = require("ws");
+
+// Create an Express app instance
+const app = express();
+// Create an HTTP server using the Express app instance
+const server = http.createServer(app);
+
+// Create a WebSocket server instance and attach it to the HTTP server
+const websocketServer = new WebSocket.Server({ server });
+
+//Listen for WebSocket connections
+websocketServer.on('connection', (socket) => {
+    // Log a message when a new client connects
+    console.log('client connected.');
+
+    let vehicleData = {
+        battery: 6.6,
+        currentPosition: {
+            latitude: 7.7,
+            longitude: 8.8,
+        },
+        dummy_connection: 0,
+        vehicleStatus: 0,
+    }
+
+    // continuously send dummy battery, coordinate, and connection values to client using JSON object //
+    var count = 89;
+    var counterIncrement = -1;
+    setInterval(() => {
+        count += counterIncrement;
+        if (count == 0 || count == 100 ) {
+            counterIncrement = -counterIncrement;
+        }
+        vehicleData.battery = count;
+        vehicleData.currentPosition.longitude = Number(((Math.random() * (180 - (-180) + 1)) + (-180)).toFixed(6));
+        vehicleData.currentPosition.latitude = Number(((Math.random() * (180 - (-180) + 1)) + (-180)).toFixed(6));
+        vehicleData.dummy_connection = Math.floor((Math.random() * (100 - 0 + 1)) + 0);
+        socket.send(JSON.stringify(vehicleData));
+    }, 100);
+
+    // continuously send random battery values to client
+    // var count = 89;
+    // var counterIncrement = -1;
+    // const testBattery = setInterval(function() {
+    //     count = count+counterIncrement;
+    //     if (count == 0 || count == 100 ) {
+    //         counterIncrement = -counterIncrement;
+    //     }
+    //     vehicleData.battery = count;
+    //     socket.send(JSON.stringify(vehicleData));
+    // }, 100);
+
+    // continuously send random connection values to client
+    // setInterval(() => {
+    //     vehicleData.dummy_connection = Math.floor((Math.random() * (100 - 0 + 1)) + 0);
+    //     socket.send(JSON.stringify(vehicleData));
+    //  }, 1000);
+
+    // Listen for incoming WebSocket messages
+    socket.on('message', (message) => {
+        socket.send(`Your message ${message}`);
+    });
+    // Listen for WebSocket connection close events
+    socket.on('close', () => {
+      // Log a message when a client disconnects
+      console.log('Client disconnected');
+    });
+
+    socket.on('close', () => {
+        console.log('client disconnected');
+    });
+});
+
+// Start the server listening on port 3000
+server.listen(3000, () => {
+    console.log("Websocket server started on port 3000");
+});
--- a/src/views/HomeScreen.vue
+++ b/src/views/HomeScreen.vue
@ -17,7 +17,7 @@ const handleClick = (cameraID:number) => {
 <template>
    <div class="grid">
        <div class="hover" style="position: relative; display: flex;" @click="handleClick(2)">
-            <Camera :cameraID="2"/>
+            <Camera :cameraID="1"/>
            <Battery :percentage=85 :charging="false" class="battery_test"/>
            <Connection :latency=65 class="connection_test"/>   
            <!-- the Battery and Connection component's size is dependent on its parent element. So changing 'status_div' size will change their size-->
--- a/src/views/StaticScreen.vue
+++ b/src/views/StaticScreen.vue
@ -2,8 +2,53 @@
 import Camera from "../components/Camera.vue";
 import Status from '../components/VehicleStatusComponent.vue';
 import NavBar from '../components/Navbar.vue';
+import { onMounted, ref } from 'vue';

-let testCoordinateObject = {
+// for ERU widget
+const receivedData = ref<any>(null);
+const batteryPct = ref(0);
+const testCoordinate = ref({longitude: 0, latitude: 0})
+const dummyConnection = ref(0);
+// for MEA widget
+const receivedData2 = ref<any>(null);
+const batteryPct2 = ref(78);
+const testCoordinate2 = ref({longitude: 57.848923, latitude: -67.384919})
+const dummyConnection2 = ref(65);
+
+// create websocket connection once Static Screen finishes initial rendering
+onMounted(() => {
+    let client = new WebSocket('ws://localhost:5135/');
+    console.log("Connected to 5135 server");
+
+    client.addEventListener("message", (event) => {
+        const data = JSON.parse(event.data);
+        receivedData.value = data; 
+
+        console.log("Received data from mockWebsock:", receivedData);
+        batteryPct.value = receivedData.value.batteryLife;
+        testCoordinate.value.latitude = receivedData.value.currentPosition.latitude;
+        testCoordinate.value.longitude = receivedData.value.currentPosition.longitude;
+        dummyConnection.value = receivedData.value.dummyConnection;
+    });
+
+    // -- uncomment below to use test-websocket-server.cjs for data for single vehicle widget in Static Screen -- //
+    let client2 = new WebSocket('ws://localhost:3000/');
+    console.log("Connected to port 3000 server")
+
+    client2.addEventListener("message", (event) => {
+        const data = JSON.parse(event.data);
+        receivedData2.value = data;
+
+        console.log("Received data from test-websocket-server:", receivedData2);
+        batteryPct2.value = receivedData2.value.battery;
+        testCoordinate2.value.latitude = receivedData2.value.currentPosition.latitude;
+        testCoordinate2.value.longitude = receivedData2.value.currentPosition.longitude;
+        dummyConnection2.value = receivedData2.value.dummy_connection;
+    });
+});
+
+// --- testing with dummy reactive data --- //
+let testCoordinateObject1 = {
        longitude: -177.9325790,
        latitude: 33.9325790
    }
@ -20,16 +65,13 @@ let testCoordinateObject2 = {

    <div class="four-status-rightside">
        <!-- For final product, pass in a Vehicle Object instead that contains all of the information for the VehicleStatusComponent to display-->
-        <Status :batteryPct=100 :latency=50 :coordinates="testCoordinateObject2" :vehicleName="'ERU'" :vehicleStatus="'In Use'"/>
-        <Status :batteryPct=48 :latency=30 :coordinates="testCoordinateObject" :vehicleName="'MEA'" :vehicleStatus="'Standby'"/>
+        <Status :batteryPct=batteryPct :latency=dummyConnection :coordinates=testCoordinate :vehicleName="'ERU'" :vehicleStatus="'In Use'"/>
+        <Status :batteryPct=batteryPct2 :latency=dummyConnection2 :coordinates=testCoordinate2 :vehicleName="'MEA'" :vehicleStatus="'Standby'"/>
        <Status :batteryPct=0 :latency=100 :coordinates="testCoordinateObject2" :vehicleName="'MRA'" :vehicleStatus="'Offline'"/>
-        <Status :batteryPct=10 :latency=0 :coordinates="testCoordinateObject" :vehicleName="'FRA'" :vehicleStatus="'Offline'"/>
+        <Status :batteryPct=10 :latency=0 :coordinates="testCoordinateObject1" :vehicleName="'FRA'" :vehicleStatus="'Offline'"/>
    </div>
  </div>

-    <!-- <div class="camera-container">
-       this is static screen
-    </div> -->
 </template>
  
 <style scoped>
--- a/src/views/mockWS.vue
+++ b/src/views/mockWS.vue
@ -1,5 +1,6 @@
 <script setup lang="ts">
-
+import mockWS from "../components/mockWS.vue";
+ 

 </script>

@ -7,7 +8,7 @@
    <div class="grid">
        <div>
            <h1>
-                TESTESTES
+                <mockWS/>
            </h1>
        </div>
    </div>
--- a/tsconfig.json
+++ b/tsconfig.json
@ -13,6 +13,6 @@
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true
  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/test-websocket-server.cjs"],
  "references": [{ "path": "./tsconfig.node.json" }]
 }
Author	SHA1	Message	Date
chillwafflez	d0020a7ce6	ERU widget updates with data from mockWebsock. added option to have MEA widget display data from test-websocket-server to show faster component rendering if needed	2024-04-13 05:29:07 -07:00
chillwafflez	e41c1c6fad	changed other local WS server to match Steven's way. this server sends data only to ERU status in StaticScreen	2024-04-13 04:37:01 -07:00
Steven C	6eb1c61197	merge DEMO WS	2024-04-13 02:18:45 -07:00
Steven C	7d3eddaa69	merged demo WS	2024-04-13 02:12:57 -07:00
Steven C	c3f17823cb	merge demo WS	2024-04-12 23:59:44 -07:00
Steven C	84d0dd35d9	mockWS	2024-04-12 23:53:19 -07:00
chillwafflez	75c029f6ac	initial commit: added local express websocket server to send dummy battery values to UI every second for battery component to display	2024-04-12 22:39:45 -07:00