Ejemplo de ESP32 WebChat - Tutorial de la Interfaz de Chat Interactiva
Resumen
El ejemplo WebChat demuestra cómo crear una interfaz de chat interactiva entre un navegador web y Arduino. Diseñado para ESP32, plataforma educativa con capacidades de IoT mejoradas e integración fluida con sensores integrados. El ESP32 puede responder de forma inteligente a los mensajes y controlar el hardware según los comandos de chat.
Características
- Chat en tiempo real: mensajería instantánea a través de WebSocket
- Respuestas inteligentes: ESP32 ofrece respuestas contextuales
- Control del LED: control del LED integrado mediante comandos de chat
- Reconocimiento de usuario: ESP32 recuerda tu nombre
- Historial de mensajes: ver el historial de la conversación
- Diseño responsivo: funciona en escritorio y móvil
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgación: Algunos de los enlaces proporcionados en esta sección son enlaces de afiliado de Amazon. Podemos recibir una comisión por las compras realizadas a través de estos enlaces sin costo adicional para usted. Apreciamos su apoyo.
Instrucciones de configuración
Pasos rápidos
Sigue estas instrucciones paso a paso:
- Si es la primera vez que usas el ESP32, consulta el tutorial sobre configurar el entorno para ESP32 en el IDE de Arduino.
- Conecta la placa ESP32 a tu computadora usando un cable USB.
- Inicia el IDE de Arduino en tu computadora.
- Selecciona la placa ESP32 adecuada (p. ej. ESP32 Dev Module) y el puerto COM.
- Navega hasta el icono Bibliotecas en la barra izquierda del IDE de Arduino.
- Busca "DIYables ESP32 WebApps", luego encuentra la Biblioteca DIYables ESP32 WebApps de DIYables
- Haz clic en el botón Instalar para instalar la biblioteca.
- Se le pedirá instalar algunas otras dependencias de bibliotecas.
- Haga clic en el botón Instalar todo para instalar todas las dependencias de la biblioteca.
- En Arduino IDE, ve a Archivo Ejemplos DIYables ESP32 WebApps WebChat como ejemplo, o copie el código anterior y péguelo en el editor del IDE de 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);
}
- Configura las credenciales de WiFi en el código actualizando estas líneas:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Haz clic en el botón Subir en el IDE de Arduino para subir el código al ESP32
- Abre el Monitor Serial
- Revisa el resultado en el Monitor Serial. Se ve como lo que se muestra a continuación.
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 no ve nada, reinicie la placa ESP32.
- Tome nota de la dirección IP mostrada y introduzca esta dirección en la barra de direcciones de un navegador web en su teléfono inteligente o PC.
- Ejemplo: http://192.168.0.2
- Verá la página de inicio como se muestra en la imagen a continuación.
- Haz clic en el enlace de Chat y verás la interfaz de usuario de la aplicación Web Chat como se muestra a continuación:
- O también puedes acceder a la página directamente introduciendo la dirección IP seguida de /chat. Por ejemplo: http://192.168.0.2/chat
- ¡Comienza a chatear con tu Arduino! Escribe tu nombre cuando se te solicite y prueba comandos como "led on", "hello" o "help" para interactuar con tu Arduino.
Cómo usar
Iniciar una conversación
- Abre la interfaz de chat en tu navegador
- Escribe tu nombre cuando se te solicite
- ¡Comienza a chatear con tu Arduino!
Comandos de chat
El ESP32 reconoce estos comandos especiales:
Control de LED
- "\"LED encendido\" o \"encender LED\" → Enciende el LED integrado
- "\"LED apagado\" o \"apagar LED\" → Apaga el LED integrado
- "\"parpadea\" o \"parpadea el LED\" → Hace parpadear el LED
Comandos de información
- "hello" or "hi" → Saludo amistoso
- "help" → Muestra los comandos disponibles
- "time" → Muestra el tiempo de actividad del ESP32
- "status" → Muestra el estado del sistema
Preguntas
- "¿Cómo estás?" → ESP32 comparte su estado
- "¿Qué puedes hacer?" → Enumera capacidades
- "¿Cómo te llamas?" → ESP32 se presenta a sí mismo
Ejemplo de conversación
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
Personalización creativa - Construye tu asistente interactivo
¡Transforma este ejemplo de chat básico en algo asombroso! El diseño modular te permite adaptar y ampliar la funcionalidad para crear tu propio asistente interactivo para ESP32.
Estructura del código
Componentes principales
- Servidor de WebApp: Gestiona conexiones HTTP y WebSocket
- Página de chat: Proporciona la interfaz web
- Manejador de mensajes: Procesa los mensajes de chat entrantes
- Generador de respuestas: Crea respuestas inteligentes
Funciones clave
// 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
}
Añadir comandos personalizados
Para agregar nuevos comandos de chat, modifica la función handleChatMessage:
if (message.indexOf("your_command") >= 0) {
response = "Your custom response";
// Add your custom action here
}
Opciones de personalización
Modificar la personalidad del ESP32
Edita los mensajes de respuesta para cambiar la personalidad de Arduino:
String greetings[] = {
"Hello! How can I help you today?",
"Hi there! Ready to chat?",
"Greetings! What's on your mind?"
};
Añadir control de hardware
Extender el control de LED a otros componentes:
// 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";
}
Cambiar el tema de la interfaz web
La interfaz de chat se puede personalizar modificando CSS en los archivos de la biblioteca:
- Colores: Editar fondos degradados
- Fuentes: Cambiar las familias de fuentes
- Diseño: Ajustar el espaciado y el tamaño
Solución de problemas
Problemas Comunes
- ESP32 no responde a los mensajes
- Verifica el monitor serial para mensajes de error
- Verifica el estado de la conexión WebSocket
- Actualiza la página del navegador
2. La conexión WiFi falló
- Verifica de nuevo el SSID y la contraseña
- Asegúrate de que la red sea de 2.4 GHz (no 5 GHz)
- Comprueba la intensidad de la señal
3. No se puede acceder a la página de chat
- Verificar que la dirección IP sea correcta
- Verificar si el ESP32 sigue conectado a la red WiFi
- Intentar acceder a la página de inicio primero: http://[IP]/
4. LED no responde a los comandos
- Verifica el cableado (el LED integrado debería funcionar por defecto)
- Verifica que los comandos estén escritos correctamente
- Verifica el Monitor Serial para mensajes de depuración
Consejos de depuración
Habilita el modo de depuración añadiendo esta línea en setup():
Serial.println("Debug mode enabled");
Monitoree la salida serial para ver:
- Mensajes entrantes
- Análisis de comandos
- Generación de respuestas
- Acciones de hardware
Características avanzadas
Soporte para múltiples clientes
El chat admite varios usuarios simultáneamente:
- Cada usuario tiene una sesión única
- ESP32 recuerda los nombres de cada usuario
- Difundir mensajes a todos los usuarios
Persistencia de mensajes
Añadir registro de mensajes a la EEPROM:
#include <EEPROM.h>
void saveMessage(String message) {
// Save to EEPROM for persistence
}
Integración con sensores
Conectar sensores y hacerlos accesibles a través del chat:
// Temperature sensor
if (message.indexOf("temperature") >= 0) {
float temp = analogRead(A0) * 0.1; // Example conversion
response = "Temperature: " + String(temp) + "°C";
}
Próximos pasos
Después de dominar el ejemplo de Chat, intenta:
- WebMonitor - Para depuración y desarrollo
- DigitalPins - Para controlar múltiples salidas
- Joystick - Para control direccional
- MultipleWebApps - Combinando todas las funcionalidades
Soporte
Para obtener ayuda adicional:
- Consulta la documentación de la API
- Visita los tutoriales de DIYables: https://esp32io.com/tutorials/diyables-esp32-webapps
- Foros de la comunidad ESP32