Ví dụ ESP32 WebChat Hướng dẫn Giao diện trò chuyện tương tác
Tổng quan
Ví dụ WebChat cho thấy cách tạo một giao diện trò chuyện tương tác giữa trình duyệt web và Arduino. Được thiết kế cho nền tảng giáo dục ESP32 với khả năng IoT được nâng cao và tích hợp liền mạch với các cảm biến có sẵn. ESP32 có thể đáp ứng một cách thông minh với các tin nhắn và điều khiển phần cứng dựa trên các lệnh trò chuyện.
Các tính năng
- Trò chuyện thời gian thực: Nhắn tin tức thì qua WebSocket
- Phản hồi thông minh: ESP32 cung cấp phản hồi có ngữ cảnh
- Điều khiển LED: Điều khiển đèn LED tích hợp thông qua các lệnh trò chuyện
- Nhận diện người dùng: ESP32 nhớ tên của bạn
- Lịch sử tin nhắn: Xem lại lịch sử cuộc trò chuyện
- Thiết kế đáp ứng: Hoạt động trên máy tính để bàn và thiết bị di động
Phần cứng cần chuẩn bị
| 1 | × | mô-đun phát triển ESP-WROOM-32 | ||
| 1 | × | Alternatively, ESP32 Uno-form board | ||
| 1 | × | Alternatively, ESP32 S3 Uno-form board | ||
| 1 | × | USB Cable Type-A to Type-C (for USB-A PC) | ||
| 1 | × | USB Cable Type-C to Type-C (for USB-C PC) | ||
| 1 | × | (Khuyến nghị) Screw Terminal Expansion Board for ESP32 | ||
| 1 | × | (Khuyến nghị) Breakout Expansion Board for ESP32 | ||
| 1 | × | (Khuyến nghị) Power Splitter for ESP32 |
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) |
Hướng dẫn cài đặt
Các bước nhanh
Hãy làm theo các hướng dẫn này từng bước một:
- Nếu đây là lần đầu tiên bạn sử dụng ESP32, hãy tham khảo bài hướng dẫn ESP32 - Cài Đặt Phần Mềm.
- Kết nối bo mạch ESP32 với máy tính của bạn bằng cáp USB.
- Mở Arduino IDE trên máy tính của bạn.
- Chọn bảng ESP32 phù hợp (ví dụ ESP32 Dev Module) và cổng COM.
- Điều hướng đến biểu tượng Libraries ở thanh bên trái của Arduino IDE.
- Tìm kiếm "DIYables ESP32 WebApps", sau đó tìm thư viện DIYables ESP32 WebApps do DIYables phát hành.
- Nhấn nút Install để cài đặt thư viện.
- Bạn sẽ được yêu cầu cài đặt một số phụ thuộc thư viện khác.
- Nhấn nút Cài đặt Tất cả để cài đặt tất cả các phụ thuộc thư viện.
- Trong Arduino IDE, hãy vào Tệp Ví dụ DIYables ESP32 WebApps WebChat ví dụ, hoặc sao chép mã ở trên và dán nó vào trình soạn thảo của 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);
}
- Cấu hình thông tin WiFi trong mã bằng cách cập nhật các dòng này:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Nhấn nút Tải lên trên Arduino IDE để tải mã lên ESP32
- Mở Serial Monitor
- Kiểm tra kết quả trên Serial Monitor. Như hình dưới đây
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
- Nếu bạn không thấy gì, hãy khởi động lại bo mạch ESP32.
- Ghi chú lại địa chỉ IP được hiển thị và nhập địa chỉ này vào thanh địa chỉ của trình duyệt trên điện thoại thông minh hoặc máy tính của bạn.
- Ví dụ: http://192.168.0.2
- Bạn sẽ thấy trang chủ như hình dưới đây.
- Nhấp vào liên kết Chat, bạn sẽ thấy giao diện người dùng của ứng dụng Web Chat như dưới đây:
- Hoặc bạn cũng có thể truy cập trang trực tiếp bằng địa chỉ IP kèm theo /chat. Ví dụ: http://192.168.0.2/chat
- Bắt đầu trò chuyện với Arduino của bạn! Nhập tên của bạn khi được nhắc và thử các lệnh như "led on", "hello", hoặc "help" để tương tác với Arduino của bạn.
Cách sử dụng
Bắt đầu một cuộc trò chuyện
- Mở giao diện trò chuyện trên trình duyệt của bạn
- Nhập tên của bạn khi được nhắc
- Bắt đầu trò chuyện với Arduino của bạn!
Các lệnh trò chuyện
ESP32 nhận diện các lệnh đặc biệt này:
Điều khiển LED
- "led on" hoặc "turn on led" → Bật đèn LED tích hợp
- "led off" hoặc "turn off led" → Tắt đèn LED tích hợp
- "blink" hoặc "blink led" → Làm cho LED nhấp nháy
Các lệnh thông tin
- "hello" hoặc "hi" → Lời chào thân thiện
- "help" → Hiển thị các lệnh có sẵn
- "time" → Hiển thị thời gian hoạt động của ESP32
- "status" → Hiển thị trạng thái hệ thống
Các câu hỏi
- "Bạn khỏe không?" → ESP32 chia sẻ trạng thái của nó
- "Bạn có thể làm được gì?" → Liệt kê các khả năng
- "Tên bạn là gì?" → ESP32 tự giới thiệu bản thân
Cuộc trò chuyện mẫu
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
Tùy chỉnh sáng tạo - Xây dựng Trợ lý tương tác của bạn
Biến đổi ví dụ trò chuyện cơ bản này thành một thứ gì đó tuyệt vời! Thiết kế mô-đun cho phép bạn điều chỉnh và mở rộng chức năng để tạo ra trợ lý ESP32 tương tác độc đáo của riêng bạn.
Cấu trúc mã nguồn
Các thành phần chính
- Máy chủ WebApp: Quản lý các kết nối HTTP và WebSocket
- Trang trò chuyện: Cung cấp giao diện web
- Bộ xử lý tin nhắn: Xử lý các tin nhắn trò chuyện đến
- Trình tạo phản hồi: Tạo các phản hồi thông minh
Các chức năng chính
// 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
}
Thêm Lệnh Tùy Chỉnh
Để thêm các lệnh trò chuyện mới, hãy chỉnh sửa hàm handleChatMessage:
if (message.indexOf("your_command") >= 0) {
response = "Your custom response";
// Add your custom action here
}
Tùy chọn tùy chỉnh
Chỉnh sửa tính cách ESP32
Chỉnh sửa các tin nhắn phản hồi để thay đổi tính cách của Arduino:
String greetings[] = {
"Hello! How can I help you today?",
"Hi there! Ready to chat?",
"Greetings! What's on your mind?"
};
Thêm Điều Khiển Phần Cứng
Mở rộng điều khiển LED sang các thành phần khác:
// 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";
}
Thay đổi chủ đề của giao diện web
Giao diện trò chuyện có thể được tùy chỉnh bằng cách chỉnh sửa CSS trong các tệp thư viện:
- Màu sắc: Chỉnh sửa nền gradient
- Phông chữ: Thay đổi các họ phông chữ
- Bố cục: Điều chỉnh khoảng cách và kích thước
Khắc phục sự cố
Các vấn đề phổ biến
- ESP32 không phản hồi các tin nhắn
- Kiểm tra Serial Monitor để xem thông báo lỗi
- Xác nhận trạng thái kết nối WebSocket
- Làm mới trang trình duyệt
- Kết nối Wi-Fi thất bại
- Kiểm tra lại SSID và mật khẩu
- Đảm bảo mạng 2.4GHz (không phải 5GHz)
- Kiểm tra cường độ tín hiệu
- Không thể truy cập trang trò chuyện
- Xác nhận địa chỉ IP là đúng
- Kiểm tra xem ESP32 còn kết nối với WiFi hay không
- Thử truy cập trang chủ trước: http://[IP]/
4. Đèn LED không phản hồi với các lệnh
- Kiểm tra dây dẫn (đèn LED tích hợp nên hoạt động theo mặc định)
- Xác nhận các lệnh được đánh vần đúng
- Kiểm tra Serial Monitor để xem các thông báo gỡ lỗi
Mẹo gỡ lỗi
Bật chế độ gỡ lỗi bằng cách thêm dòng này vào setup():
Serial.println("Debug mode enabled");
Theo dõi đầu ra Serial để xem:
- Tin nhắn đến
- Phân tích lệnh
- Tạo phản hồi
- Thao tác phần cứng
Tính năng nâng cao
Hỗ trợ nhiều máy khách
Trò chuyện hỗ trợ nhiều người dùng cùng lúc:
- Mỗi người dùng có một phiên làm việc duy nhất
- ESP32 lưu giữ tên của từng người
- Phát tin nhắn đến tất cả người dùng
Lưu trữ tin nhắn
Thêm ghi nhật ký tin nhắn vào EEPROM:
#include <EEPROM.h>
void saveMessage(String message) {
// Save to EEPROM for persistence
}
Tích hợp với cảm biến
Kết nối các cảm biến và cho phép chúng được truy cập thông qua trò chuyện:
// Temperature sensor
if (message.indexOf("temperature") >= 0) {
float temp = analogRead(A0) * 0.1; // Example conversion
response = "Temperature: " + String(temp) + "°C";
}
Các bước tiếp theo
Sau khi làm chủ ví dụ trò chuyện, hãy thử:
- WebMonitor - Để gỡ lỗi và phát triển
- DigitalPins - Để điều khiển nhiều đầu ra
- Joystick - Để điều khiển theo hướng
- MultipleWebApps - Kết hợp tất cả các tính năng
Hỗ trợ
Để được hỗ trợ thêm:
- Xem tài liệu tham khảo API
- Truy cập các hướng dẫn DIYables: https://esp32io.com/tutorials/diyables-esp32-webapps
- Diễn đàn cộng đồng ESP32