ESP32 WebSocket-Server – Tutorial zur Echtzeitkommunikation
WebServerWithWebSocket-Beispiel - Echtzeit-Kommunikation
Überblick
Dieses Beispiel demonstriert, wie man einen fortschrittlichen mehrseitigen Webserver mit Echtzeit-WebSocket-Kommunikation auf dem ESP32 erstellt, der einen bidirektionalen Datenaustausch zwischen dem Browser und dem ESP32 ermöglicht.
Funktionen
- Echtzeit-WebSocket-Kommunikation für sofortige bidirektionale Nachrichtenübermittlung
- Einfache textbasierte Befehle (Ping, Hallo, Zeit, LED ein/aus)
- LED-Steuerung über WebSocket-Befehle
- Integrierter HTTP-Server der eine WebSocket-Testoberfläche bereitstellt
- Echo-Funktionalität zum Testen der Nachrichtenübertragung
- Verbindungsstatus-Überwachung mit automatischer Neuerverbindung
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables ESP32 Starter-Kit (ESP32 enthalten) | |
| 1 | × | DIYables Sensor-Kit (30 Sensoren/Displays) | |
| 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.
Bibliotheksinstallation
Folge diesen Anweisungen Schritt für Schritt:
- Wenn dies das erste Mal ist, dass Sie den ESP32 verwenden, lesen Sie das Tutorial zur Einrichtung der ESP32-Umgebung in der Arduino-IDE.
- Schließen Sie das ESP32-Board mit einem USB-Kabel an Ihren Computer an.
- Öffnen Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das passende ESP32-Board (z. B. ESP32) und den COM-Port aus.
- Öffnen Sie den Bibliotheksverwalter, indem Sie auf das Library Manager-Symbol auf der linken Seite der Arduino IDE klicken.
- Suchen Sie nach Web Server for ESP32 und finden Sie die mWebSockets von DIYables.
- Klicken Sie auf den Install-Button, um die mWebSockets-Bibliothek hinzuzufügen.
WebSocket-Beispiel
- In der Arduino IDE gehen Sie zu Datei Beispiele Webserver für ESP32 WebServerWithWebSocket Beispiel, um den Beispielcode zu öffnen
Code-Struktur
Das Projekt besteht aus zwei Hauptdateien:
- websocket_html.h:
Enthält den HTML-, CSS- und JavaScript-Code der Weboberfläche. Diese Datei definiert die Benutzeroberfläche zur Interaktion mit dem ESP32 über WebSocket, einschließlich Schaltflächen zum Senden von Befehlen, eines Nachrichtenprotokolls und Verbindungsstatusanzeigen.
- WebServerWithWebSocket.ino:
Implementiert die Haupt-Serverlogik auf dem ESP32. Diese Datei richtet HTTP- und WebSocket-Server ein, verwaltet die WiFi-Konnektivität, verarbeitet eingehende WebSocket-Nachrichten und steuert Hardware (wie die eingebaute LED) basierend auf empfangenen Befehlen.
Schaltkreisverbindung
Es sind keine externen Bauteile erforderlich – dieses Beispiel verwendet die integrierte LED am Pin 13.
WebSocket-Kommunikation
Verbindungsdetails
- Webserver-Port: 80 (HTTP)
- WebSocket-Port: 81 (WebSocket)
- Protokoll: RFC 6455-konformer WebSocket
Nachrichtenarten
Die tatsächliche Implementierung verwendet einfache Zeichenkettenbefehle:
- Ping: "ping" → Antwort: "pong"
- Begrüßung: "hello" → Antwort: "Hallo von ESP32!"
- Betriebszeit: "time" → Antwort: "Betriebszeit: X Sekunden"
- LED-Steuerung: "LED ein" / "LED aus" → Antwort: "LED EIN" / "LED AUS"
- Echo: Anderer Text → Antwort: "Echo: [deine Nachricht]"
Installationsanweisungen
1. Netzwerkkonfiguration
Bearbeiten Sie die WiFi-Zugangsdaten direkt in der WebServerWithWebSocket.ino-Datei:
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
2. Code hochladen und Ausgabe überwachen
- Verbinden Sie Ihren ESP32 mit Ihrem Computer
- Wählen Sie das richtige Board und den richtigen Port in der Arduino IDE aus
- Laden Sie den Sketch WebServerWithWebSocket.ino hoch
- Öffnen Sie den seriellen Monitor (9600 Baud)
- Warten Sie auf die WLAN-Verbindung
- Notieren Sie sich sowohl die HTTP- als auch die WebSocket-Serveradressen
- Wenn Sie die IP-Adresse im seriellen Monitor nicht sehen, drücken Sie die Reset-Taste auf dem ESP32-Board
- Öffnen Sie einen Webbrowser und geben Sie die IP-Adresse des ESP32 in die Adresszeile ein (z. B. http://192.168.x.x/). Sie sehen die Weboberfläche, die unten gezeigt wird:
- Klicken Sie auf die Schaltfläche „Connect“, um das Web mit dem ESP32 über WebSocket zu verbinden.
- Wenn der Verbindungsstatus „Connected“ anzeigt, klicken Sie nacheinander auf jede Schaltfläche, um die bidirektionale Kommunikation zwischen der Weboberfläche und dem ESP32 über WebSocket zu testen. Das Ergebnis wird unten angezeigt:
Funktionen der Weboberfläche
Die HTML-Schnittstelle (aus websocket_html.h) bietet:
- WebSocket-Verbindungsverwaltung mit Buttons zum Verbinden und Trennen
- Einfache Befehlsbuttons für Ping, Hallo, Zeit, LED ein/aus
- Nachrichten-Eingabefeld zum Senden eigener Befehle
- Echtzeit-Nachrichtenverlauf, der gesendete und empfangene Nachrichten anzeigt
- Verbindungsstatusanzeige, die den WebSocket-Status anzeigt
Code-Erklärung
WebSocket-Server-Einrichtung
#include <DIYables_ESP32_WebServer.h>
#include "websocket_html.h"
// LED configuration
#define LED_PIN 2 // ESP32 built-in LED pin
// Server configuration
WiFiServer httpServer(80);
constexpr uint16_t wsPort = 81;
WebSocketServer wss{wsPort};
void setup() {
Serial.begin(9600);
delay(1000);
// Initialize built-in LED
pinMode(LED_PIN, OUTPUT);
digitalWrite(LED_PIN, LOW);
// Connect to WiFi manually
Serial.print("Connecting to ");
Serial.println(WIFI_SSID);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Start HTTP server
httpServer.begin();
// Configure WebSocket server with lambda handlers
wss.onConnection([](WebSocket &ws) {
Serial.println("New WebSocket connection");
// Set up message handler
ws.onMessage([](WebSocket &ws, const WebSocket::DataType dataType, const char *message, uint16_t length) {
handleWebSocketMessage(ws, message, length);
});
// Send welcome message
const char welcome[] = "Connected to ESP32!";
ws.send(WebSocket::DataType::TEXT, welcome, strlen(welcome));
});
// Start WebSocket server
wss.begin();
}
WebSocket-Nachrichtenverarbeitung
void handleWebSocketMessage(WebSocket &ws, const char *message, uint16_t length) {
Serial.print("[WebSocket] Received (");
Serial.print(length);
Serial.print(" bytes): ");
Serial.println(message);
String msgStr = String(message);
String response = "";
// Command processing with simple string matching
if (msgStr.equalsIgnoreCase("ping")) {
response = "pong";
}
else if (msgStr.equalsIgnoreCase("hello")) {
response = "Hello from ESP32!";
}
else if (msgStr.equalsIgnoreCase("time")) {
response = "Uptime: " + String(millis()/1000) + " seconds";
}
else if (msgStr.equalsIgnoreCase("led on")) {
digitalWrite(LED_PIN, HIGH);
response = "LED ON";
}
else if (msgStr.equalsIgnoreCase("led off")) {
digitalWrite(LED_PIN, LOW);
response = "LED OFF";
}
else {
response = "Echo: " + msgStr;
}
// Send response
ws.send(WebSocket::DataType::TEXT, response.c_str(), response.length());
}
Hauptschleife mit WebSocket-Verarbeitung
void loop() {
// Handle HTTP requests
WiFiClient httpClient = httpServer.available();
if (httpClient) {
handleHTTPClient(httpClient);
}
// Handle WebSocket connections
wss.listen();
delay(10);
}
// HTTP request handler
void handleHTTPClient(WiFiClient client) {
String request = "";
// Read HTTP request
while (client.connected() && client.available()) {
String line = client.readStringUntil('\n');
if (line == "\r") break;
if (request.length() == 0) request = line;
}
// Serve web page or 404
if (request.indexOf("GET / HTTP") >= 0) {
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println();
client.print(htmlPage);
} else {
client.println("HTTP/1.1 404 Not Found");
client.println("Connection: close");
client.println();
}
client.stop();
}
JavaScript WebSocket-Client
Verbindungsverwaltung
let websocket;
let isConnected = false;
function initWebSocket() {
const wsUrl = `ws://${window.location.hostname}:81/`;
websocket = new WebSocket(wsUrl);
websocket.onopen = function(event) {
console.log('WebSocket connected');
isConnected = true;
updateConnectionStatus('Connected');
};
websocket.onmessage = function(event) {
handleWebSocketMessage(JSON.parse(event.data));
};
websocket.onclose = function(event) {
console.log('WebSocket disconnected');
isConnected = false;
updateConnectionStatus('Disconnected');
// Auto-reconnect after 3 seconds
setTimeout(initWebSocket, 3000);
};
websocket.onerror = function(error) {
console.error('WebSocket error:', error);
updateConnectionStatus('Error');
};
}
Nachrichtenverarbeitung
function handleWebSocketMessage(event) {
const message = event.data;
console.log('Received:', message);
// Handle simple string responses (matching actual implementation)
if (message === 'pong') {
console.log('Ping response received');
addMessageToHistory('Received: pong');
} else if (message.startsWith('Hello from ESP32')) {
addMessageToHistory('Received: ' + message);
} else if (message.startsWith('Uptime:')) {
updateUptimeDisplay(message);
addMessageToHistory('Received: ' + message);
} else if (message === 'LED ON' || message === 'LED OFF') {
updateLedStatus(message);
addMessageToHistory('Received: ' + message);
} else if (message.startsWith('Echo:')) {
addMessageToHistory('Received: ' + message);
} else {
addMessageToHistory('Received: ' + message);
}
}
Befehle senden
// Simple string-based command sending (matching actual implementation)
function sendCommand(command) {
if (isConnected) {
websocket.send(command);
addMessageToHistory('Sent: ' + command);
} else {
alert('WebSocket not connected!');
}
}
function controlLED(action) {
if (action === 'on') {
sendCommand('led on');
} else if (action === 'off') {
sendCommand('led off');
}
}
function sendPing() {
sendCommand('ping');
}
function sendHello() {
sendCommand('hello');
}
function getUptime() {
sendCommand('time');
}
HTML-Schnittstellenfunktionen
WebSocket-Testoberfläche
Die beigefügte HTML-Seite bietet eine vollständige WebSocket-Testoberfläche:
- Verbindungssteuerung mit Funktionen zum Verbinden und Trennen
- Schaltflächen für Schnellbefehle für gängige Befehle (Ping, Hallo, Zeit, LED-Steuerung)
- Nachrichten-Eingabefeld zum Senden benutzerdefinierter Textbefehle
- Echtzeit-Nachrichtenprotokoll, das die gesamte Kommunikation anzeigt
- Verbindungsstatusanzeige mit visuellen Indikatoren
Eingebaute JavaScript-Funktionen
Die HTML-Schnittstelle enthält JavaScript-Funktionen, die der ESP32-Befehlsstruktur entsprechen:
// Send simple string commands to ESP32
function sendQuick(msg) {
if (connected && ws) {
ws.send(msg);
addMsg('You: ' + msg, 'sent');
} else {
addMsg('Not connected!');
}
}
// Handle WebSocket events
ws.onmessage = function(event) {
console.log('WebSocket message received:', event.data);
addMsg('ESP32: ' + event.data, 'received');
};
Hinweise zur Implementierung
Vereinfachte Architektur
Die tatsächliche Implementierung verwendet einen einfachen Ansatz:
- Getrennte Server: WiFiServer für HTTP und WebSocketServer für WebSocket
- Manuelle WiFi-Verbindung: Standard-Setup von WiFi.begin() ohne integrierte Serververwaltung
- Zeichenkettenbasierte Nachrichten: Einfache Zeichenkettenbefehle statt JSON-Protokollen
- Lambda-Handlern: WebSocket-Ereignis-Handler, definiert als Inline-Lambda-Funktionen
- Grundlegende HTML-Auslieferung: Direktes client.print() von HTML-Inhalten aus der Header-Datei
Einschränkungen der aktuellen Implementierung
- Kein Streaming von Sensordaten (wie in den Beispielen der Dokumentation gezeigt)
- Kein Parsen von JSON-Nachrichten
- Keine Übertragung an mehrere Clients
- Keine Verbindungsverwaltung über das einfache Verbinden und Trennen hinaus
- Kein Heartbeat- oder Keep-Alive-System
- Keine Nachrichten-Warteschlangen oder Zuverlässigkeitsfunktionen
Verfügbare Befehle
Die funktionsfähigen Befehle in der tatsächlichen Implementierung:
- ping → pong
- hello → Hallo vom ESP32!
- time → Betriebszeit: X Sekunden
- led on → LED AN (schaltet LED_PIN ein)
- led off → LED AUS (schaltet LED_PIN aus)
- Jeden andere Text → Echo: [deine Nachricht]
Fehlerbehebung
Häufige Probleme
WebSocket-Verbindung fehlgeschlagen
- Prüfen Sie, ob der WebSocket-Port (81) erreichbar ist
- Vergewissern Sie sich, dass die Firewall-Einstellungen Port 81 nicht blockieren
- Verwenden Sie die Entwicklertools des Browsers, um WebSocket-Fehler zu überprüfen
- Stellen Sie sicher, dass die IP-Adresse des ESP32 korrekt ist
Nachrichten nicht erhalten
- Überprüfe den seriellen Monitor auf WebSocket-Ereignisse und den Empfang von Nachrichten.
- Stelle sicher, dass Befehlszeichenfolgen genau übereinstimmen (Groß- und Kleinschreibung ignorieren).
- Teste zuerst mit einfachen Befehlen wie „ping“.
LED reagiert nicht
- Stellen Sie sicher, dass LED_PIN für Ihr ESP32-Board ordnungsgemäß definiert ist (in der Regel GPIO 2)
- Überprüfen Sie den Serial Monitor auf Meldungen zur Befehlsverarbeitung
- Vergewissern Sie sich, dass die Befehle "led on" und "led off" genau gesendet werden
Debug-Befehle
Verwenden Sie diese Befehle, um die WebSocket-Funktionalität zu testen:
- ping - Einfacher Verbindungstest
- hello - Begrüßungsantwortentest
- time - ESP32-Betriebszeit-Test
- led on / led off - Hardware-Steuerungstest
- Jeder andere Text wird zur Kommunikationsprüfung zurückgespiegelt
Anwendungen in der realen Welt
Grundlegende IoT-Steuerung
Die aktuelle einfache Implementierung eignet sich für:
- Fernsteuerung der LED zur grundlegenden Anzeige des Gerätestatus
- Einfache Befehls-/Antwortsysteme zur Interaktion mit dem Gerät
- WebSocket-Verbindungstests für Entwicklungszwecke
- Grundlegende Demonstrationen der Echtzeitkommunikation
Potenzielle Verbesserungen
Um dieses Beispiel für den produktiven Einsatz zu erweitern, ziehen Sie Folgendes in Betracht:
- JSON-Nachrichten-Parsing für strukturierte Daten
- Sensorendaten-Streaming-Fähigkeiten
- Verwaltung mehrerer Client-Verbindungen
- Authentifizierungs- und Sicherheitsfunktionen
- Fehlerbehandlung und Wiederverbindungslogik
Nächste Schritte
- JSON-Nachrichtenparsing mit der ArduinoJson-Bibliothek hinzufügen
- Reale Sensoren integrieren (Temperatur, Luftfeuchtigkeit usw.)
- Die Übertragung an mehrere WebSocket-Clients implementieren
- Authentifizierung für sicheren Zugriff hinzufügen
- Mobile App-Benutzeroberflächen erstellen, die WebSocket-Verbindungen verwenden