diff --git a/mockWebsock.cjs b/mockWebsock.cjs index bed72e3..cd93e13 100644 --- a/mockWebsock.cjs +++ b/mockWebsock.cjs @@ -29,6 +29,7 @@ wss.on('connection', (ws) => { latitude: 7.7, longitude: 8.8, }, + dummyConnection: 0, vehicleStatus: 0, }; @@ -41,6 +42,7 @@ wss.on('connection', (ws) => { 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); diff --git a/src/test-websocket-server.cjs b/src/test-websocket-server.cjs index 1e4465e..6da58d6 100644 --- a/src/test-websocket-server.cjs +++ b/src/test-websocket-server.cjs @@ -11,7 +11,6 @@ const server = http.createServer(app); // Create a WebSocket server instance and attach it to the HTTP server const websocketServer = new WebSocket.Server({ server }); -let battery = 0; //Listen for WebSocket connections websocketServer.on('connection', (socket) => { // Log a message when a new client connects @@ -27,30 +26,38 @@ websocketServer.on('connection', (socket) => { vehicleStatus: 0, } - // continuously send random battery values to client + // continuously send dummy battery, coordinate, and connection values to client using JSON object // var count = 89; var counterIncrement = -1; - const testBattery = setInterval(function() { - count = count+counterIncrement; + setInterval(() => { + count += counterIncrement; if (count == 0 || count == 100 ) { counterIncrement = -counterIncrement; } vehicleData.battery = count; - socket.send(JSON.stringify(vehicleData)); - }, 100); - - // continuously send random coordinate values to client - setInterval(() => { 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); + // 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) => { @@ -61,6 +68,10 @@ websocketServer.on('connection', (socket) => { // 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 diff --git a/src/views/StaticScreen.vue b/src/views/StaticScreen.vue index d170390..e121f87 100644 --- a/src/views/StaticScreen.vue +++ b/src/views/StaticScreen.vue @@ -4,34 +4,50 @@ import Status from '../components/VehicleStatusComponent.vue'; import NavBar from '../components/Navbar.vue'; import { onMounted, ref } from 'vue'; +// for ERU widget const receivedData = ref(null); const batteryPct = ref(0); -const latitude = ref(7.7); -const longitude = ref(8.8); const testCoordinate = ref({longitude: 0, latitude: 0}) const dummyConnection = ref(0); +// for MEA widget +const receivedData2 = ref(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/'); - // uncomment below to use other local websocket server for data for single vehicle widget in Static Screen - let client = new WebSocket('ws://localhost:3000/'); - console.log("Connected to server"); + 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:", receivedData); - batteryPct.value = receivedData.value.battery; + 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.dummy_connection; + 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 battery1 = ref(100); -let battery2 = ref(50); let testCoordinateObject1 = { longitude: -177.9325790, latitude: 33.9325790 @@ -40,44 +56,22 @@ let testCoordinateObject2 = { longitude: 40.748440, latitude: -73.984559 } - -// --- functions to change reactive data randomly to test if individual vue components re-render ---- // -// var count = 89; -// var counterIncrement = -1; -// const testBattery = setInterval(function() { -// count = count+counterIncrement; -// if (count == 0 || count == 100 ) { -// counterIncrement = -counterIncrement; -// } -// battery1.value = count; -// battery2.value = count; -// connection.value = count; -// }, 100); -// const testCoords = setInterval(function() { -// testCoordinate.value.latitude = Number(((Math.random() * (180 - (-180) + 1)) + (-180)).toFixed(6)); -// testCoordinate.value.longitude = Number(((Math.random() * (180 - (-180) + 1)) + (-180)).toFixed(6)); -// }, 100);