Trang chủ
ESP8266

ESP8266 Điều khiển rơ-le qua Web

Hướng dẫn này chỉ cho bạn cách điều khiển một rơ-le thông qua giao diện web bằng trình duyệt trên máy tính để bàn hoặc điện thoại thông minh, sử dụng ESP8266. Cụ thể, ESP8266 sẽ được lập trình để hoạt động như một máy chủ web. Giả sử địa chỉ IP của ESP8266 là 192.168.0.3. Dưới đây là chi tiết về cách nó hoạt động:

trình duyệt web cho rơ-le ESP8266 NodeMCU

Chúng ta sẽ học thông qua hai ví dụ mã nguồn:

Hướng dẫn cung cấp các nền tảng cơ bản mà bạn có thể tùy chỉnh một cách dễ dàng và sáng tạo để đạt được những điều sau:

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

1×ESP8266 NodeMCU ESP-12E
1×Recommended: ESP8266 NodeMCU ESP-12E (Uno-form)
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×Relay
1×dây jumper
1×breadboard
1×(Tùy chọn) Solenoid Lock
1×(Tùy chọn) 12V Power Adapter
1×(Tùy chọn) DC Power Jack
1×(Khuyến nghị) Screw Terminal Expansion Board for ESP8266
1×(Khuyến nghị) Power Splitter for ESP8266 Type-C

Or you can buy the following kits:

1×DIYables Sensor Kit (30 sensors/displays)
1×DIYables Sensor Kit (18 sensors/displays)

Về rơ-le và ESP8266

Nếu bạn chưa biết về rơ-le và ESP8266 (bố trí chân, cách hoạt động, cách lập trình ...), hãy tìm hiểu về chúng trong các bài hướng dẫn sau:

Sơ đồ đấu dây

sơ đồ đấu nối rơ-le ESP8266 NodeMCU

This image is created using Fritzing. Click to enlarge image

Xem thêm Sơ đồ chân ESP8266 và Cách cấp nguồn cho ESP8266.

Mã ESP8266 - Nội dung HTML được nhúng vào mã ESP8266

/* * Mã ESP8266 NodeMCU này được phát triển bởi newbiely.vn * Mã ESP8266 NodeMCU này được cung cấp để sử dụng công khai, không có ràng buộc. * Để xem hướng dẫn chi tiết và sơ đồ kết nối, vui lòng truy cập: * https://newbiely.vn/tutorials/esp8266/esp8266-controls-relay-via-web */ #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #define RELAY_PIN D8 // The ESP8266 pin connected to Relay const char *ssid = "YOUR_WIFI_SSID"; // CHANGE IT const char *password = "YOUR_WIFI_PASSWORD"; // CHANGE IT ESP8266WebServer server(80); // Web server on port 80 int relay_state = LOW; String getHTML() { String html = "<!DOCTYPE HTML>"; html += "<html>"; html += "<head>"; html += "<link rel='icon' href='data:,'>"; html += "</head>"; html += "<p>Relay state: <span style='color: red;'>"; if (relay_state == LOW) html += "OFF"; else html += "ON"; html += "</span></p>"; html += "<a href='/relay1/on'>Turn ON</a>"; html += "<br><br>"; html += "<a href='/relay1/off'>Turn OFF</a>"; html += "</html>"; return html; } void setup() { Serial.begin(9600); pinMode(RELAY_PIN, OUTPUT); digitalWrite(RELAY_PIN, relay_state); // Connect to Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi..."); } Serial.println("Connected to WiFi"); // Print the ESP8266's IP address Serial.print("ESP8266 Web Server's IP address: "); Serial.println(WiFi.localIP()); // home page server.on("/", HTTP_GET, []() { Serial.println("ESP8266 Web Server: New request received:"); Serial.println("GET /"); server.send(200, "text/html", getHTML()); }); // Route to control the Relay server.on("/relay1/on", HTTP_GET, []() { Serial.println("ESP8266 Web Server: New request received:"); Serial.println("GET /relay1/on"); relay_state = HIGH; digitalWrite(RELAY_PIN, relay_state); server.send(200, "text/html", getHTML()); }); server.on("/relay1/off", HTTP_GET, []() { Serial.println("ESP8266 Web Server: New request received:"); Serial.println("GET /relay1/off"); relay_state = LOW; digitalWrite(RELAY_PIN, relay_state); server.send(200, "text/html", getHTML()); }); // Start the server server.begin(); } void loop() { // Handle client requests server.handleClient(); // Your code here }

