Made SSE and Websocket examples more visual

michalpokusa · michalpokusa · commit 7d8c0b1271f4 · 2023-07-31T07:01:43.000Z
diff --git a/docs/examples.rst b/docs/examples.rst
@@ -283,7 +283,7 @@ This might change in the future, but for now, it is recommended to use SSE only
 
 .. literalinclude:: ../examples/httpserver_sse.py
     :caption: examples/httpserver_sse.py
-    :emphasize-lines: 10,17,44-51,61
+    :emphasize-lines: 10,17,46-53,63
     :linenos:
 
 Websockets
@@ -302,7 +302,7 @@ This might change in the future, but for now, it is recommended to use Websocket
 
 .. literalinclude:: ../examples/httpserver_websocket.py
     :caption: examples/httpserver_websocket.py
-    :emphasize-lines: 9,16-17,60-67,76,81
+    :emphasize-lines: 12,21,67-73,83,90
     :linenos:
 
 Multiple servers
diff --git a/examples/httpserver_sse.py b/examples/httpserver_sse.py
@@ -23,11 +23,13 @@
         <title>Server-Sent Events Client</title>
     </head>
     <body>
+        <p>CPU temperature: <strong>-</strong>&deg;C</p>
         <script>
             const eventSource = new EventSource('/connect-client');
+            const cpuTemp = document.querySelector('strong');
 
-            eventSource.onmessage = event => console.log('Event data:', event.data);
-            eventSource.onerror = error => console.error('SSE error:', error);
+            eventSource.onmessage = event => cpuTemp.textContent = event.data;
+            eventSource.onerror = error => cpuTemp.textContent = error;
         </script>
     </body>
 </html>
@@ -58,5 +60,5 @@ def connect_client(request: Request):
     # Send an event every second
     if sse_response is not None and next_event_time < monotonic():
         cpu_temp = round(microcontroller.cpu.temperature, 2)
-        sse_response.send_event(f"CPU: {cpu_temp}°C")
+        sse_response.send_event(str(cpu_temp))
         next_event_time = monotonic() + 1
diff --git a/examples/httpserver_websocket.py b/examples/httpserver_websocket.py
@@ -3,6 +3,9 @@
 # SPDX-License-Identifier: Unlicense
 
 from time import monotonic
+import board
+import microcontroller
+import neopixel
 import socketpool
 import wifi
 
@@ -12,6 +15,8 @@
 pool = socketpool.SocketPool(wifi.radio)
 server = Server(pool, debug=True)
 
+pixel = neopixel.NeoPixel(board.NEOPIXEL, 1)
+
 
 websocket: Websocket = None
 next_message_time = monotonic()
@@ -22,28 +27,30 @@
         <title>Websocket Client</title>
     </head>
     <body>
-        <input id="message" type="text" placeholder="Message..."><br>
-        <button id="send">Send</button>
-
-
+        <p>CPU temperature: <strong>-</strong>&deg;C</p>
+        <p>NeoPixel Color: <input type="color"></p>
         <script>
-            const messageInput = document.querySelector('#message');
-            const sendButton = document.querySelector('#send');
+            const cpuTemp = document.querySelector('strong');
+            const colorPicker = document.querySelector('input[type="color"]');
 
             let ws = new WebSocket('ws://' + location.host + '/connect-websocket');
 
             ws.onopen = () => console.log('WebSocket connection opened');
-            ws.onerror = error => console.error('WebSocket error:', error);
-            ws.onmessage = event => console.log('Received message from server: ', event.data);
-
-            let interval = setInterval(() => ws.send("Hello from client"), 1000);
-
-            ws.onclose = x => {
-                console.log('WebSocket connection closed');
-                clearInterval(interval);
-            };
-
-            sendButton.onclick = () => ws.send(messageInput.value);
+            ws.onclose = () => console.log('WebSocket connection closed');
+            ws.onmessage = event => cpuTemp.textContent = event.data;
+            ws.onerror = error => cpuTemp.textContent = error;
+
+            colorPicker.oninput = debounce(() => ws.send(colorPicker.value), 200);
+
+            function debounce(callback, delay = 1000) {
+                let timeout
+                return (...args) => {
+                    clearTimeout(timeout)
+                    timeout = setTimeout(() => {
+                    callback(...args)
+                  }, delay)
+                }
+            }
         </script>
     </body>
 </html>
@@ -73,10 +80,12 @@ def connect_client(request: Request):
 
     # Check for incoming messages from client
     if websocket is not None:
-        if (message := websocket.receive(True)) is not None:
-            print("Received message from client:", message)
+        if (data := websocket.receive(True)) is not None:
+            r, g, b = int(data[1:3], 16), int(data[3:5], 16), int(data[5:7], 16)
+            pixel.fill((r, g, b))
 
     # Send a message every second
     if websocket is not None and next_message_time < monotonic():
-        websocket.send_message("Hello from server")
+        cpu_temp = round(microcontroller.cpu.temperature, 2)
+        websocket.send_message(str(cpu_temp))
         next_message_time = monotonic() + 1
