Update WebSocket example

mathieucarbou · mathieucarbou · commit e175568c2f95 · 2025-12-05T10:26:49.000+01:00
diff --git a/examples/WebSocket/WebSocket.ino b/examples/WebSocket/WebSocket.ino
@@ -19,6 +19,42 @@
 
 #include <ESPAsyncWebServer.h>
 
+static const char *htmlContent PROGMEM = R"(
+<!DOCTYPE html>
+<html>
+<head>
+  <title>WebSocket</title>
+</head>
+<body>
+  <h1>WebSocket Example</h1>
+  <p>Open your browser console!</p>
+  <input type="text" id="message" placeholder="Type a message">
+  <button onclick='sendMessage()'>Send</button>
+  <script>
+    var ws = new WebSocket('ws://192.168.4.1/ws');
+    ws.onopen = function() {
+      console.log("WebSocket connected");
+    };
+    ws.onmessage = function(event) {
+      console.log("WebSocket message: " + event.data);
+    };
+    ws.onclose = function() {
+      console.log("WebSocket closed");
+    };
+    ws.onerror = function(error) {
+      console.log("WebSocket error: " + error);
+    };
+    function sendMessage() {
+      var message = document.getElementById("message").value;
+      ws.send(message);
+      console.log("WebSocket sent: " + message);
+    }
+  </script>
+</body>
+</html>
+  )";
+static const size_t htmlContentLength = strlen_P(htmlContent);
+
 static AsyncWebServer server(80);
 static AsyncWebSocket ws("/ws");
 
@@ -30,6 +66,11 @@ void setup() {
   WiFi.softAP("esp-captive");
 #endif
 
+  // serves root html page
+  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
+    request->send(200, "text/html", (const uint8_t *)htmlContent, htmlContentLength);
+  });
+
   //
   // Run in terminal 1: websocat ws://192.168.4.1/ws => should stream data
   // Run in terminal 2: websocat ws://192.168.4.1/ws => should stream data
diff --git a/examples/WebSocketEasy/WebSocketEasy.ino b/examples/WebSocketEasy/WebSocketEasy.ino
@@ -40,7 +40,7 @@ static const char *htmlContent PROGMEM = R"(
 </head>
 <body>
   <h1>WebSocket Example</h1>
-  <>Open your browser console!</p>
+  <p>Open your browser console!</p>
   <input type="text" id="message" placeholder="Type a message">
   <button onclick='sendMessage()'>Send</button>
   <script>