Hướng dẫn từng bước

Để bắt đầu với ESP8266 trên Arduino IDE, hãy làm theo các bước sau:

  • Xem ESP8266 - Cài đặt phần mềm nếu đây là lần đầu bạn dùng ESP8266.
  • Kết nối các linh kiện như được hiển thị trong sơ đồ.
  • Kết nối bo mạch ESP8266 với máy tính bằng cáp USB.
  • Mở Arduino IDE trên máy tính của bạn.
  • Chọn bo mạch ESP8266 phù hợp, ví dụ như NodeMCU 1.0 (ESP-12E Module), và cổng COM tương ứng.
  • Sao chép mã ở trên và mở với Arduino IDE.
  • Thay đổi thông tin wifi (SSID và mật khẩu) trong mã thành của bạn.
  • Nhấp nút Upload trên Arduino IDE để tải mã lên ESP8266.
  • Mở Serial Monitor.
  • Xem kết quả trên Serial Monitor.
COM6
Send
Connecting to WiFi... Connected to WiFi ESP8266 Web Server's IP address: 192.168.0.3
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  
  • Bạn sẽ thấy một địa chỉ IP, ví dụ: 192.168.0.3. Đây là địa chỉ IP của máy chủ Web ESP8266
  • Mở trình duyệt web và nhập một trong ba định dạng dưới đây vào thanh địa chỉ:
192.168.0.3
192.168.0.3/relay1/on
192.168.0.3/relay1/off
  • Xin lưu ý rằng địa chỉ IP có thể thay đổi. Vui lòng kiểm tra giá trị hiện tại trên Serial Monitor.
  • Bạn cũng sẽ thấy đầu ra dưới đây trên Serial Monitor.
COM6
Send
Connecting to WiFi... Connected to WiFi ESP8266 Web Server's IP address: 192.168.0.3 ESP8266 Web Server: New request recieved: GET / ESP8266 Web Server: New request recieved: GET /relay1/on ESP8266 Web Server: New request recieved: GET /relay1/off
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  
  • Kiểm tra trạng thái rơ-le
  • Bạn sẽ thấy trang web của bảng ESP8266 trên trình duyệt web như dưới đây
trình duyệt web cho rơ-le ESP8266 NodeMCU
  • Bạn hiện có thể điều khiển rơ-le bật/tắt thông qua giao diện web

ESP8266 Mã - Nội dung HTML được tách khỏi mã ESP8266

Vì một trang web đồ họa chứa một lượng lớn nội dung HTML, việc nhúng nó vào mã ESP8266 như trước đây trở nên bất tiện. Để giải quyết vấn đề này, chúng ta cần tách mã ESP8266 và mã HTML thành các tệp riêng biệt:

  • Mã ESP8266 sẽ được đặt trong một tệp .ino.
  • Mã HTML (bao gồm HTML, CSS và JavaScript) sẽ được đặt trong một tệp .h.

Hướng dẫn từng bước

  • Mở Arduino IDE và tạo một sketch mới, đặt tên cho nó, ví dụ, newbiely.com.ino
  • Sao chép mã dưới đây và mở bằng Arduino IDE
/* * Mã ESP8266 NodeMCU này được phát triển bởi newbiely.vn * Mã ESP8266 NodeMCU này được cung cấp để sử dụng công khai, không có ràng buộc. * Để xem hướng dẫn chi tiết và sơ đồ kết nối, vui lòng truy cập: * https://newbiely.vn/tutorials/esp8266/esp8266-controls-relay-via-web */ #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include "index.h" // Include the index.h file #define RELAY_PIN D8 // The ESP8266 pin connected to relay const char *ssid = "YOUR_WIFI_SSID"; // CHANGE IT const char *password = "YOUR_WIFI_PASSWORD"; // CHANGE IT ESP8266WebServer server(80); // Web server on port 80 int relay_state = LOW; String getHTML() { String html = webpage; // Use the HTML content from the index.h file html.replace("%RELAY_STATE%", relay_state ? "ON" : "OFF"); // update the relay state return html; } void setup() { Serial.begin(9600); pinMode(RELAY_PIN, OUTPUT); digitalWrite(RELAY_PIN, relay_state); // Connect to Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi..."); } Serial.println("Connected to WiFi"); // Print the ESP8266's IP address Serial.print("ESP8266 Web Server's IP address: "); Serial.println(WiFi.localIP()); // home page server.on("/", HTTP_GET, []() { Serial.println("ESP8266 Web Server: New request received:"); Serial.println("GET /"); server.send(200, "text/html", getHTML()); }); // Route to control the relay server.on("/relay1/on", HTTP_GET, []() { Serial.println("ESP8266 Web Server: New request received:"); Serial.println("GET /relay1/on"); relay_state = HIGH; digitalWrite(RELAY_PIN, relay_state); server.send(200, "text/html", getHTML()); }); server.on("/relay1/off", HTTP_GET, []() { Serial.println("ESP8266 Web Server: New request received:"); Serial.println("GET /relay1/off"); relay_state = LOW; digitalWrite(RELAY_PIN, relay_state); server.send(200, "text/html", getHTML()); }); // Start the server server.begin(); } void loop() { // Handle client requests server.handleClient(); // Your code here }
  • Thay đổi thông tin WiFi (SSID và mật khẩu) trong mã cho đúng với mạng của bạn
  • Tạo tập tin index.h trên Arduino IDE bằng cách:
    • Hoặc nhấp vào nút ngay bên dưới biểu tượng Serial Monitor và chọn New Tab, hoặc dùng tổ hợp phím Ctrl+Shift+N
    Arduino ide 2 thêm tệp
    • Đặt tên cho tập tin là index.h và nhấp vào nút OK
    Arduino ide 2 thêm tệp index.h
    • Sao chép mã dưới đây và dán nó vào index.h.
    /* * Mã ESP8266 NodeMCU này được phát triển bởi newbiely.vn * Mã ESP8266 NodeMCU này được cung cấp để sử dụng công khai, không có ràng buộc. * Để xem hướng dẫn chi tiết và sơ đồ kết nối, vui lòng truy cập: * https://newbiely.vn/tutorials/esp8266/esp8266-controls-relay-via-web */ #ifndef WEBPAGE_H #define WEBPAGE_H const char* webpage = R"=====( <!DOCTYPE HTML> <html> <head> <link rel='icon' href='data:,'> </head> <p>Relay state: <span style='color: red;'>%RELAY_STATE%</span></p> <a href='/relay1/on'>Turn ON</a> <br><br> <a href='/relay1/off'>Turn OFF</a> </html> )====="; #endif
    • Bây giờ bạn có mã trong hai tệp: newbiely.com.ino và index.h
    • Nhấp nút Upload trên Arduino IDE để tải mã lên ESP8266
    • Truy cập trang web của board ESP8266 thông qua trình duyệt trên máy tính hoặc điện thoại như trước. Bạn sẽ thấy nó giống với mã trước như dưới đây:
    trình duyệt web cho rơ-le ESP8266 NodeMCU

    ※ Lưu ý:

    • Nếu bạn chỉnh sửa nội dung HTML trong index.h và không chạm vào bất kỳ thứ gì trong tệp newbiely.com.ino, khi bạn biên dịch và tải mã lên ESP8266, Arduino IDE sẽ không cập nhật nội dung HTML.
    • Để Arduino IDE cập nhật nội dung HTML trong trường hợp này, hãy thực hiện một thay đổi trong tệp newbiely.com.ino (ví dụ: thêm một dòng trống, thêm một nhận xét....)

    Bạn có thể dễ dàng và sáng tạo tùy chỉnh mã ở trên để đạt được những điều sau:

    • Điều khiển nhiều rơ-le thông qua web
    • Thiết kế lại giao diện người dùng trên web (UI)

Bài hướng dẫn liên quan

Copyright © 2026 newbiely.vn. All rights reserved.
Terms and Conditions | Privacy Policy
Email: newbiely.com@gmail.com