Ví dụ về máy chủ web đa trang ESP32
Ví dụ về Máy chủ Web - Máy chủ Web đa trang
Tổng quan
Ví dụ này cho thấy cách tạo một máy chủ web đa trang trên ESP32 với nhiều trang liên kết với nhau cho trang chủ, giám sát nhiệt độ và điều khiển đèn LED.
Các tính năng
- Điều hướng đa trang với các chuyển tiếp giữa các trang liền mạch
- Trang chủ với menu điều hướng và thông tin hệ thống
- Trang giám sát nhiệt độ với hiển thị nhiệt độ theo thời gian thực và khả năng làm mới
- Trang điều khiển LED với chức năng bật/tắt
- HTML dựa trên mẫu với thay thế nội dung động
- Các hàm trợ giúp cho mã sạch và dễ bảo trì
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) |
Cài đặt thư viện
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 hướng dẫn về thiết lập môi trường cho ESP32 trong Arduino IDE.
- 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 bo mạch ESP32 phù hợp (ví dụ, ESP32) và cổng COM.
- Mở Library Manager bằng cách nhấp vào biểu tượng Library Manager ở phía bên trái của Arduino IDE.
- Tìm kiếm Web Server for ESP32 và xác định thư viện mWebSockets do DIYables phát hành.
- Nhấp vào nút Install để thêm thư viện mWebSockets.
Ví dụ về Máy chủ Web
- Trong Arduino IDE, hãy vào Tệp Ví dụ Web Server for ESP32 WebServer để mở mã ví dụ
Kết nối mạch điện
Không cần các thành phần bên ngoài - ví dụ này sử dụng LED tích hợp ở chân 13.
Cấu trúc mã nguồn
i. home.h: Mẫu HTML cho trang chủ
i. temperature.h: Mẫu trang theo dõi nhiệt độ
i. led.h: Mẫu trang điều khiển LED
i. WebServer.ino: Logic máy chủ chính
Hướng dẫn thiết lập
1. Cấu hình mạng
Chỉnh sửa thông tin xác thực WiFi trực tiếp trong tệp WebServer.ino:
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
2. Tải lên mã nguồn và theo dõi đầu ra
- Kết nối ESP32 của bạn với máy tính.
- Chọn bo mạch và cổng đúng trong Arduino IDE.
- Tải lên bản phác thảo WebServer.ino.
- Mở Serial Monitor (tốc độ 9600 baud).
- Đợi kết nối WiFi.
- Ghi lại địa chỉ IP được hiển thị.
- Nếu bạn không thấy địa chỉ IP trong Serial Monitor, hãy nhấn nút reset trên bo mạch ESP32.
Cách sử dụng
Mở trình duyệt web của bạn và nhập địa chỉ IP được hiển thị trong Serial Monitor để truy cập máy chủ web ESP32.
Kiểm tra chức năng giám sát nhiệt độ:
- Nhấp vào menu "Nhiệt độ".
- Xem màn hình hiển thị nhiệt độ.
Kiểm tra chức năng điều khiển đèn LED:
- Nhấp vào menu "Điều khiển LED". Bạn sẽ thấy giao diện web như dưới đây:
- Bật và tắt đèn LED bằng các nút được cung cấp.
- Quan sát trạng thái đèn LED tích hợp trên bo mạch ESP32 được cập nhật ngay lập tức.
Các trang có sẵn
Trang chủ (`/`)
- Địa chỉ URL: http://your-esp32-ip/
- Tính năng:
- Tin nhắn chào mừng kèm thông tin hệ thống
- Menu điều hướng đến tất cả các trang
- Bố cục sạch sẽ, chuyên nghiệp
Trang Nhiệt Độ (`/temperature`)
- Địa chỉ URL: http://your-esp32-ip/temperature
- Tính năng:
- Hiển thị nhiệt độ theo thời gian thực bằng độ C
- Tự động làm mới mỗi 5 giây
- Nút làm mới thủ công
- Quay lại điều hướng trang chủ
Trang điều khiển LED (`/led`)
- Địa chỉ URL: http://your-esp32-ip/led
- URL Bật: http://your-esp32-ip/led/on
- URL Tắt: http://your-esp32-ip/led/off
- Tính năng:
- Hiển thị trạng thái đèn LED hiện tại
- Các tuyến riêng biệt cho các hành động bật và tắt
- Cập nhật trạng thái ngay sau khi trạng thái được thay đổi
- Quay lại trang chủ
Giải thích mã nguồn
Định tuyến máy chủ
// Configure routes with custom handler functions
server.addRoute("/", handleHome);
server.addRoute("/temperature", handleTemperature);
server.addRoute("/led", handleLed);
server.addRoute("/led/on", handleLedOn);
server.addRoute("/led/off", handleLedOff);
// Handler function examples
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HOME_PAGE);
}
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
float tempC = 25.5; // Simulated temperature value
String response = TEMPERATURE_PAGE;
response.replace("%TEMP_C%", String(tempC, 1));
server.sendResponse(client, response.c_str());
}
void handleLedOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
ledState = HIGH;
digitalWrite(LED_PIN, ledState);
sendLedPage(client);
}
void handleLedOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
ledState = LOW;
digitalWrite(LED_PIN, ledState);
sendLedPage(client);
}
Hệ thống mẫu
Ví dụ sử dụng một hệ thống thay thế ký hiệu giữ chỗ cho nội dung động:
- %TEMP_C%: Được thay thế bằng giá trị nhiệt độ hiện tại ở đơn vị độ C
- %LED_STATUS%: Được thay thế bằng trạng thái LED hiện tại ("ON" hoặc "OFF")
Các Hàm Trợ Giúp
// Helper function to send LED page with current status
void sendLedPage(WiFiClient& client) {
String ledStatus = (ledState == HIGH) ? "ON" : "OFF";
String response = LED_PAGE;
response.replace("%LED_STATUS%", ledStatus);
server.sendResponse(client, response.c_str());
}
// LED state tracking
int ledState = LOW; // Track LED state (LOW = OFF, HIGH = ON)
Tùy chỉnh
Thêm các trang mới
- Tạo mẫu HTML trong tệp tiêu đề mới
- Thêm trình xử lý định tuyến trong vòng lặp chính
- Cập nhật menu điều hướng ở các trang hiện có
Phong cách
Chỉnh sửa CSS trong các mẫu HTML để thay đổi giao diện:
<style>
body { font-family: Arial, sans-serif; margin: 40px; }
.container { max-width: 600px; margin: 0 auto; }
/* Add your custom styles here */
</style>
Thêm cảm biến
Thay thế giá trị nhiệt độ được mô phỏng bằng các giá trị đo được từ cảm biến thực tế:
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// Replace with actual sensor reading
// e.g., DHT22, DS18B20, etc.
float tempC = readActualTemperatureSensor(); // Your sensor function here
String response = TEMPERATURE_PAGE;
response.replace("%TEMP_C%", String(tempC, 1));
server.sendResponse(client, response.c_str());
}
Khắc phục sự cố
Các vấn đề phổ biến
Kết nối WiFi thất bại
- Kiểm tra SSID và mật khẩu trong tệp WebServer.ino
- Kiểm tra khả dụng mạng WiFi
- Đảm bảo ESP32 nằm trong phạm vi WiFi
Các trang không tải được
- Kiểm tra địa chỉ IP bằng Serial Monitor
- Xác nhận URL của trình duyệt khớp với địa chỉ IP của ESP32
- Thử làm mới trang
LED không phản hồi
- Xác nhận LED được kết nối với chân 13
- Kiểm tra Serial Monitor để xem các thông điệp gỡ lỗi
- Xác nhận các trình xử lý tuyến đường đã được đăng ký
Đầu ra gỡ lỗi
Bật gỡ lỗi bổ sung bằng cách thêm các câu lệnh Serial.println():
void handleLed(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("LED route accessed");
Serial.println("Method: " + method);
Serial.println("Request: " + request);
sendLedPage(client);
}
Các bước tiếp theo
- Khám phá ví dụ WebServerJson.ino để phát triển REST API
- Thử WebServerQueryStrings.ino để xử lý tham số nâng cao
- Xem WebServerWithWebSocket.ino để giao tiếp thời gian thực