Chat Web Arduino Nano ESP32 avec la bibliothèque DIYables ESP32 WebApps
Vue d'ensemble
Ce tutoriel démontre l'utilisation de la classe DIYablesWebChatPage de la bibliothèque DIYables ESP32 WebApps sur un Arduino Nano ESP32. La carte exécute un serveur WebSocket ; un navigateur s'y connecte et échange des messages en texte brut en temps réel. Le sketch peut analyser les messages entrants et répondre avec du texte, le contrôle LED ou toute autre action.
Regardez ce tutoriel vidéo étape par étape démontrant comment utiliser WebChat avec l'application DIYables ESP32 WebApps :
Ce que ce tutoriel couvre
- Connexion d'un navigateur à une interface de chat Arduino Nano ESP32 via WebSocket
- Analyse des messages de chat entrants et génération de réponses dans le sketch
- Contrôle de la LED intégrée via des commandes tapées
- Accès à la page de chat depuis un smartphone ou un PC sur le même réseau WiFi
Matériel nécessaire
Ou vous pouvez acheter les kits suivants:
| 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 de configuration
Étapes
Suivez ces instructions étape par étape :
- Si c'est la première fois que vous utilisez l'Arduino Nano ESP32, consultez le tutoriel sur Installation du logiciel Arduino Nano ESP32..
- Connectez la carte Arduino Nano ESP32 à votre ordinateur à l'aide d'un câble USB.
- Lancez l'Arduino IDE sur votre ordinateur.
- Sélectionnez la carte appropriée (par ex. Arduino Nano ESP32) et le port COM.
- Accédez à l'icône Bibliothèques dans la barre gauche de l'Arduino IDE.
- Recherchez "DIYables ESP32 WebApps", puis trouvez la bibliothèque DIYables ESP32 WebApps par DIYables
- Cliquez sur le bouton Installer pour installer la bibliothèque.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- Il vous sera demandé d'installer d'autres dépendances de bibliothèques
- Cliquez sur le bouton Tout installer pour installer toutes les dépendances de la bibliothèque.
- Dans Arduino IDE, allez dans Fichier Exemples DIYables ESP32 WebApps WebChat, ou copiez le code ci-dessus et collez-le dans l'éditeur 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);
}
- Mettez à jour les identifiants WiFi dans le sketch :
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Cliquez sur le bouton Téléverser dans Arduino IDE pour téléverser le code sur Arduino Nano ESP32
- Ouvrez le Moniteur Série
- La sortie du Moniteur Série devrait ressembler à ce qui suit :
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
==========================================
- Si rien n'apparaît, appuyez sur le bouton de réinitialisation de la carte.
- Notez l'adresse IP affichée dans la sortie et entrez-la dans un navigateur sur un smartphone ou un PC connecté au même réseau.
- Exemple : http://192.168.0.2
- La page d'accueil affiche des liens vers les applications enregistrées :
- Sélectionnez le lien Chat pour ouvrir l'interface de chat :
- La page est également accessible directement à http://192.168.0.2/chat.
Commandes prises en charge
L'exemple de sketch reconnaît les entrées de chat suivantes :
Contrôle LED
- led on ou turn on led — Allume la LED intégrée
- led off ou turn off led — Éteint la LED intégrée
- blink ou blink led — Fait clignoter la LED
Statut et informations
- hello ou hi — Retourne un message de salutation
- help — Liste les commandes reconnues
- time — Rapporte le temps de fonctionnement de la carte
- status — Rapporte l'état du système
- how are you? — Retourne un message d'état
- what can you do? — Liste les capacités
- what is your name? — Retourne le nom de la carte
Exemple de session
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
Structure du code
Le sketch est organisé autour de trois composants :
- Serveur WebApp — gère le routage HTTP et les connexions WebSocket
- Page Chat — enregistre la route /chat et fournit l'interface utilisateur du navigateur
- Gestionnaire de messages — un callback invoqué pour chaque message de chat entrant
Le gestionnaire de messages reçoit le texte, l'analyse et envoie une réponse en utilisant chatPage.sendToWebChat().
Ajouter des commandes
Pour étendre l'ensemble de commandes, ajoutez des conditions dans le callback du gestionnaire de messages :
// Gérer les messages de chat entrants dans le callback onWebChatMessage
if (message.indexOf("your_command") >= 0) {
response = "Your custom response";
// Exécuter l'action matérielle associée
}
Contrôler d'autres matériels
Le même modèle s'applique à n'importe quel périphérique :
// Déplacer un servo sur commande
if (message.indexOf("move servo") >= 0) {
servo.write(90);
response = "Servo moved to 90 degrees";
}
// Lire un capteur à la demande
if (message.indexOf("temperature") >= 0) {
float temp = readTemperature();
response = "Current temperature: " + String(temp) + " C";
}
Dépannage
La carte ne répond pas aux messages
- Vérifiez la sortie du Moniteur Série pour les erreurs
- Vérifiez que l'indicateur de statut WebSocket dans le navigateur affiche "connecté"
- Rechargez la page
La connexion WiFi échoue
- Confirmez le SSID et le mot de passe
- L'Arduino Nano ESP32 se connecte uniquement aux réseaux 2,4 GHz ; le 5 GHz n'est pas pris en charge
- Rapprochez la carte du routeur si le signal est faible
La page de chat n'est pas accessible
- Confirmez l'adresse IP depuis le Moniteur Série
- Assurez-vous que l'appareil du navigateur est sur le même réseau WiFi que la carte
- Essayez d'abord la page d'accueil (http://[IP]/) pour vérifier que le serveur fonctionne
La LED ne répond pas
- L'exemple utilise la LED intégrée, qui fonctionne sans câblage
- Vérifiez que l'orthographe de la commande correspond aux chaînes reconnues
- Vérifiez la sortie du Moniteur Série pour le message brut reçu par la carte