ESP32 WebChat-Beispiel – Tutorial zur interaktiven Chat-Oberfläche
Übersicht
Das WebChat-Beispiel demonstriert, wie man eine interaktive Chat-Oberfläche zwischen einem Webbrowser und Arduino erstellt. Für ESP32 entwickelte Bildungsplattform mit erweiterten IoT-Fähigkeiten und nahtloser Integration integrierter Sensoren. Der ESP32 kann intelligent auf Nachrichten reagieren und Hardware basierend auf Chat-Befehlen steuern.
Funktionen
- Echtzeit-Chat: Sofortnachrichten über WebSocket
- Intelligente Antworten: ESP32 liefert kontextbezogene Antworten
- LED-Steuerung: Steuern Sie die integrierte LED über Chat-Befehle
- Nutzererkennung: ESP32 merkt sich deinen Namen
- Nachrichtenverlauf: Konversationsverlauf anzeigen
- Responsives Design: Funktioniert auf Desktop- und Mobilgeräten
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.
Installationsanweisungen
Schnelle Schritte
Folgen Sie diesen Anweisungen Schritt für Schritt:
- Wenn Sie das ESP32 zum ersten Mal verwenden, lesen Sie das Tutorial zur Einrichtung der Umgebung für ESP32 in der Arduino-IDE.
- Verbinden Sie das ESP32-Board mit Ihrem Computer über ein USB-Kabel.
- Starten Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das passende ESP32-Board aus (z. B. ESP32 Dev Module) und den COM-Port.
- Navigieren Sie zum Bibliotheken-Symbol in der linken Leiste der Arduino IDE.
- Suche "DIYables ESP32 WebApps", dann finde die DIYables ESP32 WebApps-Bibliothek von DIYables
- Klicken Sie auf die Schaltfläche Installieren, um die Bibliothek zu installieren.
- Sie werden aufgefordert, einige weitere Bibliotheksabhängigkeiten zu installieren.
- Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren.
- In der Arduino IDE gehen Sie zu Datei Beispiele DIYables ESP32 WebApps WebChat Beispiel, oder kopieren Sie den obigen Code und fügen 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);
}
- Konfigurieren Sie die WLAN-Zugangsdaten im Code, indem Sie diese Zeilen aktualisieren:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klicke den Hochladen-Button in der Arduino IDE, um Code auf den ESP32 hochzuladen.
- Öffne den seriellen Monitor.
- Schau dir das Ergebnis im seriellen Monitor an. Es sieht so aus wie unten.
COM6
DIYables WebApp - WebChat Example
INFO: Added app /
INFO: Added app /chat
DIYables WebApp Library
Platform: 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
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Wenn Sie nichts sehen, starten Sie das ESP32-Board neu.
- Notieren Sie sich die angezeigte IP-Adresse und geben Sie diese in die Adressleiste eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Beispiel: http://192.168.0.2
- Sie sehen die Startseite wie im untenstehenden Bild:
- Klicken Sie auf den Chat-Link, dann sehen Sie die Benutzeroberfläche der Web-Chat-Anwendung wie unten:
- Oder Sie können die Seite auch direkt über die IP-Adresse aufrufen, gefolgt von /chat. Zum Beispiel: http://192.168.0.2/chat
- Beginnen Sie mit Ihrem Arduino zu chatten! Geben Sie Ihren Namen ein, wenn Sie dazu aufgefordert werden, und probieren Sie Befehle wie „led on“, „hello“ oder „help“, um mit Ihrem Arduino zu interagieren.
So verwenden Sie es
Ein Gespräch beginnen
- Öffnen Sie die Chat-Oberfläche in Ihrem Browser
- Geben Sie Ihren Namen ein, wenn Sie dazu aufgefordert werden
- Beginnen Sie, mit Ihrem Arduino zu chatten!
Chat-Befehle
Der ESP32 erkennt diese speziellen Befehle:
LED-Steuerung
- "LED an" oder "LED einschalten" → Schaltet die eingebaute LED ein
- "LED aus" oder "LED ausschalten" → Schaltet die eingebaute LED aus
- "LED blinken" oder "LED blinken lassen" → Lässt die LED blinken
Informationsbefehle
- "hello" oder "hi" → Freundliche Begrüßung
- "help" → Zeigt verfügbare Befehle
- "time" → Zeigt die Betriebszeit des ESP32
- "status" → Zeigt den Systemstatus
Fragen
- "Wie geht es dir?" → ESP32 teilt seinen Status
- "Was kannst du tun?" → ESP32 listet Fähigkeiten auf
- "Wie heißt du?" → ESP32 stellt sich vor
Beispielgespräch
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
Kreative Anpassung - Erstelle deinen interaktiven Assistenten
Verwandle dieses einfache Chat-Beispiel in etwas Erstaunliches! Das modulare Design ermöglicht es dir, die Funktionalität anzupassen und zu erweitern, um deinen eigenen einzigartigen interaktiven ESP32-Assistenten zu erstellen.
Code-Struktur
Hauptkomponenten
- WebApp-Server: Verwaltet HTTP- und WebSocket-Verbindungen
- Chat-Seite: Stellt die Weboberfläche bereit
- Nachrichten-Handler: Verarbeitet eingehende Chat-Nachrichten
- Antwortgenerator: Erzeugt intelligente Antworten
Schlüsselfunktionen
// Handle incoming chat messages
void handleChatMessage(String message, String clientId) {
// Process message and generate response
}
// Send message to web interface
void sendChatResponse(String response, String clientId) {
// Send response via WebSocket
}
Benutzerdefinierte Befehle hinzufügen
Um neue Chat-Befehle hinzuzufügen, ändern Sie die Funktion handleChatMessage:
if (message.indexOf("your_command") >= 0) {
response = "Your custom response";
// Add your custom action here
}
Optionen zur Anpassung
ESP32-Persönlichkeit ändern
Bearbeiten Sie die Antwortnachrichten, um die Persönlichkeit von Arduino zu ändern:
String greetings[] = {
"Hello! How can I help you today?",
"Hi there! Ready to chat?",
"Greetings! What's on your mind?"
};
Hardwaresteuerung hinzufügen
LED-Steuerung auf andere Komponenten erweitern:
// Control servo motor
if (message.indexOf("move servo") >= 0) {
servo.write(90);
response = "Servo moved to 90 degrees!";
}
// Read sensor data
if (message.indexOf("temperature") >= 0) {
float temp = getTemperature();
response = "Current temperature: " + String(temp) + "°C";
}
Design der Weboberfläche ändern
Die Chat-Oberfläche kann angepasst werden, indem CSS in den Bibliotheksdateien geändert wird:
- Farben: Verläufe im Hintergrund bearbeiten
- Schriftarten: Schriftfamilien ändern
- Layout: Abstände und Größen anpassen
Fehlerbehebung
Häufige Probleme
1. ESP32 reagiert nicht auf Nachrichten
- Überprüfe den seriellen Monitor auf Fehlermeldungen
- Überprüfe den Status der WebSocket-Verbindung
- Lade die Browser-Seite neu
- WLAN-Verbindung fehlgeschlagen
- SSID und Passwort erneut überprüfen
- Stellen Sie sicher, dass das 2,4-GHz-Netzwerk verwendet wird (nicht 5-GHz)
- Überprüfen Sie die Signalstärke
3. Kann nicht auf die Chat-Seite zugreifen
- Vergewissern Sie sich, dass die IP-Adresse korrekt ist
- Überprüfen Sie, ob der ESP32 noch mit dem WLAN verbunden ist
- Versuchen Sie zuerst, die Startseite aufzurufen: http://[IP]/
4. LED reagiert nicht auf Befehle
- Verdrahtung überprüfen (eingebaute LED sollte standardmäßig funktionieren)
- Befehle auf korrekte Schreibweise überprüfen
- Den seriellen Monitor auf Debug-Nachrichten prüfen
Tipps zum Debuggen
Aktivieren Sie den Debug-Modus, indem Sie diese Zeile in setup() hinzufügen:
Serial.println("Debug mode enabled");
Überwachen Sie die serielle Ausgabe, um Folgendes zu sehen:
- Eingehende Nachrichten
- Befehlsanalyse
- Antwortgenerierung
- Hardwareaktionen
Erweiterte Funktionen
Unterstützung mehrerer Clients
Der Chat unterstützt mehrere Benutzer gleichzeitig:
- Jeder Benutzer hat eine eigene Sitzung
- ESP32 speichert individuelle Namen
- Broadcast-Nachrichten an alle Benutzer
Nachrichtenpersistenz
Nachrichtenprotokollierung in das EEPROM hinzufügen:
#include <EEPROM.h>
void saveMessage(String message) {
// Save to EEPROM for persistence
}
Integration mit Sensoren
Sensoren anschließen und sie über den Chat zugänglich machen:
// Temperature sensor
if (message.indexOf("temperature") >= 0) {
float temp = analogRead(A0) * 0.1; // Example conversion
response = "Temperature: " + String(temp) + "°C";
}
Nächste Schritte
Nachdem du das Chat-Beispiel gemeistert hast, versuch es:
- WebMonitor - Zur Fehlerbehebung und Entwicklung
- DigitalPins - Zur Steuerung mehrerer Ausgänge
- Joystick - Zur Richtungssteuerung
- MultipleWebApps - Alle Funktionen vereinen
Unterstützung
Für weitere Hilfe:
- Überprüfen Sie die API-Referenzdokumentation
- Besuchen Sie die DIYables-Tutorials: https://esp32io.com/tutorials/diyables-esp32-webapps
- ESP32-Community-Foren