Đang tải... (xem toàn văn)
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
Xây dựng máy chủ web ESP8266 - Mã sơ đồ (NodeMCU) Hướng dẫn hướng dẫn 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 (hai đèn LED) Máy chủ web ESP8266 NodeMCU đáp ứng di động truy cập thiết bị có trình duyệt mạng cục bạn Nếu bạn muốn tìm hiểu thêm mơ-đun ESP8266, trước tiên đọc Hướng dẫn bắt đầu cho Mô-đun WiFi ESP8266 Hướng dẫn bao gồm hai phương pháp khác để xây dựng máy chủ web: Phần 1: Tạo máy chủ web Arduino IDE Phần 2: Tạo máy chủ web phần mềm NodeMCU PHẦN 1: TẠO MÁY CHỦ WEB BẰNG ARDUINO IDE Phần cho bạn cách tạo máy chủ web để kiểm sốt hai đầu Arduino IDE Bạn sử dụng phương pháp để tạo máy chủ web khác để đáp ứng nhu cầu Hướng dẫn có sẵn định dạng video (xem bên dưới) định dạng văn (tiếp tục đọc trang này) Chuẩn bị Arduino IDE 1/24 Tải xuống cài đặt Arduino IDE hệ điều hành bạn (một số phiên cũ khơng hoạt động) Sau đó, bạn cần cài đặt tiện ích bổ sung ESP8266 cho Arduino IDE Đối với điều đó, tới Tùy chọn > tệp Nhập http://arduino.esp8266.com/stable/package_esp8266com_index.json vào trường "URL bổ sung người quản lý bảng" thể hình bên Sau đó, nhấp vào nút "OK" Đi tới Cơng cụ > Hội đồng quản trị > Quản lý bảng 2/24 Cuộn xuống, chọn menu bảng ESP8266 cài đặt "e sp8266 by ESP8266 Community", thể hình bên Đi tới Bảng cơng cụ > chọn bảng ESP8266 bạn Sau đó, mở lại Arduino IDE bạn Mã Sao chép mã sau vào Arduino IDE bạn, chưa tải lên Bạn cần thực số thay đổi để làm cho hoạt động cho bạn 3/24 /********* Rui Santos Complete project details at https://randomnerdtutorials.com *********/ // Load Wi-Fi library #include // 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; void setup() { Serial.begin(115200); // Initialize the output variables as outputs pinMode(output5, OUTPUT); pinMode(output4, OUTPUT); // Set outputs to LOW digitalWrite(output5, LOW); digitalWrite(output4, LOW); // Connect to Wi-Fi network with SSID and password Serial.print("Connecting to "); Serial.println(ssid); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } // Print local IP address and start web server Serial.println(""); Serial.println("WiFi connected."); Serial.println("IP address: "); Serial.println(WiFi.localIP()); server.begin(); 4/24 } 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 currentTime = millis(); previousTime = currentTime; while (client.connected() && currentTime - previousTime = 0) { Serial.println("GPIO on"); output5State = "on"; digitalWrite(output5, HIGH); } else if (header.indexOf("GET /5/off") >= 0) { Serial.println("GPIO off"); output5State = "off"; digitalWrite(output5, LOW); } else if (header.indexOf("GET /4/on") >= 0) { Serial.println("GPIO on"); output4State = "on"; digitalWrite(output4, HIGH); } else if (header.indexOf("GET /4/off") >= 0) { Serial.println("GPIO off"); output4State = "off"; digitalWrite(output4, LOW); } // Display the HTML web page client.println(""); client.println(""); client.println(""); // CSS to style the on/off buttons // Feel free to change the background-color and font-size attributes to fit your preferences client.println("html { font-family: Helvetica; display: inlineblock; 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;} "); // Web Page Heading client.println("ESP8266 Web Server"); // Display current state, and ON/OFF buttons for GPIO client.println("GPIO - State " + output5State + "
"); // If the output5State is off, it displays the ON button if (output5State=="off") { client.println("ON
"); } else { client.println("OFF
"); } // Display current state, and ON/OFF buttons for GPIO client.println("GPIO - State " + output4State + "
"); // If the output4State is off, it displays the ON button if (output4State=="off") { client.println("ON
"); } else { client.println("OFF
"); } client.println(""); // The HTTP response ends with another blank line client.println(); // Break out of the while loop break; } else { // if you got a newline, then clear currentLine currentLine = ""; } } else if (c != '\r') { // if you got anything else but a carriage return character, currentLine += c; // add it to the end of the currentLine } } } // Clear the header variable header = ""; // Close the connection 6/24 client.stop(); Serial.println("Client disconnected."); Serial.println(""); } } Xem mã thô Bạn cần sửa đổi hai biến sau thông tin đăng nhập mạng để ESP8266 thiết lập kết nối với định tuyến bạn // Replace with your network credentials const char* ssid = ""; const char* password = ""; Tải lên phác thảo Tải phác thảo lên ESP-12E Nếu bạn sử dụng ESP-12E NodeMCU Kit, việc tải lên phác thảo đơn giản, có lập trình viên tích hợp Cắm bảng bạn vào máy tính bạn Đảm bảo bạn chọn bo mạch cổng COM Sau đó, nhấp vào nút Tải lên Arduino IDE đợi vài giây bạn thấy thông báo "Đã tải lên xong." góc bên trái Tải phác thảo lên ESP-01 7/24 Tải mã lên ESP-01 yêu cầu thiết lập giao tiếp nối tiếp ESP8266 bạn Lập trình viên FTDI thể sơ đồ bên Lưu ý: cách khác, bạn sử dụng Bộ điều hợp nối tiếp ESP8266-01, dễ sử dụng bị lỗi Bảng sau cho thấy kết nối bạn cần thực ESP8266 lập trình viên FTDI ESP8266 Lập trình viên FTDI RX TX TX RX CH_PD 3.3V GPIO GND VCC 3.3V GND GND Nếu bạn có Lập trình viên FTDI hồn tồn mới, bạn cần cài đặt trình điều khiển FTDI PC Windows Truy cập trang web để biết trình điều khiển thức (Nếu cổng COM chuyển sang màu xám Arduino IDE bạn, bạn chưa cài đặt trình điều khiển) Sau đó, bạn cần kết nối lập trình viên FTDI với máy tính tải mã lên ESP8266 Sơ đồ Để xây dựng mạch cho hướng dẫn này, bạn cần phần sau: Các phận cần thiết: ESP8266 12-E - đọc Bảng phát triển Wi-Fi ESP8266 tốt 2x đèn LED 8/24 2x điện trở (220 330 ohms hoạt động tốt) Breadboard Dây nhảy Nếu bạn sử dụng ESP-01, bạn cần lập trình viên FTDI Bộ điều hợp nối tiếp Kết nối hai đèn LED với ESP8266 bạn thể sơ đồ sau - với đèn LED kết nối với GPIO (D2) đèn LED khác với GPIO (D1) Nếu bạn sử dụng ESP-01 Nếu bạn sử dụng ESP8266-01, sử dụng sơ đồ sau làm tham chiếu, bạn cần thay đổi gán GPIO mã (thành GPIO GPIO 0) 9/24 Kiểm tra máy chủ web Bây giờ, bạn tải lên mã hoạt động Đừng quên kiểm tra xem bạn chọn bo mạch cổng COM chưa, không bạn gặp lỗi 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 IP ESP Nhấn nút ESP8266 RESET xuất địa IP ESP Màn hình nối tiếp 10/24 Sao chép địa IP đó, bạn cần để truy cập máy chủ web Truy cập Máy chủ Web Mở trình duyệt bạn, nhập địa IP ESP bạn thấy trang sau Trang gửi ESP8266 bạn thực yêu cầu địa IP ESP Nếu nhìn vào hình nối tiếp, bạn thấy diễn ESP nhận yêu cầu HTTP từ máy khách – trường hợp trình duyệt bạn 11/24 Bạn xem thơng tin khác u cầu HTTP – trường gọi trường tiêu đề HTTP chúng xác định tham số hoạt động 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 ESP nhận yêu cầu URL /5/on BẬT đèn LED 12/24 Trạng thái LED cập nhật trang web Kiểm tra nút GPIO kiểm tra xem có hoạt động theo cách tương tự không Mã hoạt động Bây giờ, xem xét kỹ mã để xem hoạt động nào, để bạn sửa đổi để đáp ứng nhu cầu Điều bạn cần làm bao gồm thư viện ESP8266WiFi // Load Wi-Fi library #include Như đề cập trước đây, bạn cần chèn ssid mật vào dịng sau bên dấu ngoặc kép const char* ssid = ""; const char* password = ""; Sau đó, bạn đặt máy chủ web thành cổng 80 // Set web server port number to 80 WiFiServer server(80); Dòng sau tạo biến để lưu trữ tiêu đề yêu cầu HTTP: String header; 13/24 Tiếp theo, bạn tạo biến phụ trợ để lưu trữ trạng thái đầu bạn Nếu bạn muốn thêm nhiều đầu lưu trạng thái nó, bạn cần tạo nhiều biến // Auxiliar variables to store the current output state String output5State = "off"; String output4State = "off"; Bạn cần gán GPIO cho kết đầu Ở chúng tơi sử dụng GPIO GPIO Bạn sử dụng GPIO phù hợp khác // Assign output variables to GPIO pins const int output5 = 5; const int output4 = 4; Thiết lập() Bây giờ, vào setup() Hàm setup() chạy lần ESP bạn khởi động lần Đầu tiên, 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 xác định GPIO OUTPUT đặt chúng thành THẤP // Initialize the output variables as outputs pinMode(output5, OUTPUT); pinMode(output4, OUTPUT); // Set outputs to LOW digitalWrite(output5, LOW); digitalWrite(output4, LOW); 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 in địa IP ESP Màn hình nối tiếp // Connect to Wi-Fi network with SSID and password Serial.print("Connecting to "); Serial.println(ssid); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } // Print local IP address and start web server Serial.println(""); Serial.println("WiFi connected."); Serial.println("IP address: "); Serial.println(WiFi.localIP()); server.begin(); vòng lặp() Trong loop(), lập trình xảy máy khách thiết lập kết nối với máy chủ web 14/24 ESP ln lắng nghe khách hàng với dịng này: WiFiClient client = server.available(); // Listen for incoming clients Khi nhận yêu cầu từ máy khách, lưu liệu đến Vòng lặp while theo sau chạy miễn máy khách kết nối Chúng không khuyên bạn nên thay đổi phần sau mã trừ bạn biết xác bạn 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 câu lệnh if else kiểm tra nút nhấn trang web bạn kiểm soát kết đầu cho phù hợp Như thấy trước đây, đưa yêu cầu URL khác tùy thuộc vào nút nhấn // turns the GPIOs on and off if (header.indexOf("GET /5/on") >= 0) { Serial.println("GPIO on"); output5State = "on"; digitalWrite(output5, HIGH); } else if (header.indexOf("GET /5/off") >= 0) { Serial.println("GPIO off"); output5State = "off"; digitalWrite(output5, LOW); } else if (header.indexOf("GET /4/on") >= 0) { Serial.println("GPIO on"); output4State = "on"; digitalWrite(output4, HIGH); } else if (header.indexOf("GET /4/off") >= 0) { Serial.println("GPIO off"); output4State = "off"; digitalWrite(output4, LOW); } Ví dụ: bạn nhấn nút GPIO ON , URL thay đổi thành địa IP ESP theo sau /5/ON nhận thơng tin tiêu đề HTTP Vì vậy, kiểm tra xem tiêu đề có chứa biểu thức GET / / on hay không 15/24 Nếu chứa, mã in thơng báo hình nối tiếp, thay đổi biến output5State thành bật bật đèn LED Điều hoạt động tương tự cho nút khác Vì vậy, bạn muốn thêm nhiều kết đầu hơn, bạn nên sửa đổi phần mã để bao gồm chúng Hiển thị trang web HTML Điều bạn cần làm tạo trang web ESP8266 gửi phản hồi đến trình duyệt bạn với số văn HTML để hiển thị trang web Trang web gửi đến máy khách hàm client.println() Bạn nên nhập bạn muốn gửi cho khách hàng dạng đối số Văn bạn phải ln gửi dịng sau, cho biết gửi HTML Sau đó, dịng sau làm cho trang web đáp ứng trình duyệt web client.println(""); Cái sử dụng để ngăn 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 dịng client.println(""); Tạo kiểu cho Trang Web Tiếp theo, có số CSS để tạo kiểu cho nút giao diện trang web Chúng chọn phông chữ Helvetica, xác định nội dung hiển thị dạng khối chỉnh trung tâm client.println("html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}"); Chúng tơi tạo kiểu cho nút với 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 thuộc tính nút mà chúng tơi xác định trước đó, với màu khác Đây phong cách cho nút tắt client.println(".button2 {background-color: #77878A;}"); Đặt đầu đề trang Web 16/24 Trong dòng bạn đặt tiêu đề trang web, bạn thay đổi văn thành điều bạn thích // Web Page Title client.println("ESP8266 Web Server"); Hiển thị nút trạng thái tương ứng Sau đó, bạn viết đoạn văn để hiển thị trạng thái GPIO Như bạn thấy, sử dụng biến output5State, để trạng thái cập nhật biến thay đổi client.println("GPIO - State " + output5State + "
"); Sau đó, chúng tơi hiển thị nút bật tắt, tùy thuộc vào trạng thái GPIO if (output5State=="off") { client.println("ON
"); } else { client.println("OFF
"); } Chúng tơi sử dụng quy trình tương tự cho GPIO Đóng kết nối Cuối cùng, phản hồi kết thúc, xóa biến header dừng kết nối với client client.stop() // Clear the header variable header = ""; // Close the connection client.stop(); Đưa xa Bây bạn biết mã hoạt động nào, bạn sửa đổi mã để thêm nhiều đầu sửa đổi trang web Để sửa đổi trang web bạn, bạn cần biết số HTML CSS Thay điều khiển hai đèn LED, bạn control rơle để điều khiển thực tế thiết bị điện tử Để xây dựng máy chủ web để hiển thị đọc cảm biến, bạn đọc hướng dẫn sau: ESP8266 Máy chủ Web Nhiệt độ Độ ẩm DHT (ARDUINO IDE) Máy chủ web nhiệt độ ESP8266 DS18B20 (Arduino IDE) 17/24 Ngồi ra, bạn muốn lập trình ESP8266 MicroPython, bạn đọc hướng dẫn này: ESP32 / ESP8266 Máy chủ web MicroPython - Kiểm sốt đầu Nếu bạn thích ESP8266, chắn bạn xem khóa học chúng tơi 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 cho bạn cách tạo máy chủ web để kiểm soát hai đầu phần sụn NodeMCU ngôn ngữ lập trình LUA Bạn sử dụng phương pháp để tạo máy chủ web khác để đáp ứng nhu cầu Đầu tiên, xem video minh họa Tại phải flash mô-đun ESP8266 bạn với NodeMCU? NodeMCU phần sụn cho phép bạn lập trình mơ-đun ESP8266 với tập lệnh LUA Lập trình ESP8266 với LUA phần sụn NodeMCU giống với cách bạn lập trình Arduino Chỉ với vài dịng mã, bạn thiết lập kết nối WiFi, điều khiển GPIO ESP8266, biến ESP8266 bạn thành máy chủ web Tải xuống NodeMCU Flasher cho Windows Sau đấu dây mạch bạn, bạn phải tải xuống đèn flash NodeMCU Đó tệp exe mà bạn tải xuống liên kết sau: Win32 Windows Flasher 18/24 Win64 Windows Flasher Bạn nhấp vào để tìm tất thơng tin đèn flash NodeMCU Nhấp nháy ESP8266 bạn Nếu bạn sử dụng ESP8266-12, bạn cần cắm ESP vào máy tính Nếu bạn sử dụng ESP-01, bạn cần lập trình viên FTDI để kết nối với máy tính bạn Để thiết lập giao tiếp nối tiếp ESP8266 bạn Lập trình viên FTDI thể sơ đồ bên Mở đèn flash mà bạn vừa tải xuống cửa sổ xuất (như hình sau) Nhấn nút "Flash" bắt đầu q trình nhấp nháy (Bạn phải thay đổi số cài đặt tab Nâng cao) Sau kết thúc trình này, xuất vịng trịn màu xanh với biểu tượng kiểm tra Sơ đồ Để xây dựng mạch bạn cần phần sau: 19/24 Các phận cần thiết: ESP8266 12-E - đọc Bảng phát triển Wi-Fi ESP8266 tốt 2x đèn LED 2x điện trở (220 330 ohms hoạt động tốt) Breadboard Dây nhảy Nếu bạn sử dụng ESP-01, bạn cần lập trình viên FTDI Nếu bạn sử dụng ESP-01 Nếu bạn sử dụng ESP8266-01, sử dụng sơ đồ sau làm tài liệu tham khảo 20/24