Finished web socket communication

2026-08-09 08:43:20 -06:00
parent 8c53ba5298
commit b782867c69
4 changed files with 99 additions and 59 deletions
@@ -4,7 +4,8 @@ WebService::WebService(DashboardState& state)
    :
    Service("Web", 10),
    dashboardState(state),
-    server(80)
+    server(80),
+    webSocket(81)
 {
 }

@@ -65,31 +66,35 @@ h1 {
 </style>

 <script>
-function updateUptime() {
-  fetch('/uptime')
-    .then(response => response.text())
-    .then(data => {
-      document.getElementById("uptime").innerHTML = data;
-    });
+
+let socket;
+
+function connectWebSocket() {
+    socket = new WebSocket(
+        "ws://" + window.location.hostname + ":81/"
+    );
+
+    socket.onopen = function() {
+        console.log("WebSocket connected");
+    };
+
+    socket.onmessage = function(event) {
+        const data = JSON.parse(event.data);
+
+        document.getElementById("uptime").innerHTML = data.uptime;
+        document.getElementById("firmware_version").innerHTML = data.version;
+    };
+
+    socket.onclose = function() {
+        console.log("WebSocket disconnected");
+        setTimeout(connectWebSocket, 2000);
+    };
 }

-setInterval(updateUptime, 1000);
-window.onload = updateUptime;
+window.onload = connectWebSocket;
+
 </script>

-<script>
-function getVersion() {
-  fetch('/version')
-    .then(response => response.text())
-    .then(data => {
-      document.getElementById("firmware_version").innerHTML = data;
-    });
-}
-
-window.onload = getVersion;
-</script>
-
-
 </head>

 <body>
@@ -105,18 +110,22 @@ Firmware Version: <div id="firmware_version">Loading...</div>
 </html>
 )rawliteral";

-  
-//   server.send(200, "text/html", html);
-// }
-// 
-// void handleUptime() {
-//   server.send(200, "text/plain", formatUptime());
-// }
-// 
-// void handleVersion() {
-//   server.send(200, "text/plain", FIRMWARE_VERSION);
-// }
-// 
+void WebService::broadcastState()
+{
+    String json = "{";
+
+    json += "\"uptime\":\"";
+    json += dashboardState.uptime;
+    json += "\",";
+
+    json += "\"version\":\"";
+    json += dashboardState.firmwareVersion;
+    json += "\"";
+
+    json += "}";
+
+    webSocket.broadcastTXT(json);
+}

 void WebService::begin() {
    // Root path
@@ -128,34 +137,59 @@ void WebService::begin() {
                    );    
    });

-    // Version path
-    server.on("/version", [this](){
-        server.send(
-                    200,
-                    "text/plain",
-                    dashboardState.firmwareVersion
-                    );
-    });
-
-    // Uptime path
-    server.on("/uptime", [this]() {
-        server.send(
-                    200,
-                    "text/plain",
-                    dashboardState.uptime
-                    );
-                    
-    });
-
-
    server.begin();

+    webSocket.begin();
+
+    // Manage web socket connections
+    webSocket.onEvent(
+        [this](uint8_t clientNum,
+               WStype_t type,
+               uint8_t *payload,
+               size_t length)
+        {
+            if (type == WStype_TEXT) {
+                handleWebSocketMessage(
+                    clientNum,
+                    payload,
+                    length
+                );
+            }
+
+            if (type == WStype_CONNECTED) {
+                Serial.println("WebSocket client connected");
+                broadcastState();
+            }
+        }
+    );
+
    Serial.println("Web server started");
 }

+void WebService::handleWebSocketMessage(uint8_t clientNum, uint8_t *payload, size_t length) {
+    Serial.println("Client number: " + clientNum);
+    Serial.println("Sent a message of length: " + length);
+    Serial.print("Saying: ");
+    for (int ii = 0; ii < length; ii ++) {
+        Serial.print(payload[ii]);
+    }
+    Serial.print("\n\n\n");
+}
+

 void WebService::update()
 {
    dashboardState.update();
+
    server.handleClient();
+    webSocket.loop();
+
+    // Brodcase updates once per second
+    static unsigned long lastUpdate = 0;
+
+    if (millis() - lastUpdate >= 1000)
+    {
+        lastUpdate = millis();
+        broadcastState();
+    }    
 }