Hướng dẫn này là hướng dẫn từng bước cho thấy cách xây dựng Máy chủ Web ESP8266 độc lập điều khiển hai đầu ra (hai đèn LED). Máy chủ web ESP8266 NodeMCU này đáp ứng di động và nó có thể được truy cập bằng bất kỳ thiết bị nào có trình duyệt trong mạng cục bộ của bạnNếu bạn muốn tìm hiểu thêm về môđun ESP8266, trước tiên hãy đọc Hướng dẫn bắt đầu của tôi cho Môđun WiFi ESP8266.Hướng dẫn này bao gồm hai phương pháp khác nhau để xây dựng máy chủ web:Phần 1: Tạo máy chủ web bằng Arduino IDEPhần 2: Tạo máy chủ web bằng phần mềm NodeMCU
Trang 1Xây dựng máy chủ web ESP8266 - Mã và sơ đồ
(NodeMCU)
Hướng dẫn này là hướng dẫn từng bước cho thấy cách xây dựng Máy chủ Web
ESP8266 độc lập điều khiển hai đầu ra (hai đèn LED) Máy chủ web ESP8266 NodeMCU này đáp ứng di động và nó có thể được truy cập bằng bất kỳ thiết bị nào có trình duyệt
trong mạng cục bộ của bạn.
Nếu bạn muốn tìm hiểu thêm về mô-đun ESP8266, trước tiên hãy đọc Hướng dẫn bắt
đầu của tôi cho Mô-đun WiFi ESP8266.
Hướng dẫn này bao gồm hai phương pháp khác nhau để xây dựng máy chủ web:
Phần 1: Tạo máy chủ web bằng Arduino IDE
Phần 2: Tạo máy chủ web bằng phần mềm NodeMCU
PHẦN 1: TẠO MÁY CHỦ WEB BẰNG ARDUINO IDE
Phần này chỉ cho bạn cách tạo một máy chủ web để kiểm soát hai đầu ra bằng Arduino IDE Bạn có thể sử dụng phương pháp này để tạo một máy chủ web khác để đáp ứng
nhu cầu của mình.
Hướng dẫn này có sẵn ở định dạng video (xem bên dưới) và ở định dạng bằng văn bản (tiếp tục đọc trang này).
Trang 21 Tải xuống và cài đặt Arduino IDE trên hệ điều hành của bạn (một số phiên bản cũ hơn
sẽ không hoạt động).
2 Sau đó, bạn cần cài đặt tiện ích bổ sung ESP8266 cho Arduino IDE Đối với điều đó,
hãy đi tới Tùy chọn > tệp.
3 Nhập http://arduino.esp8266.com/stable/package_esp8266com_index.json vào trường
"URL bổ sung của người quản lý bảng" như thể hiện trong hình bên dưới Sau đó,
nhấp vào nút "OK".
4 Đi tới Công cụ > Hội đồng quản trị > Quản lý bảng
Trang 35 Cuộn xuống, chọn menu bảng ESP8266 và cài đặt "e sp8266 by ESP8266
Community", như thể hiện trong hình bên dưới.
6 Đi tới Bảng công cụ > và chọn bảng ESP8266 của bạn Sau đó, mở lại Arduino IDE
của bạn.
Mã
Sao chép mã sau vào Arduino IDE của bạn, nhưng chưa tải nó lên Bạn cần thực hiện
một số thay đổi để làm cho nó hoạt động cho bạn.
Trang 4// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
// Set web server port number to 80
WiFiServer server(80);
// Variable to store the HTTP request
String header;
// Auxiliar variables to store the current output state
String output5State = "off";
String output4State = "off";
// Assign output variables to GPIO pins
const int output5 = 5;
const int output4 = 4;
// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0;
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;
Trang 5}
void loop(){
WiFiClient client = server.available(); // Listen for incoming clients
if (client) { // If a new client connects,
Serial.println("New Client."); // print a message out in the serial port
String currentLine = ""; // make a String to hold incoming data from the client
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
Trang 6width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
// CSS to style the on/off buttons
// Feel free to change the background-color and font-size attributes
to fit your preferences
client.println("<style>html { font-family: Helvetica; display: block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #195B6A; border: none;
color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #77878A;}</style>
</head>");
// Web Page Heading
client.println("<body><h1>ESP8266 Web Server</h1>");
// Display current state, and ON/OFF buttons for GPIO 5
client.println("<p>GPIO 5 - State " + output5State + "</p>");
// If the output5State is off, it displays the ON button
// Display current state, and ON/OFF buttons for GPIO 4
client.println("<p>GPIO 4 - State " + output4State + "</p>");
// If the output4State is off, it displays the ON button
Trang 7// Replace with your network credentials
const char* ssid = "";
const char* password = "";
Tải lên bản phác thảo
Tải bản phác thảo lên ESP-12E
Nếu bạn đang sử dụng ESP-12E NodeMCU Kit, việc tải lên bản phác thảo rất đơn giản,
vì nó có lập trình viên tích hợp Cắm bảng của bạn vào máy tính của bạn Đảm bảo rằng bạn đã chọn đúng bo mạch và cổng COM.
Sau đó, nhấp vào nút Tải lên trong Arduino IDE và đợi vài giây cho đến khi bạn thấy
thông báo "Đã tải lên xong." ở góc dưới cùng bên trái.
Tải bản phác thảo lên ESP-01
Trang 8Tải mã lên ESP-01 yêu cầu thiết lập giao tiếp nối tiếp giữa ESP8266 của bạn và Lập trình viên FTDI như thể hiện trong sơ đồ bên dưới.
Lưu ý: cách khác, bạn có thể sử dụng Bộ điều hợp nối tiếp ESP8266-01, dễ sử dụng
hơn và ít bị lỗi hơn.
Bảng sau đây cho thấy các kết nối bạn cần thực hiện giữa ESP8266 và lập trình viên
Trang 92x điện trở (220 hoặc 330 ohms sẽ hoạt động tốt)
Breadboard
Dây nhảy
Nếu bạn đang sử dụng ESP-01, bạn cũng cần một lập trình viên FTDI hoặc Bộ điều hợp nối tiếp.
Kết nối hai đèn LED với ESP8266 của bạn như thể hiện trong sơ đồ sau - với một đèn
LED được kết nối với GPIO 4 (D2) và một đèn LED khác với GPIO 5 (D1).
Nếu bạn đang sử dụng ESP-01
Nếu bạn đang sử dụng ESP8266-01, hãy sử dụng sơ đồ sau làm tham chiếu, nhưng bạn cần thay đổi gán GPIO trong mã (thành GPIO 2 và GPIO 0).
Trang 10Kiểm tra máy chủ web
Bây giờ, bạn có thể tải lên mã và nó sẽ hoạt động ngay lập tức Đừng quên kiểm tra xem bạn đã chọn đúng bo mạch và cổng COM chưa, nếu không bạn sẽ gặp lỗi khi cố gắng tải lên Mở Màn hình nối tiếp với tốc độ truyền 115200.
Tìm địa chỉ IP ESP
Nhấn nút ESP8266 RESET và nó sẽ xuất địa chỉ IP ESP trên Màn hình nối tiếp
Trang 11Sao chép địa chỉ IP đó, vì bạn cần nó để truy cập máy chủ web.
Truy cập Máy chủ Web
Mở trình duyệt của bạn, nhập địa chỉ IP ESP và bạn sẽ thấy trang sau Trang này được gửi bởi ESP8266 khi bạn thực hiện yêu cầu trên địa chỉ IP ESP.
Nếu nhìn vào màn hình nối tiếp, bạn có thể thấy những gì đang diễn ra trên nền ESP
nhận được yêu cầu HTTP từ một máy khách mới – trong trường hợp này là trình duyệt
của bạn.
Trang 12Bạn cũng có thể xem thông tin khác về yêu cầu HTTP – các trường này được gọi là
trường tiêu đề HTTP và chúng xác định các tham số hoạt động của giao dịch HTTP.
Kiểm tra máy chủ web
Hãy kiểm tra máy chủ web Nhấp vào nút để BẬT GPIO 5 ESP nhận được yêu cầu trên URL /5/on và BẬT đèn LED 5.
Trang 13Trạng thái LED cũng được cập nhật trên trang web.
Kiểm tra nút GPIO 4 và kiểm tra xem nó có hoạt động theo cách tương tự không.
Mã hoạt động như thế nào
Bây giờ, chúng ta hãy xem xét kỹ hơn mã để xem nó hoạt động như thế nào, để bạn có thể sửa đổi nó để đáp ứng nhu cầu của mình.
Điều đầu tiên bạn cần làm là bao gồm thư viện ESP8266WiFi.
// Load Wi-Fi library
#include <ESP8266WiFi.h>
Như đã đề cập trước đây, bạn cần chèn ssid và mật khẩu của mình vào các dòng sau
bên trong dấu ngoặc kép.
const char* ssid = "";
const char* password = "";
Sau đó, bạn đặt máy chủ web của mình thành cổng 80.
// Set web server port number to 80
WiFiServer server(80);
Dòng sau tạo một biến để lưu trữ tiêu đề của yêu cầu HTTP:
Trang 14Tiếp theo, bạn tạo các biến phụ trợ để lưu trữ trạng thái hiện tại của đầu ra của bạn Nếu bạn muốn thêm nhiều đầu ra hơn và lưu trạng thái của nó, bạn cần tạo nhiều biến hơn.
// Auxiliar variables to store the current output state
String output5State = "off";
String output4State = "off";
Bạn cũng cần gán GPIO cho từng kết quả đầu ra của mình Ở đây chúng tôi đang sử
dụng GPIO 4 và GPIO 5 Bạn có thể sử dụng bất kỳ GPIO phù hợp nào khác.
// Assign output variables to GPIO pins
const int output5 = 5;
const int output4 = 4;
Thiết lập()
Bây giờ, chúng ta hãy đi vào setup() Hàm setup() chỉ chạy một lần khi ESP của bạn khởi động lần đầu tiên Đầu tiên, chúng tôi bắt đầu giao tiếp nối tiếp với tốc độ truyền 115200 cho mục đích gỡ lỗi.
Serial.begin(115200);
Bạn cũng xác định GPIO của mình là OUTPUT và đặt chúng thành THẤP.
// Initialize the output variables as outputs
Các dòng sau bắt đầu kết nối Wi-Fi với WiFi.begin(ssid, mật khẩu), đợi kết nối thành
công và in địa chỉ IP ESP trong Màn hình nối tiếp.
// Connect to Wi-Fi network with SSID and password
Trong loop(), chúng ta lập trình những gì xảy ra khi một máy khách mới thiết lập kết nối
với máy chủ web.
Trang 15ESP luôn lắng nghe các khách hàng mới với dòng này:
WiFiClient client = server.available(); // Listen for incoming clients
Khi nhận được yêu cầu từ máy khách, chúng tôi sẽ lưu dữ liệu đến Vòng lặp while theo sau sẽ chạy miễn là máy khách vẫn kết nối Chúng tôi không khuyên bạn nên thay đổi
phần sau của mã trừ khi bạn biết chính xác những gì bạn đang làm.
if (client) { // If a new client connects,
Serial.println("New Client."); // print a message out in the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected()) { // loop while the client's connected
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
Phần tiếp theo của câu lệnh if và else kiểm tra nút nào được nhấn trong trang web của
bạn và kiểm soát kết quả đầu ra cho phù hợp Như chúng ta đã thấy trước đây, chúng tôi đưa ra yêu cầu trên các URL khác nhau tùy thuộc vào nút chúng tôi nhấn.
// turns the GPIOs on and off
Ví dụ: nếu bạn đã nhấn nút GPIO 5 ON , URL sẽ thay đổi thành địa chỉ IP ESP theo sau
là /5/ON và chúng tôi nhận được thông tin đó trên tiêu đề HTTP Vì vậy, chúng ta có thể kiểm tra xem tiêu đề có chứa biểu thức GET / 5 / on hay không.
Trang 16Nếu nó chứa, mã sẽ in một thông báo trên màn hình nối tiếp, thay đổi biến output5State thành bật và bật đèn LED.
Điều này hoạt động tương tự cho các nút khác Vì vậy, nếu bạn muốn thêm nhiều kết quả đầu ra hơn, bạn nên sửa đổi phần mã này để bao gồm chúng.
Hiển thị trang web HTML
Điều tiếp theo bạn cần làm là tạo trang web ESP8266 sẽ gửi phản hồi đến trình duyệt
của bạn với một số văn bản HTML để hiển thị trang web.
Trang web được gửi đến máy khách bằng hàm client.println() Bạn nên nhập những gì
bạn muốn gửi cho khách hàng dưới dạng đối số.
Văn bản đầu tiên bạn phải luôn gửi là dòng sau, cho biết rằng chúng tôi đang gửi HTML.
<!DOCTYPE html><html>
Sau đó, dòng sau làm cho trang web đáp ứng trong bất kỳ trình duyệt web nào.
client.println("<head><meta name=\"viewport\" content=\"width=device-width,
initial-scale=1\">");
Cái tiếp theo được sử dụng để ngăn các yêu cầu liên quan đến biểu tượng yêu thích
-Bạn không cần phải lo lắng về dòng này.
client.println("<link rel=\"icon\" href=\"data:,\">");
Tạo kiểu cho Trang Web
Tiếp theo, chúng ta có một số CSS để tạo kiểu cho các nút và giao diện trang web.
Chúng tôi chọn phông chữ Helvetica, xác định nội dung sẽ được hiển thị dưới dạng một khối và được căn chỉnh ở trung tâm.
client.println("<style>html { font-family: Helvetica; display: inline-block;
margin: 0px auto; text-align: center;}");
Chúng tôi tạo kiểu cho các nút của mình với một số thuộc tính để xác định màu sắc, kích thước, đường viền, v.v.
client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor:
pointer;}");
Sau đó, chúng tôi xác định kiểu cho nút thứ hai, với tất cả các thuộc tính của nút mà
chúng tôi đã xác định trước đó, nhưng với một màu khác Đây sẽ là phong cách cho nút tắt.
client.println(".button2 {background-color: #77878A;}</style></head>");
Đặt đầu đề đầu tiên của trang Web
Trang 17Trong dòng tiếp theo bạn đặt tiêu đề đầu tiên của trang web, bạn có thể thay đổi văn bản này thành bất cứ điều gì bạn thích.
// Web Page Title
client.println("<h1>ESP8266 Web Server</h1>");
Hiển thị các nút và trạng thái tương ứng
Sau đó, bạn viết một đoạn văn để hiển thị trạng thái hiện tại GPIO 5 Như bạn có thể
thấy, chúng ta sử dụng biến output5State, để trạng thái cập nhật ngay lập tức khi biến
này thay đổi.
client.println("<p>GPIO 5 - State " + output5State + "</p>");
Sau đó, chúng tôi hiển thị nút bật hoặc tắt, tùy thuộc vào trạng thái hiện tại của GPIO.
Đưa nó đi xa hơn
Bây giờ bạn đã biết mã hoạt động như thế nào, bạn có thể sửa đổi mã để thêm nhiều
đầu ra hơn hoặc sửa đổi trang web của mình Để sửa đổi trang web của bạn, bạn có thể cần biết một số HTML và CSS.
Thay vì điều khiển hai đèn LED, bạn có thể control một rơle để điều khiển thực tế bất kỳ thiết bị điện tử nào.
Để xây dựng một máy chủ web để hiển thị các bài đọc cảm biến, bạn có thể đọc các
hướng dẫn sau:
ESP8266 Máy chủ Web Nhiệt độ và Độ ẩm DHT (ARDUINO IDE)
Máy chủ web nhiệt độ ESP8266 DS18B20 (Arduino IDE)
Trang 18Ngoài ra, nếu bạn muốn lập trình ESP8266 của mình bằng MicroPython, bạn có thể đọc hướng dẫn này: ESP32 / ESP8266 Máy chủ web MicroPython - Kiểm soát đầu ra
Nếu bạn thích ESP8266, hãy chắc chắn rằng bạn xem khóa học của chúng tôi về Tự
động hóa gia đình với ESP8266.
PHẦN 2: TẠO MÁY CHỦ WEB BẰNG PHẦN MỀM NODEMCU
Phần này chỉ cho bạn cách tạo một máy chủ web để kiểm soát hai đầu ra bằng phần sụn NodeMCU và ngôn ngữ lập trình LUA Bạn có thể sử dụng phương pháp này để tạo một máy chủ web khác để đáp ứng nhu cầu của mình.
Đầu tiên, hãy xem video minh họa dưới đây
Tại sao phải flash mô-đun ESP8266 của bạn với NodeMCU?
NodeMCU là một phần sụn cho phép bạn lập trình các mô-đun ESP8266 với tập lệnh
LUA Lập trình ESP8266 với LUA bằng phần sụn NodeMCU rất giống với cách bạn lập
trình Arduino của mình Chỉ với một vài dòng mã, bạn có thể thiết lập kết nối WiFi, điều
khiển GPIO ESP8266, biến ESP8266 của bạn thành máy chủ web và hơn thế nữa.
Tải xuống NodeMCU Flasher cho Windows
Sau khi đấu dây mạch của bạn, bạn phải tải xuống đèn flash NodeMCU Đó là tệp exe
mà bạn có thể tải xuống bằng một trong các liên kết sau:
Win32 Windows Flasher
Trang 19Win64 Windows Flasher
Bạn có thể nhấp vào đây để tìm tất cả thông tin về đèn flash NodeMCU.
Nhấp nháy ESP8266 của bạn
Nếu bạn đang sử dụng ESP8266-12, bạn chỉ cần cắm ESP vào máy tính của mình Nếu bạn đang sử dụng ESP-01, bạn cần một lập trình viên FTDI để kết nối nó với máy tính
của bạn Để thiết lập giao tiếp nối tiếp giữa ESP8266 của bạn và Lập trình viên FTDI như thể hiện trong sơ đồ bên dưới.
Mở đèn flash mà bạn vừa tải xuống và một cửa sổ sẽ xuất hiện (như trong hình sau).
Nhấn nút "Flash" và nó sẽ bắt đầu quá trình nhấp nháy ngay lập tức (Bạn có thể phải
thay đổi một số cài đặt trên tab Nâng cao) Sau khi kết thúc quá trình này, nó sẽ xuất hiện một vòng tròn màu xanh lá cây với biểu tượng kiểm tra.
Sơ đồ
Để xây dựng mạch bạn cần các phần sau: