merged demo WS

mockWebsock.js

@@ -0,0 +1,73 @@
+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: 'Vehicle 3',
+        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,
+        },
+        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();
+
+        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');
+    });
+});

src/views/StaticScreen.vue

@@ -4,19 +4,26 @@ import Status from '../components/VehicleStatusComponent.vue';
 import NavBar from '../components/Navbar.vue';
 import { onMounted, ref } from 'vue';
 
+const receivedData = ref<any>(null);
+const battery1 = ref(0);
+const latitude = ref<number>(7.7);
+const longitude = ref<number>(8.8);
 // create websocket connection once Static Screen finishes initial rendering
 onMounted(() => {
-    let client = new WebSocket('ws://localhost:3000/');
+    let client = new WebSocket('ws://localhost:5135/');
     console.log("Connected to server");
 
     client.addEventListener("message", (event) => {
-        console.log(`Message from server: ${event.data}`);
+        // Handle incoming message
-        battery1.value = event.data;
+        const data = JSON.parse(event.data);
+        receivedData.value = data; 
+        console.log("Received data:", receivedData);
+        battery1.value = receivedData.value.batteryLife;
     });
 });
 
 // --- testing with dummy reactive data --- //
-let battery1 = ref(100); 
+//let battery1 = ref(100); 
 let battery2 = ref(50);
 let connection = ref(100);
 let testCoordinate = ref({longitude: 40.748440, latitude: -73.984559})
@@ -51,7 +58,9 @@ let testCoordinateObject2 = {
   <div class="screen_div">
     <!-- Map component will be placed below -->
     <div class="map_div"></div>
-
+    <!-- <p v-if="receivedData && receivedData.currentPosition">
+        Latitude: {{ receivedData.currentPosition.latitude }}, Longitude: {{ receivedData.currentPosition.longitude }}
+    </p> -->
     <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=battery1 :latency=connection :coordinates="testCoordinate" :vehicleName="'ERU'" :vehicleStatus="'In Use'"/>