Arduino Nano ESP32 Web-Chat mit DIYables ESP32 WebApps Library
Überblick
Dieses Tutorial zeigt die Verwendung der DIYablesWebChatPage-Klasse aus der DIYables ESP32 WebApps Library auf einem Arduino Nano ESP32. Das Board führt einen WebSocket-Server aus; ein Browser verbindet sich damit und tauscht in Echtzeit Klartextnachrichten aus. Der Sketch kann eingehende Nachrichten analysieren und mit Text, LED-Steuerung oder einer anderen Aktion antworten.
Schauen Sie sich dieses Schritt-für-Schritt-Video-Tutorial an, das zeigt, wie Sie WebChat mit der DIYables ESP32 WebApps App verwenden:
Was dieses Tutorial behandelt
- Verbindung eines Browsers mit einer Arduino Nano ESP32 Chat-Schnittstelle über WebSocket
- Analyse eingehender Chat-Nachrichten und Generierung von Antworten im Sketch
- Steuerung der integrierten LED durch eingegebene Befehle
- Zugriff auf die Chat-Seite von einem Smartphone oder PC im selben WiFi-Netzwerk
Erforderliche Hardware
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.
Installationsanleitung
Schritte
Folgen Sie diesen Anweisungen Schritt für Schritt:
- Falls Sie Arduino Nano ESP32 zum ersten Mal verwenden, lesen Sie das Tutorial zur Einrichtung der Arduino Nano ESP32 Entwicklungsumgebung.
- Verbinden Sie das Arduino Nano ESP32 Board mit einem USB-Kabel mit Ihrem Computer.
- Starten Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das entsprechende Board (z. B. Arduino Nano ESP32) und den COM-Port.
- Navigieren Sie zum Symbol Bibliotheken in der linken Leiste der Arduino IDE.
- Suchen Sie "DIYables ESP32 WebApps" und finden Sie die DIYables ESP32 WebApps Library von DIYables
- Klicken Sie auf die Schaltfläche Installieren, um die Bibliothek zu installieren.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- Sie werden aufgefordert, einige andere Bibliotheksabhängigkeiten zu installieren
- Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren.
- Gehen Sie in der Arduino IDE zu Datei Beispiele DIYables ESP32 WebApps WebChat Beispiel, oder kopieren Sie den obigen Code und fügen Sie ihn in den Editor der Arduino IDE ein
/*
* DIYables WebApp Library - WebChat Example
*
* This example demonstrates the WebChat feature:
* - Interactive chat interface
* - Intelligent ESP32 responses
* - Built-in LED control via chat commands
*
* Hardware: ESP32 Boards
*
* Setup:
* 1. Update WiFi credentials below
* 2. Upload the sketch to your Arduino
* 3. Open Serial Monitor to see the IP address
* 4. Navigate to http://[IP_ADDRESS]/chat
*/
#include <DIYables_ESP32_Platform.h>
#include <DIYablesWebApps.h>
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create WebApp server and page instances
ESP32ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebChatPage chatPage;
// Chat variables
String userName = "";
int chatCount = 0;
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables ESP32 WebApp - WebChat Example");
// Add only home and webchat pages
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&chatPage);
// Optional: Add 404 page for better user experience (local object)
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Initialize LED for chat commands
pinMode(LED_BUILTIN, OUTPUT);
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to start WebApp server!");
delay(1000);
}
}
// Set up chat callback
chatPage.onChatMessage([](const String& message) {
chatCount++;
Serial.println("Chat message #" + String(chatCount) + ": " + message);
String response = "";
String lowerMessage = message;
lowerMessage.toLowerCase();
// Process chat commands
if (lowerMessage.indexOf("hello") >= 0 || lowerMessage.indexOf("hi") >= 0) {
response = "Hello! I'm your ESP32 assistant. Try saying 'led on' or 'led off' to control the LED!";
chatPage.sendToChat(response);
return;
}
if (lowerMessage.indexOf("led on") >= 0 || lowerMessage.indexOf("light on") >= 0) {
digitalWrite(LED_BUILTIN, HIGH);
response = "LED is now ON! ✨";
chatPage.sendToChat(response);
return;
}
if (lowerMessage.indexOf("led off") >= 0 || lowerMessage.indexOf("light off") >= 0) {
digitalWrite(LED_BUILTIN, LOW);
response = "LED is now OFF! 💡";
chatPage.sendToChat(response);
return;
}
if (lowerMessage.indexOf("status") >= 0) {
String ledStatus = digitalRead(LED_BUILTIN) ? "ON" : "OFF";
response = "Arduino Status: LED is " + ledStatus + ", Uptime: " + String(millis() / 1000) + " seconds";
chatPage.sendToChat(response);
return;
}
if (lowerMessage.indexOf("help") >= 0) {
response = "Available commands: 'led on', 'led off', 'status', 'help'. Just chat with me!";
chatPage.sendToChat(response);
return;
}
if (lowerMessage.indexOf("time") >= 0) {
response = "Arduino has been running for " + String(millis() / 1000) + " seconds.";
chatPage.sendToChat(response);
return;
}
if (lowerMessage.indexOf("name") >= 0) {
response = "I'm your ESP32! What's your name?";
chatPage.sendToChat(response);
return;
}
// General responses
String responses[] = {
"That's interesting! Tell me more.",
"I understand! As an Arduino, I love processing your messages.",
"Cool! I'm here and ready to help.",
"Thanks for chatting with me! Try 'led on' to see something happen.",
"I'm just an Arduino, but I enjoy our conversation!"
};
response = responses[chatCount % 5];
chatPage.sendToChat(response);
});
// Send welcome message
chatPage.sendToChat("Arduino Chat Bot is online! 🤖");
chatPage.sendToChat("Say 'hello' or 'help' to get started!");
}
void loop() {
// Handle WebApp server communications
webAppsServer.loop();
// Add your main application code here
delay(10);
}
- Aktualisieren Sie die WiFi-Anmeldedaten im Sketch:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klicken Sie auf die Schaltfläche Hochladen in der Arduino IDE, um den Code auf den Arduino Nano ESP32 hochzuladen
- Öffnen Sie den seriellen Monitor
- Die Ausgabe des seriellen Monitors sollte ähnlich wie folgt aussehen:
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
DIYables WebApp - WebChat Example
INFO: Added app /
INFO: Added app /chat
DIYables WebApp Library
Platform: Arduino Nano ESP32
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
Configuring WebSocket server callbacks...
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
Web Interface: http://192.168.0.2
WebSocket: ws://192.168.0.2:81
Available Applications:
Home Page: http://192.168.0.2/
WebChat: http://192.168.0.2/chat
==========================================
- Falls nichts angezeigt wird, drücken Sie die Reset-Taste auf dem Board.
- Notieren Sie sich die IP-Adresse aus der Ausgabe und geben Sie sie in einen Browser auf einem Smartphone oder PC ein, das mit dem gleichen Netzwerk verbunden ist.
- Beispiel: http://192.168.0.2
- Die Startseite zeigt Links zu registrierten Anwendungen:
- Wählen Sie den Chat-Link, um die Chat-Schnittstelle zu öffnen:
- Die Seite ist auch direkt unter http://192.168.0.2/chat erreichbar.
Unterstützte Befehle
Der Beispiel-Sketch erkennt die folgenden Chat-Eingaben:
LED-Steuerung
- led on oder turn on led — Schaltet die integrierte LED ein
- led off oder turn off led — Schaltet die integrierte LED aus
- blink oder blink led — Blinkt mit der LED
Status und Informationen
- hello oder hi — Gibt eine Begrüßung zurück
- help — Listet erkannte Befehle auf
- time — Zeigt die Betriebszeit des Boards an
- status — Zeigt den Systemstatus an
- how are you? — Gibt eine Statusmeldung zurück
- what can you do? — Listet Fähigkeiten auf
- what is your name? — Gibt den Board-Namen zurück
Beispiel-Sitzung
You: Hello
ESP32: Hi there! I'm your assistant. What's your name?
You: My name is John
ESP32: Nice to meet you, John! I'm ready to help.
You: led on
ESP32: LED turned ON for you, John!
You: what can you do?
ESP32: I can control LEDs, respond to your messages, and remember your name. Try saying 'help' for commands!
You: help
ESP32: Available commands:
* 'led on/off' - Control LED
* 'blink' - Blink LED
* 'status' - Show system info
* 'time' - Show uptime
Code-Struktur
Der Sketch ist um drei Komponenten organisiert:
- WebApp-Server — verwaltet HTTP-Routing und WebSocket-Verbindungen
- Chat-Seite — registriert die Route /chat und stellt die Browser-UI bereit
- Nachrichtenhandler — ein Rückruf, der für jede eingehende Chat-Nachricht aufgerufen wird
Der Nachrichtenhandler empfängt den Text, analysiert ihn und sendet eine Antwort mit chatPage.sendToWebChat().
Befehle hinzufügen
Um den Befehlssatz zu erweitern, fügen Sie Bedingungen im Rückruf des Nachrichtenhandlers hinzu:
// Handle incoming chat messages in the onWebChatMessage callback
if (message.indexOf("your_command") >= 0) {
response = "Your custom response";
// Execute associated hardware action
}
Andere Hardware steuern
Das gleiche Muster gilt für alle Peripheriegeräte:
// Move a servo when commanded
if (message.indexOf("move servo") >= 0) {
servo.write(90);
response = "Servo moved to 90 degrees";
}
// Read a sensor on demand
if (message.indexOf("temperature") >= 0) {
float temp = readTemperature();
response = "Current temperature: " + String(temp) + " C";
}
Fehlerbehebung
Board antwortet nicht auf Nachrichten
- Überprüfen Sie den seriellen Monitor auf Fehlerausgaben
- Stellen Sie sicher, dass der WebSocket-Statusindikator im Browser "verbunden" anzeigt
- Laden Sie die Seite neu
WiFi-Verbindung schlägt fehl
- Bestätigen Sie die SSID und das Passwort
- Der Arduino Nano ESP32 verbindet sich nur mit 2,4-GHz-Netzwerken; 5 GHz wird nicht unterstützt
- Bewegen Sie das Board näher an den Router, wenn das Signal schwach ist
Chat-Seite nicht erreichbar
- Bestätigen Sie die IP-Adresse aus dem seriellen Monitor
- Stellen Sie sicher, dass das Browser-Gerät im gleichen WiFi-Netzwerk wie das Board ist
- Versuchen Sie zuerst die Startseite (http://[IP]/), um zu überprüfen, ob der Server läuft
LED antwortet nicht
- Das Beispiel verwendet die integrierte LED, die ohne Verdrahtung funktioniert
- Überprüfen Sie, dass die Befehlsschreibweise den erkannten Strings entspricht
- Überprüfen Sie den seriellen Monitor auf die Rohnachricht, die vom Board empfangen wurde