From d127a6001dfc1fc4cca187338d1753550a8861f3 Mon Sep 17 00:00:00 2001
From: Dano van den Bosch <boschds@hva.nl>
Date: Tue, 5 Mar 2024 13:38:09 +0100
Subject: [PATCH] Add WebSocket connection error handling and JSON in to array

---
 web/index.html |  2 +-
 web/main.js    | 63 ++++++++++++++++++++++++++++----------------------
 2 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/web/index.html b/web/index.html
index 99ac84f..7398036 100644
--- a/web/index.html
+++ b/web/index.html
@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="styles.css">
   <title>Node dev page</title>
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <!-- <link rel="icon" type="image/x-icon" href="favicon.ico"> -->
 
 </head>
 
diff --git a/web/main.js b/web/main.js
index f40b277..96ae13d 100644
--- a/web/main.js
+++ b/web/main.js
@@ -10,6 +10,7 @@ let valueArray = [1, 2, 3, 4, 5];
 let newValueArray = [4, 5, 6];
 let myValue = 1;
 let intervalDelay = 50;
+const sendorData = [];
 
 // const socket = new WebSocket("ws://127.0.0.1:8001");  
 
@@ -53,7 +54,14 @@ function openConnection() {
 
   // Message handling
   socket.addEventListener("message", (event) => {
-    console.log('Message from server:', event.data);
+    try {
+      const jsonData = JSON.parse(event.data);
+      // Use the parsed JSON data as needed
+      handleIncomingData(jsonData);
+
+  } catch (error) {
+      console.error("Error parsing JSON:", error);
+  }
   });
 
   // Close handling
@@ -62,6 +70,7 @@ function openConnection() {
     // Attempt to reconnect
     setTimeout(openConnection, 1000); // Retry after 1 second
   });
+  console.log("Connected to the WebSocket server!!!!!!!!");
 }
 
 // Open the connection
@@ -69,34 +78,29 @@ openConnection();
 
 
 
+function handleIncomingData(data) {
+  temperature = data.Temp;
+  humidity = data.Humi;
+  CO2 = data.eCO2;
+  TVOC = data.TVOC;
+  
+  // console.log("Temperature: ", temperature);
+  // console.log("Humidity: ", humidity);
+  // console.log("CO2: ", CO2);
+  // console.log("TVOC: ", TVOC);
 
-// socket.onopen = function(e) {
-//   alert("[open] Connection established");
-//   alert("Sending to server");
-//   socket.send("My name is John");
-// };
-
-// socket.onmessage = function(event) {
-//   // alert(`[message] Data received from server: ${event.data}`);
-//   console.log("Data received from server: ", event.data);
-// };
-
-// socket.addEventListener("message", (event) => {
-//   console.log(event.data);
-// });
-
-// function openPort() {
-// socket.addEventListener('open', function (event) {
-//   console.log('Connected to the WebSocket server');
-// });
-// console.log("Connected to the WebSocket server");
-// }
-
-// socket.addEventListener('message', function (event) {
-//   console.log('Message from server:', event.data);
-//   // Here you can handle the received message and update your UI accordingly
-// });
+  sendorData.push({
+    'temp': temperature,
+    'humi': humidity,
+    'CO2': CO2,
+    'TVOC': TVOC,
+  });
+  console.log(sendorData);
 
+  if (sendorData.length >= 10) {
+    sendorData.shift();
+  }
+}
 
 function pushArray(array) {
   for (let i = 0; i < 10; i++) {
@@ -249,4 +253,7 @@ function createNodeData(node) {
 createNodeData(1);
 createNodeData(2);
 createNodeData(3);
-createNodeData(4);
\ No newline at end of file
+createNodeData(4);
+
+
+// openConnection();