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.
ESP8266 NodeMCU Async Web Server – Điều khiển đầu với Arduino IDE (ESPAsyncWebServer thư viện) Trong hướng dẫn này, bạn học cách xây dựng máy chủ web không đồng với bo mạch ESP8266 NodeMCU để kiểm sốt đầu Bo mạch lập trình Arduino IDE sử dụng thư viện ESPAsyncWebServer Bạn thích: Máy chủ web khơng đồng ESP32 - Kiểm sốt đầu Arduino IDE (thư viện ESPAsyncWebServer) Máy chủ Web không đồng Để xây dựng máy chủ web, sử dụng thư viện ESPAsyncWebServer cung cấp cách dễ dàng để xây dựng máy chủ web không đồng Xây dựng máy chủ web không đồng có số lợi đề cập trang GitHub thư viện, chẳng hạn như: "Xử lý nhiều kết nối lúc"; "Khi bạn gửi phản hồi, bạn sẵn sàng xử lý kết nối khác máy chủ 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ý mẫu"; Và nhiều Hãy xem tài liệu thư viện trang GitHub 1/16 Các phận cần thiết Trong hướng dẫn này, kiểm soát ba kết đầu Ví dụ, chúng tơi điều khiển đèn LED Vì vậy, bạn cần 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 sử dụng liên kết trước truy cập trực tiếp vào MakerAdvisor.com/tools để tìm tất phần cho dự án với giá tốt nhất! Sơ Trước tiếp tục mã, nối đèn LED với ESP8266 Chúng kết nối đèn LED với GPIO 5, 2, bạn sử dụng GPIO 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 ESP Để xây dựng máy chủ web, bạn cần cài đặt thư viện sau Nhấp vào liên kết bên để tải xuống thư viện ESPAsyncWebServer ESPAsyncTCP Các thư viện khơng có sẵn để cài đặt thơng qua Trình quản lý thư viện Arduino, bạn cần chép tệp thư viện vào thư mục Thư viện cài đặt Arduino Ngoài ra, Arduino IDE, bạn vào Sketch > Include Library > Add zip Library chọn 3/16 thư viện bạn vừa tải xuống Tổng quan dự án Để hiểu rõ mã, xem máy chủ web hoạt động Máy chủ web chứa tiêu đề "Máy chủ web ESP" ba nút (công tắc chuyển đổi) để kiểm soát ba đầu Mỗi nút trượt có nhãn cho biết chân đầu GPIO Bạn dễ dàng xóa / thêm nhiều đầu Khi trượt màu đỏ, điều có nghĩa đầu bật (trạng thái CAO) Nếu bạn chuyển đổi trượt, tắt đầu (thay đổi trạng thái thành THẤP) Khi trượt có màu xám, điều có nghĩa đầu bị tắt (trạng thái THẤP) Nếu bạn chuyển đổi trượt, bật đầu (thay đổi trạng thái thành CAO) Nó hoạt động nào? 4/16 Hãy xem điều xảy bạn chuyển đổi nút Chúng ta xem ví dụ cho GPIO Nó hoạt động tương tự cho nút khác Trong trường hợp đầu tiên, bạn chuyển đổi nút để bật GPIO Khi điều xảy ra, tạo yêu cầu HTTP GET URL /update?output=2&state=1 Dựa URL đó, chúng tơi thay đổi trạng thái GPIO thành (CAO) bật đèn LED Trong ví dụ thứ hai, bạn chuyển đổi nút để tắt GPIO Khi điều xảy ra, thực yêu cầu HTTP GET URL /update?output=2&state=0 Dựa URL đó, chúng tơi thay đổi trạng thái GPIO thành (THẤP) tắt đèn LED Mã cho máy chủ Web không đồng ESP Sao chép mã sau vào Arduino IDE bạn 5/16 /********* Rui Santos Complete project details at https://RandomNerdTutorials.com/esp8266-nodemcuasync-web-server-espasyncwebserver-library/ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software *********/ // Import required libraries #include #include #include // 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( ESP Web Server 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)} ESP Web Server %BUTTONPLACEHOLDER% 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 } )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"; buttons += "Output - GPIO 4"; buttons += "Output - GPIO 2"; 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 /update?output=&state= server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) { String inputMessage1; String inputMessage2; // GET input1 value on /update?output=&state= 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 Trong phần này, giải thích cách mã hoạt động Hãy tiếp tục đọc bạn muốn tìm hiểu thêm chuyển đến phần Trình diễn để xem kết cuối Nhập thư viện Đầu tiên, nhập thư viện cần thiết Bạn cần bao gồm WiFi, ESPAsyncWebserver thư viện ESPAsyncTCP #include #include #include Đặt thông tin đăng nhập mạng bạn 8/16 Chèn thông tin đăng nhập mạng bạn vào biến sau, để ESP8266 kết nối với mạng cục 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 tham số truyền URL (số GPIO trạng thái nó), tạo hai biến, cho đầu cho trạng thái const char* PARAM_INPUT_1 = "output"; const char* PARAM_INPUT_2 = "state"; Hãy nhớ ESP8266 nhận yêu cầu này: /update? đầu = 2& trạng thái = Đối tượng AsyncWebServer Tạo đối tượng AsyncWebServer cổng 80 AsyncWebServer server(80); Xây dựng trang Web Tất văn HTML với kiểu JavaScript lưu trữ biến index_html Bây qua văn HTML xem phần làm Tiêu đề nằm bên thẻ Tiêu đề xác âm nó: tiêu đề tài liệu bạn, hiển thị tiêu đề trình duyệt web bạn Trong trường hợp này, "Máy chủ web ESP" ESP Web Server Thẻ sau làm cho trang web bạn đáp ứng trình duyệt (máy tính xách tay, máy tính bảng điện thoại thơng minh) 9/16 Dòng ngăn yêu cầu biểu tượng yêu thích Trong trường hợp này, chúng tơi khơng có biểu tượng u thích Favicon biểu tượng trang web hiển thị bên cạnh tiêu đề tab trình duyệt web Nếu chúng tơi khơng thêm dịng sau, ESP nhận u cầu cho biểu tượng u thích chúng tơi truy cập máy chủ web Giữa thẻ , thêm số CSS để tạo kiểu cho trang web Chúng không vào chi tiết cách thức hoạt động kiểu CSS 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)} Nội dung HTML Bên thẻ nơ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 "Máy chủ web ESP", bạn thêm văn khác ESP Web Server Sau tiêu đề, có nút Cách nút hiển thị trang web (màu đỏ: GPIO bật; màu xám: GPIO tắt) khác tùy thuộc vào trạng thái GPIO Khi bạn truy cập trang máy chủ web, bạn muốn hiển thị trạng thái GPIO Vì vậy, thay thêm văn HTML để xây dựng nút, chúng tơi thêm trình giữ chỗ %BUTTONPLACEHOLDER% Palceholder sau thay văn HTML thực tế để xây dựng nút với trạng thái phù hợp, trang web tải %BUTTONPLACEHOLDER% JavaScript Sau đó, có số JavaScript chịu trách nhiệm thực yêu cầu HTTP GET bạn chuyển đổi nút chúng tơi giải thích trước 10/16 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(); } Đây dòng đưa yêu cầu: if(element.checked){ xhr.open("GET", "/update?output="+element.id+"&state=1", true); } element.id trả id phần tử HTML Id nút GPIO điều khiển thấy phần tiếp theo: Nút GPIO » element.id = Nút GPIO » element.id = Nút GPIO » element.id = Xử lý Bây giờ, cần tạo hàm processor(), thay trình giữ chỗ văn HTML định nghĩa Khi trang web yêu cầu, kiểm tra xem HTML có chỗ dành sẵn khơng Nếu tìm thấy chỗ dành sẵn %BUTTONPLACEHOLDER%, trả văn HTML để tạo nút String processor(const String& var){ //Serial.println(var); if(var == "BUTTONPLACEHOLDER"){ String buttons = ""; buttons += "Output - GPIO 5"; buttons += "Output - GPIO 4"; buttons += "Output - GPIO 2"; return buttons; } return String(); } Bạn dễ dàng xóa thêm nhiều dòng để tạo thêm nút Chúng ta xem cách nút tạo Chúng tạo biến String gọi nút có chứa văn HTML để xây dựng nút Chúng nối văn HTML với trạng thái đầu để nút bật tắt có màu xám đỏ Trạng thái đầu 11/16 trả hàm outputState() (nó chấp nhận làm đối số GPIO) Xem bên dưới: buttons += "Output - GPIO 2"; \ sử dụng để truyền "" vào bên Chuỗi Hàm outputState() trả "checked" GPIO bật trường trống "" GPIO tắt String outputState(int output){ if(digitalRead(output)){ return "checked"; } else { return ""; } } Vì vậy, văn HTML cho GPIO bật, là: Output - GPIO 2 Hãy chia nhỏ điều thành phần nhỏ để hiểu cách thức hoạt động Trong HTML, cơng tắc bật tắt loại đầu vào Thẻ định trường đầu vào nơi người dùng nhập liệu Cơng tắc bật tắt trường nhập hộp kiểm kiểu Có nhiều loại trường nhập liệu khác Hộp kiểm kiểm tra khơng Khi kiểm tra, bạn có sau: Onchange thuộc tính event xảy thay đổi giá trị phần tử (hộp kiểm) Bất bạn chọn bỏ chọn cơng tắc bật tắt, gọi hàm JavaScript toggleCheckbox() cho id phần tử cụ thể (điều này) Id định id cho phần tử HTML Id cho phép thao tác với phần tử JavaScript CSS 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 hàm pinMode() đặt chúng thành LOW ESP8266 khởi động lần Nếu bạn thêm nhiều GPIO hơn, thực 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ạn in địa 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ý xảy ESP8266 nhận yêu cầu Như thấy trước đây, bạn nhận yêu cầu thuộc loại này: /update?output=&state= Vì vậy, chúng tơi kiểm tra xem yêu cầu có chứa giá trị biến PARAM_INPUT1 (output) PARAM_INPUT2 (state) hay không lưu giá trị tương ứng biến input1Message 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 đó, điều khiển GPIO tương ứng với trạng thái tương ứng (biến inputMessage1 lưu số GPIO inputMessage2 lưu trạng thái – 1) digitalWrite(inputMessage1.toInt(), inputMessage2.toInt()); Dưới 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 /update?output=&state= 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 tải mã lên ESP8266 bạn, mở Màn hình nối tiếp với tốc độ truyền 115200 Nhấn nút RST/EN bo mạch Bạn nhận địa IP Mở trình duyệt nhập địa IP ESP Bạn có quyền truy cập vào trang web tương tự 14/16 Nhấn nút bật tắt để điều khiển GPIO ESP Đồng thời, bạn nhận thông báo sau Serial Monitor để giúp bạn gỡ lỗi mã Bạn truy cập máy chủ web từ trình duyệt điện thoại thơng minh Bất bạn mở máy chủ web, hiển thị trạng thái GPIO Màu đỏ cho biết GPIO bật màu xám cho biết GPIO tắt 15/16 Tổng kết Trong hướng dẫn này, bạn học cách tạo máy chủ web không đồng với ESP8266 NodeMCU để kiểm soát đầu cách sử dụng cơng tắc bật tắt Bất bạn mở trang web, hiển thị trạng thái GPIO cập nhật Chúng tơi có ví dụ máy chủ web khác sử dụng thư viện ESPAsyncWebServer mà bạn thích: Máy chủ web ESP8266: Kiểm sốt đầu cơng tắc tạm thời Máy chủ web ESP8266: Kiểm soát đầu hẹn Máy chủ web ESP8266: Kiểm soát đầu nút vật lý Chúng hy vọng bạn thấy hướng dẫn hữu ích Nếu bạn có câu hỏi nào, gửi bình luận bên cố gắng liên hệ lại với bạn Nếu bạn thích ESP8266, bạn cân nhắc đăng ký vào sách điện tử "Tự động hóa gia đình sử dụng ESP8266" Bạn truy cập tài ngun ESP8266 miễn phí Cảm ơn bạn đọc 16/16