ESP32 WebChat Voorbeeld - Interactieve Chat Interface Tutorial
Overzicht
Het WebChat voorbeeld laat zien hoe u een interactieve chatinterface maakt tussen een webbrowser en Arduino. Ontworpen voor het ESP32 educatieve platform met uitgebreide IoT-mogelijkheden en naadloze integratie met ingebouwde sensoren. De ESP32 kan intelligent reageren op berichten en hardware aansturen op basis van chatcommando's.
Kenmerken
- Realtime Chat: Direct berichtenverkeer via WebSocket
- Intelligente Antwoorden: ESP32 geeft contextuele reacties
- LED-besturing: Bedien de ingebouwde LED via chatcommando's
- Gebruikersherkenning: ESP32 onthoudt uw naam
- Berichtgeschiedenis: Bekijk het gespreksoverzicht
- Responsief Ontwerp: Werkt op desktop en mobiel
Benodigde Hardware
Of u kunt de volgende kits kopen:
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.
Installatie-instructies
Snelle Stappen
Volg deze instructies stap voor stap:
- Als u de ESP32 voor het eerst gebruikt, raadpleeg dan de tutorial over het opzetten van de omgeving voor ESP32 in de Arduino IDE.
- Verbind het ESP32-bord met uw computer via een USB-kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste ESP32-bord (bijvoorbeeld ESP32 Dev Module) en de COM-poort.
- Ga naar het Libraries-icoon in de linker balk van de Arduino IDE.
- Zoek op "DIYables ESP32 WebApps" en vind de DIYables ESP32 WebApps Bibliotheek van DIYables.
- Klik op de Installeren-knop om de bibliotheek te installeren.
- Het kan zijn dat u gevraagd wordt om aanvullende bibliotheekafhankelijkheden te installeren.
- Klik op de Installeer Alles-knop om alle afhankelijkheden te installeren.
- Ga in de Arduino IDE naar Bestand Voorbeelden DIYables ESP32 WebApps WebChat voorbeeld, of kopieer de bovenstaande code en plak deze in de editor van de Arduino IDE.
/*
* 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);
}
- Configureer de WiFi-gegevens in de code door deze regels aan te passen:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klik op de Upload-knop in de Arduino IDE om de code naar de ESP32 te uploaden.
- Open de Serial Monitor.
- Bekijk de output in de Serial Monitor. Het zou er ongeveer als volgt uit moeten zien:
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
- Als u niets ziet, start het ESP32-bord opnieuw op.
- Noteer het weergegeven IP-adres en voer dit adres in de adresbalk van een webbrowser op uw smartphone of pc in.
- Voorbeeld: http://192.168.0.2
- U ziet de startpagina zoals in de onderstaande afbeelding:
- Klik op de Chat-link, u ziet de gebruikersinterface van de Web Chat-app zoals hieronder:
- Of u kunt de pagina ook direct openen via het IP-adres gevolgd door /chat. Bijvoorbeeld: http://192.168.0.2/chat
- Begin met chatten met uw Arduino! Typ uw naam wanneer hierom gevraagd wordt en probeer commando's als "led on", "hello" of "help" om met uw Arduino te communiceren.
Hoe te Gebruiken
Een Gesprek Starten
- Open de chatinterface in uw browser
- Typ uw naam wanneer hierom gevraagd wordt
- Begin met chatten met uw Arduino!
Chatcommando's
De ESP32 herkent deze speciale commando’s:
LED-besturing
- "led on" of "turn on led" → Zet de ingebouwde LED aan
- "led off" of "turn off led" → Zet de ingebouwde LED uit
- "blink" of "blink led" → Laat de LED knipperen
Informatieve Commando’s
- "hello" of "hi" → Vriendelijke begroeting
- "help" → Toont beschikbare commando's
- "time" → Toont uptime van de ESP32
- "status" → Toont systeemstatus
Vragen
- "how are you?" → ESP32 deelt zijn status
- "what can you do?" → Geeft een overzicht van mogelijkheden
- "what is your name?" → ESP32 stelt zichzelf voor
Voorbeeldgesprek
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
Creatieve Aanpassing - Bouw Uw Interactieve Assistent
Verander dit eenvoudige chatvoorbeeld in iets geweldigs! Het modulaire ontwerp maakt het mogelijk de functionaliteit aan te passen en uit te breiden om uw unieke interactieve ESP32-assistent te creëren.
Code-structuur
Belangrijkste Componenten
- WebApp Server: Beheert HTTP- en WebSocket-verbindingen
- Chatpagina: Biedt de webinterface
- Berichtenhandler: Verwerkt binnenkomende chatberichten
- Responsgenerator: Maakt intelligente reacties
Belangrijke Functies
// 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
}
Toevoegen van Aangepaste Commando’s
Om nieuwe chatcommando’s toe te voegen, pas de functie handleChatMessage aan:
if (message.indexOf("your_command") >= 0) {
response = "Your custom response";
// Add your custom action here
}
Aanpassingsmogelijkheden
Wijzig ESP32 Persoonlijkheid
Bewerk de responsberichten om het karakter van Arduino te veranderen:
String greetings[] = {
"Hello! How can I help you today?",
"Hi there! Ready to chat?",
"Greetings! What's on your mind?"
};
Voeg Hardwarebesturing Toe
Breid de LED-besturing uit naar andere componenten:
// 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";
}
Wijzig Thema van Webinterface
U kunt de chatinterface aanpassen door de CSS in de bibliotheekbestanden te wijzigen:
- Kleuren: Bewerk gradientachtergronden
- Lettertypen: Verander fontfamilies
- Lay-out: Pas afstand en grootte aan
Probleemoplossing
Veelvoorkomende Problemen
1. ESP32 reageert niet op berichten
- Controleer de Serial Monitor op foutmeldingen
- Controleer de status van de WebSocket-verbinding
- Vernieuw de browserpagina
2. WiFi-verbinding mislukt
- Controleer SSID en wachtwoord
- Zorg voor een 2.4 GHz netwerk (geen 5 GHz)
- Controleer het signaalniveau
3. Kan de chatpagina niet openen
- Controleer of het IP-adres correct is
- Controleer of de ESP32 nog verbonden is met WiFi
- Probeer eerst de startpagina te bereiken: http://[IP]/
4. LED reageert niet op commando’s
- Controleer de bekabeling (standaard zou de ingebouwde LED moeten werken)
- Controleer de spelling van commando’s
- Controleer debugberichten in de Serial Monitor
Debugtips
Schakel debugmodus in door deze regel toe te voegen in setup():
Serial.println("Debug mode enabled");
Controleer in de Serial Monitor:
- Binnenkomende berichten
- Parseren van commando’s
- Genereren van reacties
- Hardware-acties
Geavanceerde Functies
Ondersteuning voor Meerdere Clients
De chat ondersteunt gelijktijdig meerdere gebruikers:
- Elke gebruiker heeft een unieke sessie
- ESP32 onthoudt individuele namen
- Berichtuitzending naar alle gebruikers
Berichtpersistentie
Voeg berichtlogbook toe aan EEPROM:
#include <EEPROM.h>
void saveMessage(String message) {
// Save to EEPROM for persistence
}
Integratie met Sensoren
Sluit sensoren aan en maak deze toegankelijk via chatberichten:
// Temperatuursensor
if (message.indexOf("temperature") >= 0) {
float temp = analogRead(A0) * 0.1; // Voorbeeld conversie
response = "Temperature: " + String(temp) + "°C";
}
Volgende Stappen
Nadat u het Chat voorbeeld beheerst, probeer dan:
- WebMonitor – Voor debugging en ontwikkeling
- DigitalPins – Voor het aansturen van meerdere outputs
- Joystick – Voor richtingsbesturing
- MultipleWebApps – Voor het combineren van alle functies
Ondersteuning
Voor extra hulp:
- Raadpleeg de API Reference documentatie
- Bezoek DIYables tutorials: https://esp32io.com/tutorials/diyables-esp32-webapps
- Bekijk ESP32-communityforums