Lập trình ESP32 – Bài 7: Điều khiển Relay qua Web Server

Hướng dẫn cách kết nối Relay module với ESP32 và điều khiển bật/tắt thiết bị điện từ trình duyệt qua Web Server.

Mục lục

  1. Giới thiệu
  2. Relay là gì và nguyên lý hoạt động
  3. Phần cứng cần chuẩn bị
  4. Sơ đồ kết nối
  5. Mã nguồn điều khiển Relay
  6. Giải thích mã
  7. Kết quả chạy thử
  8. Lưu ý an toàn
  9. Gợi ý mở rộng

1) Giới thiệu

Relay là linh kiện quan trọng trong các ứng dụng nhà thông minh (Smart Home), cho phép ESP32 điều khiển thiết bị 220V AC như đèn, quạt, máy bơm…
Bài này hướng dẫn bạn:

  • Kết nối Relay module với ESP32
  • Tạo Web Server để bật/tắt thiết bị qua WiFi

2) Relay là gì và nguyên lý hoạt động

Relay là công tắc điện tử điều khiển bằng tín hiệu logic.

  • Khi GPIO của ESP32 ở mức LOW/HIGH, Relay sẽ đóng hoặc ngắt mạch điện xoay chiều.
  • Relay module có đèn LED báo trạng thái, chân IN, VCC, GND.
  • Nhiều module có cách kích khác nhau: LOW trigger hoặc HIGH trigger.

3) Phần cứng cần chuẩn bị

Linh kiệnSố lượngGhi chú
ESP32 DevKit V11
Relay module 1 kênh15V (hoạt động tốt với tín hiệu 3.3V)
Dây nốiVài sợi
Breadboard1Khuyến khích
Bóng đèn 220V + ổ cắm1Dùng khi demo thực tế (cẩn thận điện áp cao!)

4) Sơ đồ kết nối (Connection Diagram)

  • Relay VCC → 5V
  • Relay GND → GND
  • Relay IN → GPIO26 (tùy chọn)
  • ESP32 cấp nguồn qua USB
  • Relay COM/NO → tải 220V (chỉ khi test cẩn thận với nguồn cách ly)

5) Mã nguồn điều khiển Relay

#include <WiFi.h>
#include <WebServer.h>

#define RELAY_PIN 26  // chân điều khiển Relay

const char* ssid     = "YourWiFiName";
const char* password = "YourPassword";

WebServer server(80);
bool relayState = false;

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 - Relay Control</title>
<style>
body { font-family: system-ui; text-align:center; padding:30px;}
h1 { color:#0f766e;}
button { padding:14px 28px; margin:10px; font-size:18px; border:none; color:#fff; cursor:pointer;}
.on{background:#10b981;} .off{background:#ef4444;}
</style>
</head>
<body>
<h1>ESP32 Relay Control</h1>
<p>Relay state: <span id="state">--</span></p>
<button class="on" onclick="fetch('/on')">TURN ON</button>
<button class="off" onclick="fetch('/off')">TURN OFF</button>
<script>
async function refresh(){
  const r = await fetch('/state'); const s = await r.text();
  document.getElementById('state').textContent = s;
}
setInterval(refresh, 1500); refresh();
</script>
</body></html>
)HTML";

void handleRoot(){ server.send_P(200, "text/html", HTML_PAGE); }
void handleOn(){ relayState=true; digitalWrite(RELAY_PIN, HIGH); server.send(200,"text/plain","ON"); }
void handleOff(){ relayState=false; digitalWrite(RELAY_PIN, LOW); server.send(200,"text/plain","OFF"); }
void handleState(){ server.send(200,"text/plain", relayState ? "ON" : "OFF"); }

void setup(){
  Serial.begin(115200);
  pinMode(RELAY_PIN, OUTPUT);
  digitalWrite(RELAY_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ã

  • digitalWrite(RELAY_PIN, HIGH/LOW) → bật hoặc tắt Relay.
  • Giao diện web gửi request tới /on, /off, /state.
  • HTML cập nhật trạng thái mỗi 1.5 giây.
  • relayState giữ trạng thái hiện tại của Relay.

7) Kết quả chạy thử

  • Mở Serial Monitor, xem địa chỉ IP của ESP32.
  • Mở trình duyệt → truy cập: http://<ESP32_IP>
  • Nhấn TURN ON / TURN OFF, nghe tiếng “tách” từ Relay và xem LED báo sáng/tắt.

8) Lưu ý an toàn ⚠️

  • Relay module chỉ nên dùng điều khiển tải điện thấp (LED, quạt mini) khi học.
  • Nếu cần điều khiển thiết bị 220V, hãy dùng nguồn cách ly hoặc relay quang (Optocoupler).
  • Tuyệt đối không chạm tay vào mạch 220V khi đang cấp điện!

9) Gợi ý mở rộng

  • Thêm WebSocket để cập nhật trạng thái realtime.
  • Lưu trạng thái Relay vào EEPROM hoặc SPIFFS để khởi động lại không mất trạng thái.
  • Dùng giao diện điều khiển nhiều Relay (4 kênh, 8 kênh).
  • Tích hợp với Google Home / MQTT / Home Assistant.

Comments

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *