Arduino Nano ESP32 - Web Apps Chat
Overview
This tutorial demonstrates using the DIYablesWebChatPage class from the DIYables ESP32 WebApps Library on an Arduino Nano ESP32. The board runs a WebSocket server; a browser connects to it and exchanges plain text messages in real time. The sketch can parse incoming messages and respond with text, LED control, or any other action.
Watch this step-by-step video tutorial demonstrating how to use WebChat with the DIYables ESP32 WebApps app:
What This Tutorial Covers
- Connecting a browser to an Arduino Nano ESP32 chat interface over WebSocket
- Parsing incoming chat messages and generating replies in the sketch
- Controlling the built-in LED through typed commands
- Accessing the chat page from a smartphone or PC on the same WiFi network
Hardware Preparation
Or you can buy the following kits:
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Disclosure: Some of the links provided in this section are Amazon affiliate links. We may receive a commission for any purchases made through these links at no additional cost to you.
Additionally, some of these links are for products from our own brand, DIYables .
Additionally, some of these links are for products from our own brand, DIYables .
Setup Instructions
Steps
Follow these instructions step by step:
- If this is your first time using the Arduino Nano ESP32, refer to the tutorial on setting up the Arduino Nano ESP32 development environment.
- Connect the Arduino Nano ESP32 board to your computer using a USB cable.
- Launch the Arduino IDE on your computer.
- Select the appropriate board (e.g. Arduino Nano ESP32) and COM port.
- Navigate to the Libraries icon on the left bar of the Arduino IDE.
- Search "DIYables ESP32 WebApps", then find the DIYables ESP32 WebApps Library by DIYables
- Click Install button to install the library.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- You will be asked for installing some other library dependencies
- Click Install All button to install all library dependencies.
- On Arduino IDE, Go to File Examples DIYables ESP32 WebApps WebChat example, or copy the above code and paste it to the editor of 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);
}
- Update the WiFi credentials in the sketch:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Click Upload button on Arduino IDE to upload code to Arduino Nano ESP32
- Open the Serial Monitor
- The Serial Monitor output should resemble the following:
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
==========================================
- If nothing appears, press the reset button on the board.
- Note the IP address shown in the output and enter it in a browser on a smartphone or PC connected to the same network.
- Example: http://192.168.0.2
- The home page displays links to registered applications:
- Select the Chat link to open the chat interface:
- The page is also accessible directly at http://192.168.0.2/chat.
Supported Commands
The example sketch recognizes the following chat inputs:
LED Control
- led on or turn on led — Turns on the built-in LED
- led off or turn off led — Turns off the built-in LED
- blink or blink led — Blinks the LED
Status and Information
- hello or hi — Returns a greeting
- help — Lists recognized commands
- time — Reports board uptime
- status — Reports system status
- how are you? — Returns a status message
- what can you do? — Lists capabilities
- what is your name? — Returns the board name
Example 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
Code Structure
The sketch is organized around three components:
- WebApp Server — manages HTTP routing and WebSocket connections
- Chat Page — registers the /chat route and provides the browser UI
- Message Handler — a callback invoked for each incoming chat message
The message handler receives the text, parses it, and sends a reply using chatPage.sendToWebChat().
Adding Commands
To extend the command set, add conditions inside the message handler callback:
// Handle incoming chat messages in the onWebChatMessage callback
if (message.indexOf("your_command") >= 0) {
response = "Your custom response";
// Execute associated hardware action
}
Controlling Other Hardware
The same pattern applies to any peripheral:
// 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";
}
Troubleshooting
Board does not respond to messages
- Check the Serial Monitor for error output
- Verify that the WebSocket status indicator in the browser shows "connected"
- Reload the page
WiFi connection fails
- Confirm the SSID and password
- The Arduino Nano ESP32 connects to 2.4 GHz networks only; 5 GHz is not supported
- Move the board closer to the router if the signal is weak
Chat page not reachable
- Confirm the IP address from the Serial Monitor
- Ensure the browser device is on the same WiFi network as the board
- Try the home page first (http://[IP]/) to verify the server is running
LED does not respond
- The example uses the built-in LED, which works without wiring
- Verify the command spelling matches the recognized strings
- Check the Serial Monitor for the raw message received by the board