Exemplo ESP32 WebChat - Tutorial de Interface de Chat Interativa
Visão Geral
O exemplo WebChat mostra como criar uma interface de chat interativa entre um navegador web e o Arduino. Projetado para a plataforma educacional ESP32, com recursos de IoT avançados e integração perfeita com sensores embutidos. O ESP32 pode responder de forma inteligente às mensagens e controlar o hardware com base em comandos do chat.
Assista a este tutorial em vídeo passo a passo mostrando como usar o WebChat com o app DIYables ESP32 WebApps:
Recursos
- Chat em Tempo Real: Mensagens instantâneas via WebSocket
- Respostas Inteligentes: O ESP32 dá respostas contextuais
- Controle de LED: Controle o LED embutido por comandos de chat
- Reconhecimento do Usuário: O ESP32 lembra o seu nome
- Histórico de Mensagens: Veja o histórico da conversa
- Design Responsivo: Funciona em computadores e dispositivos móveis
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 1 | × | DIYables ESP32 S3 Starter Kit (ESP32 S3 included) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgação: Alguns dos links desta seção são links de afiliado da Amazon. Podemos receber uma comissão pelas compras feitas por meio desses links, sem custo adicional para você. Agradecemos o seu apoio.
Instruções de Configuração
Passos Rápidos
Siga estas instruções passo a passo:
- Se esta é a sua primeira vez usando o ESP32, consulte o tutorial sobre como configurar o ambiente para ESP32 na Arduino IDE.
- Conecte a placa ESP32 ao seu computador usando um cabo USB.
- Abra a Arduino IDE no seu computador.
- Selecione a placa ESP32 apropriada (por exemplo, ESP32 Dev Module) e a porta COM.
- Vá até o ícone Libraries na barra lateral esquerda da Arduino IDE.
- Pesquise "DIYables ESP32 WebApps" e encontre a biblioteca DIYables ESP32 WebApps da DIYables
- Clique no botão Install para instalar a biblioteca.
- Você será solicitado a instalar algumas outras bibliotecas de dependência
- Clique no botão Install All para instalar todas as dependências da biblioteca.
- Na Arduino IDE, vá em File Examples DIYables ESP32 WebApps WebChat, ou copie o código acima e cole no editor da 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);
}
- Configure as credenciais de WiFi no código atualizando estas linhas:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Clique no botão Upload na Arduino IDE para carregar o código no ESP32
- Abra o Serial Monitor
- Veja o resultado no Serial Monitor. Ele será parecido com o abaixo
8
Serial.println("Hello World!");
Message (Enter to send message to 'ESP32 Dev Module' on 'COM15')
New Line
9600 baud
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
==========================================
- Se você não vir nada, reinicie a placa ESP32.
- Anote o endereço IP exibido e digite esse endereço na barra de endereços de um navegador web no seu celular ou PC.
- Exemplo: http://192.168.0.2
- Você verá a home page como na imagem abaixo:
- Clique no link Chat e você verá a interface do app Web Chat como abaixo:
- Você também pode acessar a página diretamente pelo endereço IP seguido de /chat. Por exemplo: http://192.168.0.2/chat
- Comece a conversar com o seu Arduino! Digite o seu nome quando solicitado e experimente comandos como "led on", "hello" ou "help" para interagir com o seu Arduino.
Como Usar
Iniciando uma Conversa
- Abra a interface de chat no seu navegador
- Digite o seu nome quando solicitado
- Comece a conversar com o seu Arduino!
Comandos do Chat
O ESP32 reconhece estes comandos especiais:
Controle de LED
- "led on" ou "turn on led" → Liga o LED embutido
- "led off" ou "turn off led" → Desliga o LED embutido
- "blink" ou "blink led" → Faz o LED piscar
Comandos de Informação
- "hello" ou "hi" → Saudação amigável
- "help" → Mostra os comandos disponíveis
- "time" → Mostra o tempo de atividade do ESP32
- "status" → Mostra o status do sistema
Perguntas
- "how are you?" → O ESP32 compartilha o seu status
- "what can you do?" → Lista os recursos
- "what is your name?" → O ESP32 se apresenta
Exemplo de Conversa
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
Personalização Criativa - Crie o Seu Assistente Interativo
Transforme este exemplo básico de chat em algo incrível! O design modular permite adaptar e expandir a funcionalidade para criar o seu próprio assistente ESP32 interativo e único.
Estrutura do Código
Componentes Principais
- Servidor WebApp: Gerencia as conexões HTTP e WebSocket
- Página de Chat: Fornece a interface web
- Tratador de Mensagens: Processa as mensagens de chat recebidas
- Gerador de Respostas: Cria respostas inteligentes
Funções Principais
// 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
}
Adicionando Comandos Personalizados
Para adicionar novos comandos de chat, modifique a função handleChatMessage:
if (message.indexOf("your_command") >= 0) {
response = "Your custom response";
// Add your custom action here
}
Opções de Personalização
Modifique a Personalidade do ESP32
Edite as mensagens de resposta para mudar a personalidade do Arduino:
String greetings[] = {
"Hello! How can I help you today?",
"Hi there! Ready to chat?",
"Greetings! What's on your mind?"
};
Adicione Controle de Hardware
Amplie o controle de LED para outros 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";
}
Altere o Tema da Interface Web
A interface de chat pode ser personalizada modificando o CSS nos arquivos da biblioteca:
- Cores: Edite os fundos em gradiente
- Fontes: Altere as famílias de fontes
- Layout: Ajuste o espaçamento e o tamanho
Solução de Problemas
Problemas Comuns
1. O ESP32 não responde às mensagens
- Verifique o Serial Monitor em busca de mensagens de erro
- Confira o status da conexão WebSocket
- Atualize a página do navegador
2. Falha na conexão WiFi
- Confira novamente o SSID e a senha
- Garanta que a rede seja de 2.4GHz (não 5GHz)
- Verifique a intensidade do sinal
3. Não consigo acessar a página de chat
- Verifique se o endereço IP está correto
- Confira se o ESP32 ainda está conectado ao WiFi
- Tente acessar a home page primeiro: http://[IP]/
4. O LED não responde aos comandos
- Verifique a ligação (o LED embutido deve funcionar por padrão)
- Confirme se os comandos estão escritos corretamente
- Verifique o Serial Monitor em busca de mensagens de depuração
Dicas de Depuração
Ative o modo de depuração adicionando esta linha em setup():
Serial.println("Debug mode enabled");
Monitore a saída Serial para ver:
- Mensagens recebidas
- Análise dos comandos
- Geração de respostas
- Ações de hardware
Recursos Avançados
Suporte a Vários Clientes
O chat suporta vários usuários simultaneamente:
- Cada usuário tem uma sessão única
- O ESP32 lembra os nomes individuais
- Envie mensagens para todos os usuários
Persistência de Mensagens
Adicione o registro de mensagens na EEPROM:
#include <EEPROM.h>
void saveMessage(String message) {
// Save to EEPROM for persistence
}
Integração com Sensores
Conecte sensores e torne-os acessíveis pelo chat:
// Temperature sensor
if (message.indexOf("temperature") >= 0) {
float temp = analogRead(A0) * 0.1; // Example conversion
response = "Temperature: " + String(temp) + "°C";
}
ESP32 DIYables WebApps com WebChat
Abaixo está o código completo para adaptar este web app com o WebChat:
/*
* 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);
}
Abaixo está um tutorial em vídeo passo a passo mostrando como usar o WebChat com o app DIYables ESP32 WebApps:
Próximos Passos
Depois de dominar o exemplo Chat, experimente:
- WebMonitor - Para depuração e desenvolvimento
- DigitalPins - Para controlar várias saídas
- Joystick - Para controle direcional
- MultipleWebApps - Combinando todos os recursos
Suporte
Para ajuda adicional:
- Consulte a documentação de Referência da API
- Visite os tutoriais DIYables: https://esp32io.com/tutorials/diyables-esp32-webapps
- Fóruns da comunidade ESP32