Exemple ESP32 WebChat - Tutoriel d'interface de chat interactive
Vue d'ensemble
L’exemple WebChat démontre comment créer une interface de chat interactive entre un navigateur Web et Arduino. Conçu pour la plateforme éducative ESP32 avec des capacités IoT améliorées et une intégration transparente avec les capteurs intégrés. L'ESP32 peut répondre intelligemment aux messages et contrôler le matériel en fonction des commandes du chat.
Fonctionnalités
- Chat en temps réel: Messagerie instantanée via WebSocket
- Réponses intelligentes: L'ESP32 fournit des réponses contextuelles
- Contrôle de la LED: Contrôle de la LED intégrée via des commandes de chat
- Reconnaissance de l'utilisateur: L'ESP32 se souvient de votre nom
- Historique des messages: Voir l'historique de la conversation
- Conception réactive: Fonctionne sur ordinateur et mobile
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables ESP32 (ESP32 inclus) | |
| 1 | × | Kit de Capteurs DIYables (30 capteurs/écrans) | |
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
Instructions d'installation
Étapes rapides
Suivez ces instructions étape par étape :
- Si c'est votre première utilisation de l'ESP32, reportez-vous au tutoriel sur Installation du logiciel ESP32..
- Connectez la carte ESP32 à votre ordinateur à l'aide d'un câble USB.
- Lancez l'IDE Arduino sur votre ordinateur.
- Sélectionnez la carte ESP32 appropriée (par exemple ESP32 Dev Module) et le port COM.
- Accédez à l'icône Libraries dans la barre de gauche de l'IDE Arduino.
- Recherchez "DIYables ESP32 WebApps", puis trouvez la bibliothèque DIYables ESP32 WebApps par DIYables.
- Cliquez sur le bouton Install pour installer la bibliothèque.
- Il vous sera demandé d'installer d'autres dépendances de la bibliothèque.
- Cliquez sur le bouton Tout installer pour installer toutes les dépendances de la bibliothèque.
- Dans l’IDE Arduino, allez dans Fichier Exemples DIYables ESP32 WebApps WebChat par exemple, ou copiez le code ci-dessus et collez-le dans l’éditeur de l’IDE Arduino
/*
* 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);
}
- Configurez les identifiants WiFi dans le code en mettant à jour ces lignes:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Cliquez sur le bouton Upload dans l'IDE Arduino pour téléverser le code sur l'ESP32
- Ouvrez le Moniteur série
- Consultez le résultat dans le Moniteur série. Il ressemble à ce qui suit.
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
- Si rien ne s’affiche, redémarrez la carte ESP32.
- Notez l’adresse IP affichée et saisissez cette adresse dans la barre d’adresse d’un navigateur Web sur votre smartphone ou PC.
- Exemple : http://192.168.0.2
- Vous verrez la page d’accueil comme sur l'image ci-dessous :
- Cliquez sur le lien Chat, vous verrez l'interface utilisateur de l'application Web Chat comme ci-dessous :
- Ou vous pouvez également accéder directement à la page par une adresse IP suivie de /chat. Par exemple : http://192.168.0.2/chat
- Commencez à discuter avec votre Arduino ! Tapez votre nom lorsque vous y êtes invité et essayez des commandes comme "led on", "hello", ou "help" pour interagir avec votre Arduino.
Comment utiliser
Démarrer une conversation
- Ouvrez l'interface de chat dans votre navigateur
- Tapez votre nom lorsque vous y serez invité
- Commencez à discuter avec votre Arduino !
Commandes de chat
L'ESP32 reconnaît ces commandes spéciales :
Contrôle des LED
- "LED allumée" ou "allumer la LED" → Allume la LED intégrée
- "LED éteinte" ou "éteindre la LED" → Éteint la LED intégrée
- "clignoter" ou "clignoter la LED" → Fait clignoter la LED
Commandes d'information
- "hello" or "hi" → Salutation amicale
- "help" → Affiche les commandes disponibles
- "time" → Affiche le temps de fonctionnement de l'ESP32
- "status" → Affiche l'état du système
Questions
- "Comment vas-tu ?" → ESP32 partage son état
- "Qu'est-ce que tu peux faire ?" → Liste ses capacités
- "Comment t'appelles-tu ?" → ESP32 se présente
Exemple de conversation
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
Personnalisation créative - Construisez votre assistant interactif
Transformez cet exemple de chat de base en quelque chose d'incroyable ! Le design modulaire vous permet de l'adapter et d'élargir ses fonctionnalités pour créer votre propre assistant ESP32 interactif et unique.
Structure du code
Composants principaux
- Serveur WebApp: Gère les connexions HTTP et WebSocket
- Page de chat: Fournit l'interface web
- Gestionnaire de messages: Traite les messages de chat entrants
- Générateur de réponses: Crée des réponses intelligentes
Fonctions clés
// 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
}
Ajouter des commandes personnalisées
Pour ajouter de nouvelles commandes de chat, modifiez la fonction handleChatMessage :
if (message.indexOf("your_command") >= 0) {
response = "Your custom response";
// Add your custom action here
}
Options de personnalisation
Modifier la personnalité de l'ESP32
Modifiez les messages de réponse pour changer la personnalité d'Arduino :
String greetings[] = {
"Hello! How can I help you today?",
"Hi there! Ready to chat?",
"Greetings! What's on your mind?"
};
Ajouter un contrôle matériel
Étendre le contrôle des LED à d'autres composants :
// 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";
}
Changer le thème de l'interface Web
L'interface de chat peut être personnalisée en modifiant le CSS dans les fichiers de la bibliothèque :
- Couleurs : modifier les arrière-plans en dégradé
- Polices : changer les familles de polices
- Mise en page : ajuster l'espacement et les tailles
Dépannage
Problèmes courants
1. ESP32 ne répond pas aux messages
- Vérifiez le moniteur série pour les messages d'erreur
- Vérifiez l'état de la connexion WebSocket
- Actualisez la page du navigateur
2. La connexion Wi-Fi a échoué
- Vérifier à nouveau le SSID et le mot de passe
- S'assurer que le réseau 2,4 GHz est utilisé (et non le 5 GHz)
- Vérifier la puissance du signal
3. Impossible d'accéder à la page de chat
- Vérifier que l'adresse IP est correcte
- Vérifier si l'ESP32 est toujours connecté au Wi‑Fi
- Essayer d'accéder à la page d'accueil en premier : http://[IP]/
4. LED ne répond pas aux commandes
- Vérifier le câblage (la LED intégrée devrait fonctionner par défaut)
- Vérifier que les commandes sont correctement orthographiées
- Vérifier le moniteur série pour les messages de débogage
Astuces de débogage
Activez le mode de débogage en ajoutant cette ligne dans setup() :
Serial.println("Debug mode enabled");
Surveillez la sortie série pour voir :
- Messages entrants
- Analyse des commandes
- Génération de réponses
- Actions sur le matériel
Fonctionnalités avancées
Prise en charge de plusieurs clients
Le chat prend en charge plusieurs utilisateurs simultanément :
- Chaque utilisateur a une session unique
- L'ESP32 mémorise les noms de chaque utilisateur
- Diffuser des messages à tous les utilisateurs
Persistance des messages
Ajouter l'enregistrement des messages dans l'EEPROM :
#include <EEPROM.h>
void saveMessage(String message) {
// Save to EEPROM for persistence
}
Intégration avec des capteurs
Connectez les capteurs et rendez-les accessibles via le chat :
// Temperature sensor
if (message.indexOf("temperature") >= 0) {
float temp = analogRead(A0) * 0.1; // Example conversion
response = "Temperature: " + String(temp) + "°C";
}
Étapes suivantes
Après avoir maîtrisé l'exemple de Chat, essayez :
- WebMonitor - Pour le débogage et le développement
- DigitalPins - Pour contrôler plusieurs sorties
- Joystick - Pour le contrôle directionnel
- MultipleWebApps - Pour combiner toutes les fonctionnalités
Assistance
Pour obtenir de l'aide supplémentaire :
- Consultez la documentation de la référence API
- Visitez les tutoriels DIYables : https://esp32io.com/tutorials/diyables-esp32-webapps
- Forums de la communauté ESP32