ESP8266 Máy chủ Web
Hướng dẫn này chỉ cho bạn cách lập trình để biến một bo mạch ESP8266 thành một máy chủ web. Bạn sẽ có thể truy cập các trang web được lưu trữ trên ESP8266 bằng trình duyệt web trên máy tính hoặc điện thoại thông minh của mình, cho phép bạn xem dữ liệu từ ESP8266 và điều khiển nó. Để làm cho dễ hiểu, chúng ta sẽ tiến hành từ các bước đơn giản đến các bước khó khăn hơn như sau:
- Máy chủ web ESP8266 - Hiển thị văn bản đơn giản trên trang web.
- Máy chủ web ESP8266 - Giám sát các giá trị cảm biến từ ESP8266 thông qua một trang web.
- Máy chủ web ESP8266 - Điều khiển ESP8266 thông qua một trang web.
- Máy chủ web ESP8266 - Tách nội dung HTML (HTML, CSS và JavaScript) khỏi mã ESP8266 và đưa vào các tệp khác trên Arduino IDE.
- Máy chủ web ESP8266 - Tạo nhiều trang như index.html, temperature.html, led.html, error_404.html, và error_405.html..., và nhiều trang khác.
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 | × | (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) |
Đọc giá trị cảm biến từ ESP8266 qua Web
Điều này tương đối đơn giản. Mã ESP8266 thực hiện các tác vụ sau:
- Tạo một máy chủ web lắng nghe các yêu cầu HTTP từ trình duyệt web.
- Khi nhận được yêu cầu từ trình duyệt web, ESP8266 phản hồi bằng nội dung HTML chứa giá trị được đọc từ cảm biến.
Dưới đây là mã ESP8266 thực hiện các nhiệm vụ ở trên:
/*
* 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-web-server
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 80
void setup() {
Serial.begin(9600);
// 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());
// Define a route to serve the HTML page
server.on("/", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:"); // for debugging
Serial.println("GET /"); // for debugging
server.send(200, "text/html", "<html><body><h1>Hello, ESP8266!</h1></body></html>");
});
// 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:
- Xem bài 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.
- Kết nối các linh kiện như được cho trong sơ đồ.
- Kết nối bảng ESP8266 với máy tính của bạn bằng dây USB.
- Mở Arduino IDE trên máy tính của bạn.
- Chọn board ESP8266 đúng, ví dụ NodeMCU 1.0 (Mô-đun ESP-12E), 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 Wi‑Fi (SSID và mật khẩu) trong mã cho mạng 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
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address: 192.168.0.5
Autoscroll
Clear output
9600 baud
Newline
- Ghi chú địa chỉ IP được hiển thị và nhập địa chỉ này vào thanh địa chỉ của trình duyệt web trên điện thoại thông minh hoặc PC của bạn.
- Do đó, bạn sẽ thấy đầu ra như sau trên Serial Monitor.
COM6
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address: 192.168.0.5
ESP8266 Web Server: New request received:
GET /
Autoscroll
Clear output
9600 baud
Newline
- Khi bạn truy cập trình duyệt web bằng địa chỉ IP, bạn sẽ thấy một trang web rất cơ bản hiển thị "Hello, ESP8266!". Trang sẽ trông như sau:
Đọc giá trị cảm biến từ ESP8266 thông qua Web
Dưới đây là mã ESP8266 in ra giá trị nhiệt độ lên trang web:
/*
* 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-web-server
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 80
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void setup() {
Serial.begin(9600);
// 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());
// Define a route to serve the HTML page
server.on("/", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:"); // for debugging
Serial.println("GET /"); // for debugging
// get temperature from sensor
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
String html = "<!DOCTYPE HTML>";
html += "<html>";
html += "<head>";
html += "<link rel=\"icon\" href=\"data:,\">";
html += "</head>";
html += "<p>";
html += "Temperature: <span style=\"color: red;\">";
html += temperature;
html += "°C</span>";
html += "</p>";
html += "</html>";
server.send(200, "text/html", html);
});
// Start the server
server.begin();
}
void loop() {
// Handle client requests
server.handleClient();
// Your code here
}
Hướng dẫn từng bước
- 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 mạng wifi của bạn
- Tải mã lên ESP8266
- Khi bạn truy cập trình duyệt web bằng địa chỉ IP, bạn sẽ thấy một trang web rất cơ bản hiển thị thông tin về bo mạch ESP8266. Trang sẽ trông như sau:
Để làm cho trang web trông thật tuyệt với giao diện người dùng đồ họa (GUI), hãy xem phần cuối cùng của bài hướng dẫn này.
※ Lưu ý:
Với mã được cung cấp ở trên, để nhận được cập nhật nhiệt độ, bạn phải tải lại trang trên trình duyệt web. Trong phần tiếp theo, chúng ta sẽ học cách làm cho trang web cập nhật giá trị nhiệt độ ở chế độ nền mà không tải lại trang web.
Điều khiển ESP8266 thông qua Web
Việc điều khiển một thiết bị được kết nối với ESP8266 khó hơn nhiều so với chỉ đọc một giá trị. Đó là bởi ESP8266 phải hiểu yêu cầu nó nhận được từ trình duyệt web để biết nên thực hiện hành động nào.
Để có một ví dụ toàn diện và chi tiết hơn, tôi khuyên bạn nên tham khảo các bài hướng dẫn được liệt kê dưới đây:
Chia nội dung HTML ra một tập tin khác trong Arduino IDE
Nếu bạn muốn tạo một trang web đơn giản với nội dung tối thiểu, bạn có thể nhúng HTML trực tiếp vào mã ESP8266, như đã giải thích ở trên.
Tuy nhiên, nếu bạn muốn tạo một trang web tinh vi và ấn tượng hơn với nội dung lớn hơn, việc nhúng toàn bộ HTML, CSS và JavaScript trực tiếp vào mã ESP8266 sẽ trở nên bất tiện. Trong trường hợp này, bạn có thể sử dụng một phương pháp khác để quản lý mã nguồn:
- Mã ESP8266 sẽ được đặt trong một tệp .ino, giống như trước đây.
- Mã HTML (HTML, CSS, Javascript) sẽ được đặt trong một tệp riêng biệt .h. Điều này cho phép bạn giữ nội dung trang web tách biệt với mã ESP8266, giúp quản lý và chỉnh sửa dễ dàng hơn.
Để làm được điều đó, chúng ta cần thực hiện hai bước chính:
- Chuẩn bị nội dung HTML
- Lập trình ESP8266
Chuẩn bị nội dung HTML
- Tạo một tệp HTML trên máy tính cá nhân của bạn chứa nội dung HTML (HTML, CSS và Javascript) cho thiết kế giao diện người dùng của bạn.
- Trong tệp HTML, tại vị trí dữ liệu từ ESP8266 sẽ được hiển thị, hãy sử dụng một giá trị tùy ý.
- Hãy thử nghiệm và chỉnh sửa cho đến khi bạn hài lòng.
- Chúng ta sẽ đưa nội dung HTML vào tệp .h trên Arduino IDE. Xem bước tiếp theo.
Lập trình ESP8266
- Mở Arduino IDE và tạo một sketch mới. Đặt cho nó một tên, ví dụ, newbiely.com.ino.
- Sao chép mã được cung cấp ở dưới đây và dán nó vào tệp đã tạo.
/*
* 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-web-server
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "index.h" // Include the index.h file
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 80
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void setup() {
Serial.begin(9600);
// 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());
// Serve the HTML page from the file
server.on("/", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:"); // for debugging
Serial.println("GET /"); // for debugging
server.send(200, "text/html", webpage);
});
// Define a route to get the temperature data
server.on("/temperature", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:"); // for debugging
Serial.println("GET /temperature"); // for debugging
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
server.send(200, "text/plain", temperatureStr);
});
// 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 thành của bạn
- Tạo tập tin index.h trên Arduino IDE bằng cách:
- Nhấp vào nút ngay bên dưới biểu tượng Serial Monitor và chọn Tab mới, hoặc dùng phím Ctrl+Shift+N.
- Đặt tên cho tệp index.h và nhấp vào nút Đồng ý
- Sao chép mã dưới đây và dá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-web-server
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
REPLACE_YOUR_HTML_CONTENT_HERE
)=====";
#endif
- Thay dòng REPLACE_YOUR_HTML_CONTENT_HERE bằng nội dung HTML mà bạn đã chuẩn bị trước đó. Không có vấn đề gì với ký tự xuống dòng. Dưới đây là một ví dụ về tệp 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-web-server
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP8266 Temperature</title>
</head>
<body>
<h1>ESP8266 Temperature</h1>
<p>Temperature: <span style="color: red;"><span id="temperature">Loading...</span> ℃</span></p>
<script>
function fetchTemperature() {
fetch("/temperature")
.then(response => response.text())
.then(data => {
document.getElementById("temperature").textContent = data;
});
}
fetchTemperature();
setInterval(fetchTemperature, 4000); // Update temperature every 4 seconds
</script>
</body>
</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 Upload nút 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 như trước. Bạn sẽ thấy nó như dưới đây:
※ Lưu ý:
Trong các mã ở trên:
- Mã HTML được thiết kế để cập nhật nhiệt độ ở chế độ nền theo chu kỳ cố định, hiện tại được đặt là mỗi 4 giây trong mã. Điều này có nghĩa là giá trị nhiệt độ được làm mới tự động mà bạn không cần tải lại trang web bằng tay. Bạn có thể điều chỉnh chu kỳ cập nhật trong mã để phù hợp với sở thích của mình.
- Mã ESP8266 phục vụ hai yêu cầu từ trình duyệt web.
- Một yêu cầu để trả về nội dung HTML của trang web
- Yêu cầu còn lại là trả về giá trị nhiệt độ được trang web yêu cầu ở chế độ nền
Để có hình minh họa toàn diện và chi tiết hơn, vui lòng tham khảo bài hướng dẫn ESP8266 - Nhiệt độ qua Web.
※ Lưu ý:
- Nếu bạn thực hiện các thay đổi đối với nội dung HTML trong tệp index.h nhưng không sửa đổi bất kỳ điều gì trong tệp newbiely.com.ino, IDE Arduino sẽ không làm mới hoặc cập nhật nội dung HTML khi bạn biên dịch và tải mã lên ESP8266.
- Để buộc IDE Arduino cập nhật nội dung HTML trong trường hợp này, bạn cần thực hiện một sự chỉnh sửa trong tệp newbiely.com.ino. Ví dụ, bạn có thể thêm một dòng trống hoặc chèn một nhận xét. Hành động này kích hoạt IDE nhận ra rằng đã có sự thay đổi trong dự án, đảm bảo nội dung HTML được cập nhật của bạn được đưa vào lần tải lên.
Máy chủ Web ESP8266 - Nhiều trang
Hãy xem qua hướng dẫn này ESP8266 - Máy chủ web nhiều trang.