Arduino Nano ESP32 Web Chat com a Biblioteca DIYables ESP32 WebApps
Visão Geral
Este tutorial demonstra como usar a classe DIYablesWebChatPage da Biblioteca DIYables ESP32 WebApps em um Arduino Nano ESP32. A placa executa um servidor WebSocket; um navegador se conecta a ele e troca mensagens de texto simples em tempo real. O sketch pode interpretar as mensagens recebidas e responder com texto, controle de LED ou qualquer outra ação.
Assista a este tutorial em vídeo passo a passo, que demonstra como usar o WebChat com o app DIYables ESP32 WebApps:
O Que Este Tutorial Aborda
- Conectar um navegador a uma interface de chat do Arduino Nano ESP32 via WebSocket
- Interpretar as mensagens de chat recebidas e gerar respostas no sketch
- Controlar o LED integrado por meio de comandos digitados
- Acessar a página de chat a partir de um celular ou PC na mesma rede WiFi
Hardware Necessário
Or you can buy the following kits:
| 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
Siga estas instruções passo a passo:
- Se esta for a primeira vez que você usa o Arduino Nano ESP32, consulte o tutorial sobre como configurar o ambiente de desenvolvimento do Arduino Nano ESP32.
- Conecte a placa Arduino Nano ESP32 ao seu computador usando um cabo USB.
- Abra a Arduino IDE no seu computador.
- Selecione a placa apropriada (por exemplo, Arduino Nano ESP32) e a porta COM.
- Vá até o ícone Libraries na barra à esquerda da Arduino IDE.
- Pesquise por "DIYables ESP32 WebApps" e encontre a DIYables ESP32 WebApps Library, de DIYables
- Clique no botão Install para instalar a biblioteca.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- Será solicitado que você instale algumas outras dependências da biblioteca
- Clique no botão Install All para instalar todas as dependências da biblioteca.
- Na Arduino IDE, vá até File Examples DIYables ESP32 WebApps WebChat, ou copie o código acima e cole-o 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);
}
- Atualize as credenciais do WiFi no sketch:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Clique no botão Upload na Arduino IDE para fazer o upload do código para o Arduino Nano ESP32
- Abra o Serial Monitor
- A saída do Serial Monitor deve ser parecida com esta:
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
==========================================
- Se nada aparecer, pressione o botão de reset da placa.
- Anote o endereço IP mostrado na saída e digite-o em um navegador em um celular ou PC conectado à mesma rede.
- Exemplo: http://192.168.0.2
- A página inicial exibe links para os aplicativos registrados:
- Selecione o link Chat para abrir a interface de chat:
- A página também pode ser acessada diretamente em http://192.168.0.2/chat.
Comandos Suportados
O sketch de exemplo reconhece as seguintes entradas de chat:
Controle do LED
- led on ou turn on led — Liga o LED integrado
- led off ou turn off led — Desliga o LED integrado
- blink ou blink led — Pisca o LED
Status e Informações
- hello ou hi — Retorna uma saudação
- help — Lista os comandos reconhecidos
- time — Informa o tempo de funcionamento da placa
- status — Informa o status do sistema
- how are you? — Retorna uma mensagem de status
- what can you do? — Lista os recursos
- what is your name? — Retorna o nome da placa
Exemplo de Sessão
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
Estrutura do Código
O sketch é organizado em torno de três componentes:
- Servidor WebApp — gerencia o roteamento HTTP e as conexões WebSocket
- Página de Chat — registra a rota /chat e fornece a interface do navegador
- Tratador de Mensagens — um callback chamado para cada mensagem de chat recebida
O tratador de mensagens recebe o texto, interpreta-o e envia uma resposta usando chatPage.sendToWebChat().
Adicionando Comandos
Para ampliar o conjunto de comandos, adicione condições dentro do callback do tratador de mensagens:
// Handle incoming chat messages in the onWebChatMessage callback
if (message.indexOf("your_command") >= 0) {
response = "Your custom response";
// Execute associated hardware action
}
Controlando Outros Hardwares
O mesmo padrão se aplica a qualquer periférico:
// Move a servo when commanded
if (message.indexOf("move servo") >= 0) {
servo.write(90);
response = "Servo moved to 90 degrees";
}
// Read a sensor on demand
if (message.indexOf("temperature") >= 0) {
float temp = readTemperature();
response = "Current temperature: " + String(temp) + " C";
}
Solução de Problemas
A placa não responde às mensagens
- Verifique se há mensagens de erro no Serial Monitor
- Confirme se o indicador de status do WebSocket no navegador mostra "connected"
- Recarregue a página
A conexão WiFi falha
- Confirme o SSID e a senha
- O Arduino Nano ESP32 se conecta apenas a redes de 2,4 GHz; 5 GHz não é suportado
- Aproxime a placa do roteador se o sinal estiver fraco
A página de chat não está acessível
- Confirme o endereço IP no Serial Monitor
- Verifique se o dispositivo do navegador está na mesma rede WiFi da placa
- Tente primeiro a página inicial (http://[IP]/) para verificar se o servidor está em execução
O LED não responde
- O exemplo usa o LED integrado, que funciona sem nenhuma ligação
- Verifique se a grafia do comando corresponde às strings reconhecidas
- Verifique no Serial Monitor a mensagem bruta recebida pela placa