Arduino UNO Q - WebSocket
Das Arduino UNO Q unterstützt WebSocket sofort über den WebUI Brick — keine zusätzliche Bibliothek nötig, kein separater Server-Prozess zu starten. Der WebUI Brick stellt einen Socket.IO-WebSocket-Server auf demselben Port 7000 wie der HTTP-Dateiserver bereit. Python verarbeitet eingehende Ereignisse mit ui.on_message() und sendet Daten mit ui.send_message() an einen Client oder alle Clients zurück. Im Browser verbindet sich der Socket.IO-Client automatisch und verwendet socket.emit(), um Ereignisse zu senden, und socket.on(), um sie zu empfangen.
Dieses Tutorial vermittelt das WebSocket-Muster auf Arduino UNO Q anhand eines einfachen LED-Steuerungsbeispiels: Das Anklicken einer Schaltfläche im Browser schaltet die integrierte LED auf dem Board um und aktualisiert den Status sofort für jeden verbundenen Browser — kein Neuladen der Seite, keine Abfrage erforderlich.
In diesem Tutorial erfahren Sie:
- Wie der WebUI Brick neben dem HTTP-Dateiserver auf Port 7000 einen integrierten Socket.IO-WebSocket-Server bereitstellt
- Wie Sie ui.on_message(event, handler) in Python verwenden, um eingehende WebSocket-Ereignisse vom Browser zu verarbeiten
- Wie Sie ui.send_message(event, data) verwenden, um an alle verbundenen Clients zu übertragen
- Wie Sie ui.send_message(event, data, client) verwenden, um nur an einen einzelnen Client zu antworten
- Wie Sie MCU-Funktionen von Python aus mit Bridge.call() aufrufen
- Wie Sie den Socket.IO-Client im Browser laden und socket.emit() und socket.on() verwenden
Hardware erforderlich
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.
Es werden keine externen Komponenten benötigt — dieses Tutorial verwendet die integrierte LED auf Arduino UNO Q.
Über WebSocket auf Arduino UNO Q
- WebUI Brick Socket.IO-Server: Der WebUI Brick startet sowohl einen HTTP-Dateiserver als auch einen Socket.IO-WebSocket-Server auf Port 7000. Sie müssen Flask, die WebSockets-Bibliothek oder ein anderes Paket nicht installieren — der Brick verwaltet alles automatisch. Das Socket.IO-Client-Skript wird unter /socket.io/socket.io.js bereitgestellt, sodass die HTML-Seite es direkt vom Board laden kann.
- Python-Ereignishandler: Registrieren Sie einen Handler für ein eingehendes Browser-Ereignis mit ui.on_message("event_name", handler). Der Handler empfängt zwei Argumente: client (der Absender) und data (die JSON-Nutzlast). Um nur dem Absender zu antworten, rufen Sie ui.send_message("event_name", payload, client) auf. Um an alle verbundenen Clients zu übertragen, lassen Sie das dritte Argument weg: ui.send_message("event_name", payload).
- Browser Socket.IO-Client: Fügen Sie /socket.io/socket.io.js in die HTML-Seite ein, öffnen Sie dann eine Verbindung mit const socket = io("http://" + window.location.host). Senden Sie ein Ereignis mit socket.emit("event_name", {}) und überwachen Sie Server-Ereignisse mit socket.on("event_name", function(data) { ... }).
- MCU-Aufrufe von Python: Verwenden Sie Bridge.call("function_name", argument) in Python, um eine Funktion aufzurufen, die in der MCU-Skizze mit Bridge.provide("function_name", handler) registriert ist. Dies ist die Möglichkeit für Python, Hardware von einem WebSocket-Ereignis aus zu steuern.
Arduino UNO Q Code
Das Arduino UNO Q hat zwei Prozessoren, die zusammenarbeiten:
- Der STM32 MCU macht eine set_led-Funktion über Bridge verfügbar, die die integrierte LED ein- oder ausschaltet.
- Das Qualcomm MPU führt eine Python-App aus, die auf WebSocket-Ereignisse vom Browser überwacht, Bridge aufruft, um die LED zu steuern, und den neuen LED-Status an alle verbundenen Clients sendet.
MCU-Code
/*
* Dieser Arduino UNO Q Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO Q Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/arduino-uno-q/arduino-uno-q-websocket
*/
#include <Arduino_RouterBridge.h>
void set_led(bool state) {
// LOW turns the built-in LED on for most Arduino boards
digitalWrite(LED_BUILTIN, state ? LOW : HIGH);
}
void setup() {
pinMode(LED_BUILTIN, OUTPUT);
digitalWrite(LED_BUILTIN, HIGH); // Start with LED off
Bridge.begin();
Bridge.provide("set_led", set_led);
}
void loop() {}
Python-Code
/*
* Dieser Arduino UNO Q Code wurde von newbiely.de entwickelt
* Dieser Arduino UNO Q Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/arduino-uno-q/arduino-uno-q-websocket
*/
from arduino.app_utils import *
from arduino.app_bricks.web_ui import WebUI
led_on = False
def on_toggle(client, data):
global led_on
led_on = not led_on
Bridge.call("set_led", led_on)
ui.send_message("led_status", {"on": led_on})
def on_get_state(client, data):
ui.send_message("led_status", {"on": led_on}, client)
ui = WebUI()
ui.on_message("toggle_led", on_toggle)
ui.on_message("get_state", on_get_state)
App.run()
HTML (assets/index.html)
Speichern Sie diese Datei im assets/-Ordner Ihrer App. Sie lädt den Socket.IO-Client vom WebUI Brick (/socket.io/socket.io.js) und zeigt eine Schaltfläche an, die die integrierte LED umschaltet:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket LED - DIYables</title>
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: white; height: 100vh;
display: flex; flex-direction: column;
}
.navbar {
background: #f8f9fa; padding: 10px 20px;
border-bottom: 1px solid #e9ecef;
display: flex; justify-content: space-between; align-items: center;
}
.nav-home {
color: #667eea; text-decoration: none; font-size: 1.1em;
font-weight: bold; padding: 8px 12px; border-radius: 6px;
background: rgba(102,126,234,0.1); transition: all 0.3s;
}
.nav-home:hover { background: rgba(102,126,234,0.2); transform: scale(1.05); }
.nav-tutorial {
color: #007bff; text-decoration: none; font-size: 1em;
font-weight: bold; padding: 8px 12px; border-radius: 6px;
background: rgba(0,123,255,0.1); transition: all 0.3s;
}
.nav-tutorial:hover { background: rgba(0,123,255,0.2); transform: scale(1.05); }
.status-bar {
background: #f8f9fa; padding: 5px 20px;
border-bottom: 1px solid #e9ecef;
text-align: center; font-size: 0.9em; color: black;
}
.status-bar #connectionText { font-weight: bold; }
.main {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 32px;
}
h1 { color: #333; font-size: 2em; }
.led-btn {
width: 200px; height: 200px; border-radius: 50%;
border: 8px solid #ccc; background: #e0e0e0;
cursor: pointer; font-size: 1.4em; font-weight: bold;
color: #555; transition: all 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.led-btn.on {
background: #ffeb3b; border-color: #f9a825;
color: #333; box-shadow: 0 0 40px rgba(255,235,59,0.7);
}
.led-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.status-text { font-size: 1.2em; color: #555; }
.footer {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white; text-align: center; font-size: 0.9em;
height: 40px; display: flex; align-items: center; justify-content: center;
}
.footer a { color: white; text-decoration: none; font-weight: bold; }
.footer a:hover { text-decoration: underline; }
</style>
</head>
<body>
<div class="navbar">
<a href="/" class="nav-home">🏠 Home</a>
<a href="https://diyables.io/tutorials/arduino-uno-q" target="_blank" class="nav-tutorial">📚 Tutorial</a>
</div>
<div class="status-bar">WebSocket: <span id="connectionText">Disconnected</span></div>
<div class="main">
<h1>💡 LED Control</h1>
<button id="ledBtn" class="led-btn" disabled onclick="toggleLed()">LED IS OFF</button>
<p class="status-text" id="statusText">Waiting for connection…</p>
</div>
<div class="footer">Created by <a href="https://diyables.io/" target="_blank">DIYables</a></div>
<script src="libs/socket.io.min.js"></script>
<script>
const connText = document.getElementById("connectionText");
const ledBtn = document.getElementById("ledBtn");
const statusText = document.getElementById("statusText");
function setConnectionStatus(text) {
connText.textContent = text;
if (text === "connected") connText.style.color = "#007bff";
else if (text === "connecting") connText.style.color = "#6c757d";
else connText.style.color = "#dc3545";
}
function applyLedState(on) {
if (on) {
ledBtn.classList.add("on");
ledBtn.textContent = "LED IS ON";
statusText.textContent = "LED is ON — click to turn off";
} else {
ledBtn.classList.remove("on");
ledBtn.textContent = "LED IS OFF";
statusText.textContent = "LED is OFF — click to turn on";
}
}
function toggleLed() {
socket.emit("toggle_led", {});
}
const socket = io("http://" + window.location.host, { transports: ["websocket"] });
socket.on("connect", function () {
setConnectionStatus("connected");
ledBtn.disabled = false;
socket.emit("get_state", {});
});
socket.on("disconnect", function () {
setConnectionStatus("disconnected");
ledBtn.disabled = true;
statusText.textContent = "Connection lost…";
});
socket.on("led_status", function (data) {
applyLedState(data.on);
});
</script>
</body>
</html>
Schnelle Schritte
- Mit Wi-Fi verbinden: Stellen Sie sicher, dass Arduino UNO Q mit Ihrem Wi-Fi-Netzwerk verbunden ist. Verwenden Sie das Netzwerksymbol in Arduino App Lab, um zuerst eine Verbindung herzustellen.
- Öffnen Sie Arduino App Lab: Starten Sie Arduino App Lab und warten Sie, bis es Ihr Arduino UNO Q erkennt.
- Erstellen Sie eine neue App: Klicken Sie auf die Schaltfläche Neue App erstellen.
- Geben Sie der App einen Namen, z. B.: WebSocketLED
- Klicken Sie auf Erstellen, um zu bestätigen.
- Fügen Sie die MCU-Skizze ein: Kopieren Sie den MCU-Code oben und fügen Sie ihn in sketch/sketch.ino ein.
- Fügen Sie den Python-Code ein: Öffnen Sie python/main.py. Wählen Sie den gesamten vorhandenen Inhalt aus und löschen Sie ihn, fügen Sie dann den Python-Code oben ein.
- Fügen Sie die HTML-Datei hinzu: Öffnen Sie im assets/-Ordner (oder erstellen Sie) index.html und fügen Sie den HTML-Code oben ein.
- Fügen Sie den Socket.IO-Client hinzu: Erstellen Sie im assets/-Ordner einen libs/-Unterordner. Laden Sie socket.io.min.js herunter und speichern Sie es als assets/libs/socket.io.min.js.
- Install the library: Click the Add sketch library button (the open book icon with a + sign) in the left sidebar.
- Search for Arduino_RouterBridge created by Arduino and click the Install button.
Bricks
No bricks added...
Sketch Libraries
No sketch libra...
Files
python
sketch
.gitignore
README.md
app.yaml
sketch.ino
- Fügen Sie den WebUI Brick hinzu: Klicken Sie auf die Schaltfläche Brick hinzufügen in der Editor-Seitenleiste, um den Bricks-Katalog zu öffnen.
Suchen Sie WebUI - HTML in der Liste und wählen Sie es aus. Folgen Sie dann allen Konfigurationsaufforderungen.
Arduino App Lab fügt den Brick-Eintrag automatisch zu Ihrer app.yaml-Datei hinzu — bearbeiten Sie diesen Eintrag nicht manuell.
※ Notiz:
Der WebUI - HTML Brick verarbeitet sowohl HTTP-Dateibereitstellung als auch Socket.IO-WebSocket in einem einzelnen Service auf Port 7000. Das Socket.IO-Client-Skript muss in assets/libs/socket.io.min.js abgelegt werden — der Brick stellt nicht automatisch eine kompatible Version bereit. Weitere Details finden Sie unter Über Bricks.
- Hochladen: Klicken Sie in Arduino App Lab auf die Schaltfläche Ausführen, um zu kompilieren und hochzuladen.
- Öffnen Sie einen Webbrowser auf Ihrem Telefon oder PC und navigieren Sie zu:
http://<ARDUINO_UNO_Q_IP>:7000/
Ersetzen Sie <ARDUINO_UNO_Q_IP> durch die IP-Adresse, die in der Python-Konsole angezeigt wird.
App Lab Console Output
sketch.ino
1#include "Arduino_RouterBridge.h"
Serial Monitor
Python
[2026-05-08 09:00:01] Bridge ready
sketch.ino
1#include "Arduino_RouterBridge.h"
Serial Monitor
Python
2026-05-08 09:00:02.000 INFO - [WebUI.execute] WebUI: The application interface is available here:
- Local URL: http://localhost:7000
- Network URL: http://192.168.0.45:7000
2026-05-08 09:00:02.001 INFO - [MainThread] App: App started
Browser-Ausgabe
Öffnen Sie http://<ARDUINO_UNO_Q_IP>:7000/ in einem beliebigen Browser im selben Netzwerk. Sie sehen die LED-Steuerungsseite:
Die Seite zeigt:
- Eine kreisförmige LED-Schaltfläche — grau wenn aus, gelb mit Glühen wenn an
- Eine Statustext-Zeile, die sofort aktualisiert wird, wenn sich der LED-Status ändert
- Eine Verbindungsstatusleiste oben — zeigt „verbunden" in Blau, „getrennt" in Rot
- Die Schaltfläche ist deaktiviert, bis die WebSocket-Verbindung hergestellt ist
WebSocket-Ereignisse
Der Browser und der Python-Server kommunizieren über die folgenden Socket.IO-Ereignisse:
| Richtung | Ereignis | Nutzlast | |
|---|---|---|---|
| Browser → Server | get_state | {} | |
| Server → Browser | led_status | {"on" | false} |
| Browser → Server | toggle_led | {} | |
| Server → Browser | led_status | {"on" | true/false} |
Projektideen
Sobald Sie das WebSocket-Muster auf Arduino UNO Q verstanden haben, können Sie es auf viele Echtzeit-Projekte anwenden:
- Temperaturüberwachung: Führen Sie einen DS18B20-Sensor auf der MCU aus und machen Sie get_temperature über Bridge verfügbar — ein Python-Thread liest ihn jede Sekunde und sendet temperature_update an alle Browser, die ein Live-Canvas-Thermometer anzeigen
- Multi-Device-Steuerung: Öffnen Sie die Seite in zwei verschiedenen Browsern — beide erhalten jede led_status-Übertragung sofort, da ui.send_message() ohne ein client-Argument alle verbundenen Clients auf einmal erreicht
- Sensor-Dashboard: Machen Sie mehrere Bridge-Funktionen verfügbar (Temperatur, Luftfeuchtigkeit, Lichtstärke) und senden Sie jede Sekunde ein einzelnes sensor_update-Ereignis mit allen Werten — die Seite aktualisiert jeden Messanzeiger gleichzeitig
- Bidirektionales Messaging: Fügen Sie ein Texteingabefeld zur Seite hinzu — socket.emit("chat", {text: "hello"}) auf der Browser-Seite, ui.send_message("chat", {"text": "hello"}) überträgt es in Echtzeit an alle anderen Registerkarten
- Benachrichtigungssystem: Überprüfen Sie in der Python-Push-Schleife einen Sensorwert gegen einen Schwellenwert — wenn er den Grenzwert überschreitet, senden Sie ein alert-Ereignis mit einer Nachricht; der Browser überwacht es und zeigt ein rotes Warnbanner ohne Neuladen der Seite
Fordern Sie sich selbst heraus
Sind Sie bereit, tiefer in WebSocket auf Arduino UNO Q einzusteigen? Versuchen Sie diese Herausforderungen:
- Einfach: Fügen Sie der Seite eine zweite Schaltfläche hinzu, die ein blink-Ereignis sendet — in Python ruft on_message("blink", ...) Bridge dreimal mit abwechselnden Zuständen und einem time.sleep(0.5) zwischen jedem Aufruf auf, was die LED zum Blinken bringt, ohne den WebSocket-Server zu blockieren.
- Mittel: Fügen Sie einen Schieberegler zum HTML hinzu, der ein set_brightness-Ereignis mit einem Wert von 0 bis 255 aussendet — in Python ruft on_message("set_brightness", ...) Bridge.call("set_brightness", value) auf und die MCU-Skizze verwendet analogWrite(LED_BUILTIN, value), um die LED-Helligkeit über PWM zu steuern.
- Fortgeschritten: Fügen Sie einen Python-Hintergrund-Thread hinzu, der einen Sensor alle 500 ms liest (oder einen simuliert) und sensor_update an alle Clients sendet — kombinieren Sie dies mit der LED-Umschaltung auf der gleichen Seite, damit sowohl der Echtzeit-Push als auch die interaktive Steuerung gleichzeitig über eine einzelne WebSocket-Verbindung funktioniert.