Học cách tạo Web Server trên ESP32 để bật/tắt LED từ trình duyệt (điện thoại/PC). Bài hướng dẫn có sơ đồ kết nối, mã ví dụ và giải thích chi tiết cho người mới.
Mục lục
- Giới thiệu
- Kiến trúc hoạt động
- Phần cứng cần chuẩn bị
- Sơ đồ kết nối
- Mã nguồn Web Server
- Giải thích mã
- Cách truy cập & kiểm thử
- Gợi ý mở rộng
1) Giới thiệu
Web Server giúp bạn điều khiển thiết bị trực tiếp từ trình duyệt mà không cần app riêng. Trong bài này, ta sẽ tạo Web Server đơn giản trên ESP32 để bật/tắt LED (GPIO2).
2) Kiến trúc hoạt động
Phone/PC (Browser) <——Wi-Fi——> ESP32 (Web Server)
——> GPIO2 (LED)Trình duyệt gửi request tới địa chỉ IP của ESP32. Trang web hiển thị 2 nút ON/OFF để điều khiển LED.
3) Phần cứng cần chuẩn bị
| Linh kiện | Số lượng | Ghi chú |
|---|---|---|
| ESP32 DevKit V1 | 1 | |
| LED đỏ | 1 | |
| Điện trở 220Ω | 1 | Nối tiếp với LED |
| Dây nối/Breadboard | Vài sợi |
Có thể dùng LED tích hợp trên một số board (nếu có), tuy nhiên dùng LED rời giúp nhìn rõ.
4) Sơ đồ kết nối (Connection Diagram)
- GPIO2 → (220Ω) → Anode LED → Cathode LED → GND
- ESP32 cấp nguồn qua USB.
- Truy cập Web Server qua Wi-Fi (cùng mạng với điện thoại/PC).
5) Mã nguồn Web Server
#include <WiFi.h>
#include <WebServer.h>
#define LED_PIN 2
// === Đổi thông tin WiFi của bạn ===
const char* ssid = "YourWiFiName";
const char* password = "YourPassword";
WebServer server(80); // HTTP port 80
const char HTML_PAGE[] PROGMEM = R"HTML(
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ESP32 Web Server - Control LED</title>
<style>
body { font-family: system-ui, Arial; text-align:center; padding:30px; }
h1 { margin-bottom: 10px; }
.ip { color:#666; margin-bottom: 20px; }
button { font-size: 18px; padding: 12px 24px; margin: 8px; cursor: pointer; }
.on { background:#10b981; color:#fff; border:none; }
.off { background:#ef4444; color:#fff; border:none; }
.state { margin-top:14px; font-weight:600; }
</style>
</head>
<body>
<h1>ESP32 - Control LED</h1>
<div class="ip">Use buttons to toggle LED on GPIO2</div>
<button class="on" onclick="fetch('/on')">LED ON</button>
<button class="off" onclick="fetch('/off')">LED OFF</button>
<div class="state" id="st"></div>
<script>
async function refresh() {
const r = await fetch('/state'); const s = await r.text();
document.getElementById('st').textContent = 'LED state: ' + s;
}
setInterval(refresh, 1500); refresh();
</script>
</body>
</html>
)HTML";
void handleRoot() {
server.send_P(200, "text/html", HTML_PAGE);
}
void handleOn() {
digitalWrite(LED_PIN, HIGH);
server.send(200, "text/plain", "ON");
}
void handleOff() {
digitalWrite(LED_PIN, LOW);
server.send(200, "text/plain", "OFF");
}
void handleState() {
server.send(200, "text/plain", digitalRead(LED_PIN) ? "ON" : "OFF");
}
void setup() {
Serial.begin(115200);
pinMode(LED_PIN, OUTPUT);
digitalWrite(LED_PIN, LOW);
WiFi.begin(ssid, password);
Serial.print("Connecting WiFi");
while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); }
Serial.println("\n✅ WiFi connected: " + WiFi.localIP().toString());
server.on("/", handleRoot);
server.on("/on", handleOn);
server.on("/off", handleOff);
server.on("/state", handleState);
server.begin();
Serial.println("✅ Web server started");
}
void loop() {
server.handleClient();
}
6) Giải thích mã
- WebServer server(80): tạo HTTP server cổng 80.
server.on("/", ...): trả về trang HTML chứa nút ON/OFF.server.on("/on"),server.on("/off"): endpoint bật/tắt LED.server.on("/state"): trả lại trạng thái hiện tại (ON/OFF).- Vòng lặp
server.handleClient()xử lý các request từ trình duyệt.
7) Cách truy cập & kiểm thử
- Nạp code, mở Serial Monitor để xem địa chỉ IP của ESP32 (ví dụ:
192.168.4.1). - Trên điện thoại/PC cùng mạng Wi-Fi, nhập IP vào trình duyệt.
- Nhấn LED ON/OFF để điều khiển.
- Nếu không truy cập được:
- Kiểm tra router chặn khách trong LAN (AP Isolation).
- Đảm bảo điện thoại/PC cùng mạng với ESP32.
8) Gợi ý mở rộng
- Thêm mật khẩu hoặc JWT token cho endpoint.
- Dùng WebSocket để cập nhật realtime không cần polling.
- Tách HTML/CSS ra SPIFFS/LittleFS; nén gzip để tải nhanh.
- Đổi GPIO để điều khiển relay/quạt/bơm (qua mạch cách ly).
- Tạo nhiều nút điều khiển nhiều chân GPIO.