ESP8266 NodeMCU Async Web Server – Điều khiển đầu ra với Arduino IDE (ESPAsyncWebServer thư viện)
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (580.92 KB, 16 trang )
ESP8266 NodeMCU Async Web Server – Điều khiển
đầu ra với Arduino IDE (ESPAsyncWebServer thư viện)
Trong hướng dẫn này, bạn sẽ học cách xây dựng một máy chủ web không đồng bộ với
bo mạch ESP8266 NodeMCU để kiểm soát đầu ra của nó. Bo mạch sẽ được lập trình
bằng Arduino IDE và chúng ta sẽ sử dụng thư viện ESPAsyncWebServer.
Bạn cũng có thể thích: Máy chủ web khơng đồng bộ ESP32 - Kiểm soát đầu ra bằng
Arduino IDE (thư viện ESPAsyncWebServer)
Máy chủ Web không đồng bộ
Để xây dựng máy chủ web, chúng tôi sẽ sử dụng thư viện ESPAsyncWebServer cung
cấp một cách dễ dàng để xây dựng một máy chủ web không đồng bộ. Xây dựng một máy
chủ web không đồng bộ có một số lợi thế như đã đề cập trong trang GitHub thư viện,
chẳng hạn như:
"Xử lý nhiều kết nối cùng một lúc";
"Khi bạn gửi phản hồi, bạn ngay lập tức sẵn sàng xử lý các kết nối khác trong khi
máy chủ đang xử lý việc gửi phản hồi ở chế độ nền";
"Công cụ xử lý mẫu đơn giản để xử lý các mẫu";
Và nhiều hơn nữa.
Hãy xem tài liệu thư viện trên trang GitHub của nó.
1/16
Các bộ phận cần thiết
Trong hướng dẫn này, chúng ta sẽ kiểm sốt ba kết quả đầu ra. Ví dụ, chúng tơi sẽ điều
khiển đèn LED. Vì vậy, bạn cần các phần sau:
ESP8266 (đọc bảng phát triển ESP8266 tốt nhất)
3x đèn LED
Điện trở 3x 220 Ohm
Breadboard
Dây nhảy
Bạn có thể sử dụng các liên kết trước đó hoặc truy cập trực tiếp vào
MakerAdvisor.com/tools để tìm tất cả các phần cho các dự án của mình với giá tốt nhất!
Sơ
Trước khi tiếp tục mã, hãy nối 3 đèn LED với ESP8266. Chúng tôi đang kết nối đèn LED
với GPIO 5, 4 và 2, nhưng bạn có thể sử dụng bất kỳ GPIO nào khác (đọc Hướng dẫn
tham khảo ESP8266 NodeMCU GPIO).
2/16
Cài đặt thư viện - Máy chủ web không đồng bộ ESP
Để xây dựng máy chủ web, bạn cần cài đặt các thư viện sau. Nhấp vào các liên kết bên
dưới để tải xuống các thư viện.
ESPAsyncWebServer
ESPAsyncTCP
Các thư viện này khơng có sẵn để cài đặt thơng qua Trình quản lý thư viện Arduino, vì
vậy bạn cần sao chép các tệp thư viện vào thư mục Thư viện cài đặt Arduino. Ngồi ra,
trong Arduino IDE, bạn có thể vào Sketch > Include Library > Add .zip Library và chọn
3/16
các thư viện bạn vừa tải xuống.
Tổng quan dự án
Để hiểu rõ hơn về mã, hãy xem máy chủ web hoạt động như thế nào.
Máy chủ web chứa một tiêu đề "Máy chủ web ESP" và ba nút (công tắc chuyển đổi)
để kiểm soát ba đầu ra. Mỗi nút trượt có một nhãn cho biết chân đầu ra GPIO. Bạn
có thể dễ dàng xóa / thêm nhiều đầu ra hơn.
Khi thanh trượt màu đỏ, điều đó có nghĩa là đầu ra đang bật (trạng thái của nó là
CAO). Nếu bạn chuyển đổi thanh trượt, nó sẽ tắt đầu ra (thay đổi trạng thái thành
THẤP).
Khi thanh trượt có màu xám, điều đó có nghĩa là đầu ra bị tắt (trạng thái của nó là
THẤP). Nếu bạn chuyển đổi thanh trượt, nó sẽ bật đầu ra (thay đổi trạng thái thành
CAO).
Nó hoạt động như thế nào?
4/16
Hãy xem điều gì sẽ xảy ra khi bạn chuyển đổi các nút. Chúng ta sẽ xem ví dụ cho GPIO
2. Nó hoạt động tương tự cho các nút khác.
1. Trong trường hợp đầu tiên, bạn chuyển đổi nút để bật GPIO 2. Khi điều đó xảy ra, nó
sẽ tạo một yêu cầu HTTP GET trên URL /update?output=2&state=1. Dựa trên URL đó,
chúng tơi thay đổi trạng thái của GPIO 2 thành 1 (CAO) và bật đèn LED.
2. Trong ví dụ thứ hai, khi bạn chuyển đổi nút để tắt GPIO 2. Khi điều đó xảy ra, hãy thực
hiện yêu cầu HTTP GET trên URL /update?output=2&state=0. Dựa trên URL đó, chúng
tơi thay đổi trạng thái của GPIO 2 thành 0 (THẤP) và tắt đèn LED.
Mã cho máy chủ Web không đồng bộ ESP
Sao chép mã sau vào Arduino IDE của bạn.
5/16
/*********
Rui Santos
Complete project details at />
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
*********/
// Import required libraries
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
const char* PARAM_INPUT_1 = "output";
const char* PARAM_INPUT_2 = "state";
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<title>ESP Web Server</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
h2 {font-size: 3.0rem;}
p {font-size: 3.0rem;}
body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}
.switch {position: relative; display: inline-block; width: 120px; height:
68px}
.switch input {display: none}
.slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; backgroundcolor: #ccc; border-radius: 6px}
.slider:before {position: absolute; content: ""; height: 52px; width: 52px;
left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s;
transition: .4s; border-radius: 3px}
input:checked+.slider {background-color: #b30000}
input:checked+.slider:before {-webkit-transform: translateX(52px); -mstransform: translateX(52px); transform: translateX(52px)}
</style>
</head>
<body>
ESP Web Server
%BUTTONPLACEHOLDER%
<script>function toggleCheckbox(element) {
var xhr = new XMLHttpRequest();
if(element.checked){ xhr.open("GET", "/update?output="+element.id+"&state=1",
true); }
else { xhr.open("GET", "/update?output="+element.id+"&state=0", true); }
xhr.send();
6/16
}
</script>
</body>
</html>
)rawliteral";
// Replaces placeholder with button section in your web page
String processor(const String& var){
//Serial.println(var);
if(var == "BUTTONPLACEHOLDER"){
String buttons = "";
buttons += "
Output - GPIO 5
<label class=\"switch\">"><span class=\"slider\"></span></label>";
buttons += "
Output - GPIO 4
<label class=\"switch\">"><span class=\"slider\"></span></label>";
buttons += "
Output - GPIO 2
<label class=\"switch\">"><span class=\"slider\"></span></label>";
return buttons;
}
return String();
}
String outputState(int output){
if(digitalRead(output)){
return "checked";
}
else {
return "";
}
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
pinMode(5, OUTPUT);
digitalWrite(5, LOW);
pinMode(4, OUTPUT);
digitalWrite(4, LOW);
pinMode(2, OUTPUT);
digitalWrite(2, LOW);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Print ESP Local IP Address
Serial.println(WiFi.localIP());
// Route for root / web page
7/16
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
// Send a GET request to <ESP_IP>/update?output=<inputMessage1>&state=
<inputMessage2>
server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) {
String inputMessage1;
String inputMessage2;
// GET input1 value on <ESP_IP>/update?output=<inputMessage1>&state=
<inputMessage2>
if (request->hasParam(PARAM_INPUT_1) && request->hasParam(PARAM_INPUT_2)) {
inputMessage1 = request->getParam(PARAM_INPUT_1)->value();
inputMessage2 = request->getParam(PARAM_INPUT_2)->value();
digitalWrite(inputMessage1.toInt(), inputMessage2.toInt());
}
else {
inputMessage1 = "No message sent";
inputMessage2 = "No message sent";
}
Serial.print("GPIO: ");
Serial.print(inputMessage1);
Serial.print(" - Set to: ");
Serial.println(inputMessage2);
request->send(200, "text/plain", "OK");
});
// Start server
server.begin();
}
void loop() {
}
Xem mã thô
Mã hoạt động như thế nào
Trong phần này, chúng tơi sẽ giải thích cách mã hoạt động. Hãy tiếp tục đọc nếu bạn
muốn tìm hiểu thêm hoặc chuyển đến phần Trình diễn để xem kết quả cuối cùng.
Nhập thư viện
Đầu tiên, nhập các thư viện cần thiết. Bạn cần bao gồm WiFi, ESPAsyncWebserver và
các thư viện ESPAsyncTCP.
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
Đặt thông tin đăng nhập mạng của bạn
8/16
Chèn thông tin đăng nhập mạng của bạn vào các biến sau, để ESP8266 có thể kết nối
với mạng cục bộ của bạn.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
Thông số đầu vào
Để kiểm tra các tham số được truyền trên URL (số GPIO và trạng thái của nó), chúng tôi
tạo hai biến, một cho đầu ra và một cho trạng thái.
const char* PARAM_INPUT_1 = "output";
const char* PARAM_INPUT_2 = "state";
Hãy nhớ rằng ESP8266 nhận được các yêu cầu như thế này: /update? đầu ra = 2&
trạng thái = 0
Đối tượng AsyncWebServer
Tạo một đối tượng AsyncWebServer trên cổng 80.
AsyncWebServer server(80);
Xây dựng trang Web
Tất cả văn bản HTML với kiểu và JavaScript được lưu trữ trong biến index_html. Bây giờ
chúng ta sẽ đi qua văn bản HTML và xem mỗi phần làm gì.
Tiêu đề nằm bên trong thẻ <title> và </tile>. Tiêu đề chính xác như âm thanh của nó: tiêu
đề tài liệu của bạn, hiển thị trong thanh tiêu đề của trình duyệt web của bạn. Trong
trường hợp này, đó là "Máy chủ web ESP".
<title>ESP Web Server</title>
Thẻ <meta> sau đây làm cho trang web của bạn đáp ứng trong bất kỳ trình duyệt nào
(máy tính xách tay, máy tính bảng hoặc điện thoại thông minh).
<meta name="viewport" content="width=device-width, initial-scale=1">
9/16
Dòng tiếp theo ngăn các yêu cầu trên biểu tượng u thích. Trong trường hợp này, chúng
tơi khơng có biểu tượng yêu thích. Favicon là biểu tượng trang web hiển thị bên cạnh tiêu
đề trong tab trình duyệt web. Nếu chúng tơi khơng thêm dịng sau, ESP sẽ nhận được
u cầu cho biểu tượng u thích mỗi khi chúng tơi truy cập máy chủ web.
<link rel="icon" href="data:,">
Giữa các thẻ <style></style>, chúng tôi thêm một số CSS để tạo kiểu cho trang web.
Chúng tôi sẽ không đi vào chi tiết về cách thức hoạt động của kiểu CSS này.
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
h2 {font-size: 3.0rem;}
p {font-size: 3.0rem;}
body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}
.switch {position: relative; display: inline-block; width: 120px; height:
68px}
.switch input {display: none}
.slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; backgroundcolor: #ccc; border-radius: 6px}
.slider:before {position: absolute; content: ""; height: 52px; width: 52px;
left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s;
transition: .4s; border-radius: 3px}
input:checked+.slider {background-color: #b30000}
input:checked+.slider:before {-webkit-transform: translateX(52px); -mstransform: translateX(52px); transform: translateX(52px)}
</style>
Nội dung HTML
Bên trong thẻ <body></body> là nơi chúng tôi thêm nội dung trang web.
Thẻ thêm tiêu đề vào trang web. Trong trường hợp này, văn bản "Máy chủ
web ESP", nhưng bạn có thể thêm bất kỳ văn bản nào khác.
ESP Web Server
Sau tiêu đề, chúng ta có các nút. Cách các nút hiển thị trên trang web (màu đỏ: nếu
GPIO đang bật; hoặc màu xám: nếu GPIO tắt) khác nhau tùy thuộc vào trạng thái GPIO
hiện tại.
Khi bạn truy cập trang máy chủ web, bạn muốn nó hiển thị đúng trạng thái GPIO hiện tại.
Vì vậy, thay vì thêm văn bản HTML để xây dựng các nút, chúng tơi sẽ thêm trình giữ chỗ
%BUTTONPLACEHOLDER%. Palceholder này sau đó sẽ được thay thế bằng văn bản
HTML thực tế để xây dựng các nút với các trạng thái phù hợp, khi trang web được tải.
%BUTTONPLACEHOLDER%
JavaScript
Sau đó, có một số JavaScript chịu trách nhiệm thực hiện yêu cầu HTTP GET khi bạn
chuyển đổi các nút như chúng tơi đã giải thích trước đây.
10/16
<script>function toggleCheckbox(element) {
var xhr = new XMLHttpRequest();
if(element.checked){ xhr.open("GET", "/update?output="+element.id+"&state=1",
true); }
else { xhr.open("GET", "/update?output="+element.id+"&state=0", true); }
xhr.send();
}
</script>
Đây là dòng đưa ra yêu cầu:
if(element.checked){ xhr.open("GET", "/update?output="+element.id+"&state=1",
true); }
element.id trả về id của một phần tử HTML. Id của mỗi nút sẽ là GPIO được điều khiển
như chúng ta sẽ thấy trong phần tiếp theo:
Nút GPIO 5 » element.id = 5
Nút GPIO 4 » element.id = 4
Nút GPIO 2 » element.id = 2
Xử lý
Bây giờ, chúng ta cần tạo hàm processor(), thay thế các trình giữ chỗ trong văn bản
HTML bằng những gì chúng ta định nghĩa.
Khi trang web được yêu cầu, hãy kiểm tra xem HTML có bất kỳ chỗ dành sẵn nào khơng.
Nếu nó tìm thấy chỗ dành sẵn %BUTTONPLACEHOLDER%, nó sẽ trả về văn bản HTML
để tạo các nút.
String processor(const String& var){
//Serial.println(var);
if(var == "BUTTONPLACEHOLDER"){
String buttons = "";
buttons += "
Output - GPIO 5
<label class=\"switch\">"><span class=\"slider\"></span></label>";
buttons += "
Output - GPIO 4
<label class=\"switch\">"><span class=\"slider\"></span></label>";
buttons += "
Output - GPIO 2
<label class=\"switch\">"><span class=\"slider\"></span></label>";
return buttons;
}
return String();
}
Bạn có thể dễ dàng xóa hoặc thêm nhiều dịng hơn để tạo thêm các nút.
Chúng ta hãy xem cách các nút được tạo ra. Chúng tôi tạo một biến String được gọi là
các nút có chứa văn bản HTML để xây dựng các nút. Chúng tôi nối văn bản HTML với
trạng thái đầu ra hiện tại để nút bật tắt có màu xám hoặc đỏ. Trạng thái đầu ra hiện tại
11/16
được trả về bởi hàm outputState(<GPIO>) (nó chấp nhận làm đối số GPIO). Xem bên
dưới:
buttons += "
Output - GPIO 2
<label class=\"switch\">"><span class=\"slider\"></span></label>";
\ được sử dụng để chúng ta có thể truyền "" vào bên trong Chuỗi.
Hàm outputState() trả về "checked" nếu GPIO đang bật hoặc và trường trống "" nếu
GPIO tắt.
String outputState(int output){
if(digitalRead(output)){
return "checked";
}
else {
return "";
}
}
Vì vậy, văn bản HTML cho GPIO 2 khi nó được bật, sẽ là:
Output - GPIO 2
<label class="switch">
<input type="checkbox" onchange="toggleCheckbox(this)" id="2" checked>
</label>
Hãy chia nhỏ điều này thành các phần nhỏ hơn để hiểu cách thức hoạt động của nó.
Trong HTML, công tắc bật tắt là loại đầu vào. Thẻ <input> chỉ định trường đầu vào nơi
người dùng có thể nhập dữ liệu. Công tắc bật tắt là một trường nhập của hộp kiểm kiểu.
Có nhiều loại trường nhập liệu khác.
<input type="checkbox">
Hộp kiểm có thể được kiểm tra hoặc khơng. Khi nó được kiểm tra, bạn có một cái gì đó
như sau:
<input type="checkbox" checked>
Onchange là một thuộc tính event xảy ra khi chúng ta thay đổi giá trị của phần tử (hộp
kiểm). Bất cứ khi nào bạn chọn hoặc bỏ chọn cơng tắc bật tắt, nó sẽ gọi hàm JavaScript
toggleCheckbox() cho id phần tử cụ thể đó (điều này).
Id chỉ định một id duy nhất cho phần tử HTML đó. Id cho phép chúng ta thao tác với phần
tử bằng JavaScript hoặc CSS.
<input type="checkbox" onchange="toggleCheckbox(this)" id="2" checked>
Thiết lập()
12/16
Trong setup() khởi tạo Serial Monitor cho mục đích gỡ lỗi.
Serial.begin(115200);
Đặt GPIO bạn muốn điều khiển làm đầu ra bằng hàm pinMode() và đặt chúng thành
LOW khi ESP8266 khởi động lần đầu tiên. Nếu bạn đã thêm nhiều GPIO hơn, hãy thực
hiện quy trình tương tự.
pinMode(2, OUTPUT);
pinMode(5, OUTPUT);
digitalWrite(5, LOW);
pinMode(4, OUTPUT);
digitalWrite(4, LOW);
pinMode(2, OUTPUT);
digitalWrite(2, LOW);
Kết nối với mạng cục bộ của bạn và in địa chỉ IP ESP8266.
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Print ESP Local IP Address
Serial.println(WiFi.localIP());
Trong setup(), bạn cần xử lý những gì xảy ra khi ESP8266 nhận được yêu cầu. Như
chúng ta đã thấy trước đây, bạn nhận được một yêu cầu thuộc loại này:
<ESP_IP>/update?output=<inputMessage1>&state=<inputMessage2>
Vì vậy, chúng tơi kiểm tra xem u cầu có chứa giá trị biến PARAM_INPUT1 (output) và
PARAM_INPUT2 (state) hay không và lưu các giá trị tương ứng trên các biến
input1Message và input2Message.
if (request->hasParam(PARAM_INPUT_1) && request->hasParam(PARAM_INPUT_2)) {
inputMessage1 = request->getParam(PARAM_INPUT_1)->value();
inputMessage2 = request->getParam(PARAM_INPUT_2)->value();
Sau đó, chúng ta điều khiển GPIO tương ứng với trạng thái tương ứng (biến
inputMessage1 lưu số GPIO và inputMessage2 lưu trạng thái – 0 hoặc 1)
digitalWrite(inputMessage1.toInt(), inputMessage2.toInt());
Dưới đây là code hoàn chỉnh để xử lý HTTP GET /update request:
13/16
server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) {
String inputMessage1;
String inputMessage2;
// GET input1 value on <ESP_IP>/update?output=<inputMessage1>&state=
<inputMessage2>
if (request->hasParam(PARAM_INPUT_1) && request->hasParam(PARAM_INPUT_2)) {
inputMessage1 = request->getParam(PARAM_INPUT_1)->value();
inputMessage2 = request->getParam(PARAM_INPUT_2)->value();
digitalWrite(inputMessage1.toInt(), inputMessage2.toInt());
}
else {
inputMessage1 = "No message sent";
inputMessage2 = "No message sent";
}
Serial.print("GPIO: ");
Serial.print(inputMessage1);
Serial.print(" - Set to: ");
Serial.println(inputMessage2);
request->send(200, "text/plain", "OK");
});
Cuối cùng, khởi động máy chủ:
server.begin();
Cuộc biểu tình
Sau khi tải mã lên ESP8266 của bạn, hãy mở Màn hình nối tiếp với tốc độ truyền là
115200. Nhấn nút RST/EN trên bo mạch. Bạn sẽ nhận được địa chỉ IP của nó.
Mở trình duyệt và nhập địa chỉ IP ESP. Bạn sẽ có quyền truy cập vào một trang web
tương tự.
14/16
Nhấn các nút bật tắt để điều khiển GPIO ESP. Đồng thời, bạn sẽ nhận được các thông
báo sau trong Serial Monitor để giúp bạn gỡ lỗi mã của mình.
Bạn cũng có thể truy cập máy chủ web từ trình duyệt trong điện thoại thơng minh của
mình. Bất cứ khi nào bạn mở máy chủ web, nó sẽ hiển thị các trạng thái GPIO hiện tại.
Màu đỏ cho biết GPIO đang bật và màu xám cho biết GPIO đang tắt.
15/16
Tổng kết
Trong hướng dẫn này, bạn đã học cách tạo một máy chủ web không đồng bộ với
ESP8266 NodeMCU để kiểm sốt đầu ra của nó bằng cách sử dụng các công tắc bật tắt.
Bất cứ khi nào bạn mở trang web, nó sẽ hiển thị các trạng thái GPIO được cập nhật.
Chúng tơi có các ví dụ máy chủ web khác sử dụng thư viện ESPAsyncWebServer mà
bạn có thể thích:
Máy chủ web ESP8266: Kiểm sốt đầu ra bằng cơng tắc tạm thời
Máy chủ web ESP8266: Kiểm soát đầu ra bằng bộ hẹn giờ
Máy chủ web ESP8266: Kiểm soát đầu ra bằng nút vật lý
Chúng tôi hy vọng bạn thấy hướng dẫn này hữu ích. Nếu bạn có bất kỳ câu hỏi nào, hãy
gửi bình luận bên dưới và chúng tôi sẽ cố gắng liên hệ lại với bạn.
Nếu bạn thích ESP8266, bạn có thể cân nhắc đăng ký vào sách điện tử của chúng tơi
"Tự động hóa gia đình sử dụng ESP8266". Bạn cũng có thể truy cập tài ngun
ESP8266 miễn phí của chúng tơi tại đây.
Cảm ơn bạn đã đọc.
16/16
