Trang chủ
ESP8266

ESP8266 Điều khiển LED qua web

Hướng dẫn này chỉ cho bạn cách điều khiển một đèn LED thông qua giao diện web bằng trình duyệt trên PC 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.5. Dưới đây là chi tiết về cách nó hoạt động:

Chúng ta sẽ học thông qua hai đoạn mã mẫu:

Bài hướng dẫn cung cấp những nền tảng cơ bản mà bạn có thể tuỳ 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×LED Kit
1×LED (red)
1×LED Module
1×220Ω Resistor
1×breadboard
1×dây jumper
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)

Giới thiệu về LED và ESP8266

Nếu bạn không biết về LED và ESP8266 (bố trí các 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 đây:

Sơ đồ đấu dây

sơ đồ đấu nối LED 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-led-via-web */ #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #define LED_PIN D6 // The ESP8266 pin connected to LED 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 LED_state = LOW; String getHTML() { String html = "<!DOCTYPE HTML>"; html += "<html>"; html += "<head>"; html += "<link rel='icon' href='data:,'>"; html += "</head>"; html += "<p>LED state: <span style='color: red;'>"; if (LED_state == LOW) html += "OFF"; else html += "ON"; html += "</span></p>"; html += "<a href='/led1/on'>Turn ON</a>"; html += "<br><br>"; html += "<a href='/led1/off'>Turn OFF</a>"; html += "</html>"; return html; } void setup() { Serial.begin(9600); pinMode(LED_PIN, OUTPUT); digitalWrite(LED_PIN, LED_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 LED server.on("/led1/on", HTTP_GET, []() { Serial.println("ESP8266 Web Server: New request received:"); Serial.println("GET /led1/on"); LED_state = HIGH; digitalWrite(LED_PIN, LED_state); server.send(200, "text/html", getHTML()); }); server.on("/led1/off", HTTP_GET, []() { Serial.println("ESP8266 Web Server: New request received:"); Serial.println("GET /led1/off"); LED_state = LOW; digitalWrite(LED_PIN, LED_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:

  • Hãy xem hướng dẫn ESP8266 - Cài đặt phần mềm nếu đây là lần đầu bạn sử dụng ESP8266.
  • Nối các thành phần theo sơ đồ đã cho.
  • Kết nối bo mạch ESP8266 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 ESP8266 phù hợp, ví dụ NodeMCU 1.0 (ESP-12E Module), và cổng COM tương ứng của nó.
  • Sao chép mã ở trên và mở bằng Arduino IDE.
  • Thay đổi thông tin wifi (SSID và mật khẩu) trong mã cho đúng với WiFi của bạn.
  • Nhấp vào 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ở một 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/led1/on
192.168.0.3/led1/off
  • Xin lưu ý rằng địa chỉ IP có thể thay đổi. Vui lòng xác nhận 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 /led1/on ESP8266 Web Server: New request recieved: GET /led1/off
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  
  • Kiểm tra trạng thái đèn LED
  • Bạn sẽ thấy trang web của mạch ESP8266 trên trình duyệt web như dưới đây
trình duyệt web LED cho ESP8266 NodeMCU
  • Bạn hiện có thể điều khiển đèn LED bật/tắt thông qua giao diện web

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

Vì một trang web đồ họa chứa lượng lớn HTML nên 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 ra thành các tệp riêng biệt:

  • Mã ESP8266 sẽ được đặt vào một tệp .ino.
  • Mã HTML (bao gồm HTML, CSS và Javascript) sẽ được đặt vào 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-led-via-web */ #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include "index.h" // Include the index.h file #define LED_PIN D6 // The ESP8266 pin connected to LED 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 LED_state = LOW; String getHTML() { String html = webpage; // Use the HTML content from the index.h file html.replace("%LED_STATE%", LED_state ? "ON" : "OFF"); // update the led state return html; } void setup() { Serial.begin(9600); pinMode(LED_PIN, OUTPUT); digitalWrite(LED_PIN, LED_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 LED server.on("/led1/on", HTTP_GET, []() { Serial.println("ESP8266 Web Server: New request received:"); Serial.println("GET /led1/on"); LED_state = HIGH; digitalWrite(LED_PIN, LED_state); server.send(200, "text/html", getHTML()); }); server.on("/led1/off", HTTP_GET, []() { Serial.println("ESP8266 Web Server: New request received:"); Serial.println("GET /led1/off"); LED_state = LOW; digitalWrite(LED_PIN, LED_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ã nguồn theo thông tin của bạn
  • Tạo tệp 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 phím Ctrl+Shift+N
    Arduino ide 2 thêm tệp
    • Đặt tên cho file là index.h và nhấn nút OK
    Arduino ide 2 thêm tệp index.h
    • Sao chép đoạn 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-led-via-web */ #ifndef WEBPAGE_H #define WEBPAGE_H const char* webpage = R"=====( <!DOCTYPE HTML> <html> <head> <link rel='icon' href='data:,'> </head> <p>LED state: <span style='color: red;'>%LED_STATE%</span></p> <a href='/led1/on'>Turn ON</a> <br><br> <a href='/led1/off'>Turn OFF</a> </html> )====="; #endif
    • Bây giờ bạn có mã nguồn trong hai tệp tin: newbiely.com.ino và index.h
    • Nhấp vào nút Upload trên Arduino IDE để tải mã lên ESP8266
    • Truy cập trang web của bảng ESP8266 thông qua trình duyệt web trên máy tính hoặc điện thoại của bạn như trước. Bạn sẽ thấy nó tương tự với mã trước đây như dưới đây:
    trình duyệt web LED cho ESP8266 NodeMCU

    ※ Lưu ý:

    • Nếu bạn chỉnh sửa nội dung HTML trong index.h và không chỉnh sửa bất cứ điều gì trong tệp newbiely.com.ino, khi 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 chú thích....)

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

    • Điều khiển nhiều đèn LED 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