Máy chủ web ESP32 với BME680 – Trạm thời tiết (Arduino IDE)

Hướng dẫn này chỉ ra cách xây dựng trạm thời tiết trên máy chủ web với ESP32 để hiển thị các chỉ số cảm biến từ cảm biến môi trường BME680: khí (chất lượng không khí), nhiệt độ, độ ẩm và áp suất. Các bài đọc được cập nhật tự động trên máy chủ web bằng Sự kiện do máy chủ gửi (SSE). ESP32 sẽ được lập trình bằng Arduino IDE.

ESP32 BME680 Cảm biến khí độ ẩm áp suất khí quyển nhiệt độ môi trường xung quanh chất lượng khí không khí Arduino IDE Web Server

Để xây dựng máy chủ web, chúng tôi sẽ sử dụng thư viện Máy chủ Web ESP Async cung cấp một cách dễ dàng để xây dựng một máy chủ web không đồng bộ.

Cảm biến môi trường BME680

BME680 là cảm biến môi trường kết hợp cảm biến khí, nhiệt độ, độ ẩm và áp suất. Cảm biến khí có thể phát hiện nhiều loại khí như các hợp chất hữu cơ dễ bay hơi (VOC). Vì lý do này, BME680 có thể được sử dụng để kiểm soát chất lượng không khí trong nhà.

BME680 Cảm biến khí độ ẩm áp suất khí quyển nhiệt độ môi trường xung quanh chất lượng khí phía trước

BME680 có cảm biến MOX (Metal-oxide) phát hiện VOC trong không khí. Cảm biến này cung cấp cho bạn một ý tưởng định tính về tổng VOCs / chất gây ô nhiễm trong không khí xung quanh. Là một tín hiệu thô, BME680 xuất ra các giá trị điện trở. Các giá trị này thay đổi do sự thay đổi về nồng độ VOC:

Điện trở cảm biến chất lượng không khí môi trường khí BME680 Cách hoạt động

Cao hơn nồng độ VOCs » Thấp hơn Sức cản
Thấp hơn nồng độ VOCs » Cao hơn Sức cản

Để biết thêm thông tin về BME680, hãy đọc hướng dẫn bắt đầu của chúng tôi: ESP32: Cảm biến môi trường BME680 sử dụng Arduino IDE (Khí, Áp suất, Độ ẩm, Nhiệt độ).

Bộ phận bắt buộc

Bảng mạch ESP32 BME680 Sơ đồ đấu dây mạch cảm biến khí

Để hoàn thành hướng dẫn này, bạn cần các phần sau:

Mô-đun cảm biến BME680
ESP32 (đọc Các bảng phát triển ESP32 tốt nhất)
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 Hatinh.tech/shop để tìm tất cả các bộ phận cho các dự án của mình với mức giá tốt nhất!

Sơ đồ – ESP32 với BME680

BME680 có thể giao tiếp bằng giao thức truyền thông I2C hoặc SPI. Trong hướng dẫn này, chúng tôi sẽ sử dụng giao thức truyền thông I2C.

Thực hiện theo sơ đồ tiếp theo để đấu dây BME680 với ESP32 bằng các chân I2C mặc định.

Đề xuất đọc: Tài liệu tham khảo sơ bộ của ESP32 – Bạn nên sử dụng chân GPIO nào?

Chuẩn bị Arduino IDE

Chúng tôi sẽ lập trình bo mạch ESP32 bằng Arduino IDE. Vì vậy, hãy đảm bảo rằng bạn đã cài đặt tiện ích bổ sung ESP32. Làm theo hướng dẫn tiếp theo:

Cài đặt Bảng ESP32 trong Arduino IDE

Bạn cũng cần cài đặt các thư viện sau.

Thư viện Adafruit_BME680
Thư viện Adafruit_Sensor
ESPAsyncWebServer
AsyncTCP

Làm theo hướng dẫn tiếp theo để cài đặt chúng.

Cài đặt thư viện BME680

Để nhận các bài đọc từ mô-đun cảm biến BME680, chúng tôi sẽ sử dụng thư viện Adafruit_BME680. Làm theo các bước tiếp theo để cài đặt thư viện trong IDE Arduino của bạn:

Mở Arduino IDE của bạn và đi tới Phác thảo > Bao gồm Thư viện > Quản lý thư viện. Trình quản lý Thư viện sẽ mở ra.

Tìm kiếm “adafruit bme680 ”Trên hộp Tìm kiếm và cài đặt thư viện.

Cài đặt BM6280 Adafruit Library Manager Arduino IDE Library Manager

Cài đặt Adafruit_Sensor Library

Để sử dụng thư viện BME680, bạn cũng cần cài đặt thư viện Adafruit_Sensor. Làm theo các bước tiếp theo để cài đặt thư viện trong IDE Arduino của bạn:

Đi đến Phác thảo > Bao gồm Thư viện > Quản lý thư viện và gõ “Cảm biến hợp nhất Adafruit”Trong hộp tìm kiếm. Cuộn xuống hết cỡ để tìm thư viện và cài đặt nó.

Cài đặt thư viện trình điều khiển cảm biến hợp nhất Adafruit

Cài đặt thư viện ESPAsyncWebServer

Thư viện ESPAsyncWebServer không có sẵn để cài đặt trong Trình quản lý Thư viện IDE Arduino. Vì vậy, bạn cần phải cài đặt nó theo cách thủ công.

Làm theo các bước tiếp theo để cài đặt thư viện ESPAsyncWebServer:

Nhấp vào đây để tải xuống thư viện ESPAsyncWebServer. Bạn nên có một thư mục .zip trong thư mục Tải xuống của mình
Giải nén thư mục .zip và bạn sẽ nhận được ESPAsyncWebServer-master thư mục
Đổi tên thư mục của bạn từ ~~ESPAsyncWebServer-master~~ đến ESPAsyncWebServer
Di chuyển ESPAsyncWebServer vào thư mục thư viện cài đặt Arduino IDE của bạn

Ngoài ra, trong IDE Arduino của bạn, bạn có thể truy cập Phác thảo > Bao gồm Thư viện > Thêm thư viện .zip và chọn thư viện bạn vừa tải xuống.

Cài đặt Thư viện TCP ESPAsync

Thư viện ESPAsyncWebServer yêu cầu thư viện ESPAsyncTCP hoạt động. Làm theo các bước tiếp theo để cài đặt thư viện đó:

Nhấp vào đây để tải xuống thư viện ESPAsyncTCP. Bạn nên có một thư mục .zip trong thư mục Tải xuống của mình
Giải nén thư mục .zip và bạn sẽ nhận được ESPAsyncTCP-master thư mục
Đổi tên thư mục của bạn từ ~~ESPAsyncTCP-master~~ đến ESPAsyncTCP
Di chuyển ESPAsyncTCP vào thư mục thư viện cài đặt Arduino IDE của bạn
Cuối cùng, mở lại Arduino IDE của bạn

Ngoài ra, trong IDE Arduino của bạn, bạn có thể truy cập Phác thảo > Bao gồm Thư viện > Thêm thư viện .zip và chọn thư viện bạn vừa tải xuống.

Mã máy chủ web ESP32 BME680

Mở Arduino IDE của bạn và sao chép mã sau. Để làm cho nó hoạt động, bạn cần phải chèn thông tin đăng nhập mạng của mình: SSID và mật khẩu.

/*********
  Rui Santos
  Complete project details at https://RandomNerdTutorials.com/esp32-bme680-sensor-arduino/
  
  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files.
  
  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.
*********/

#include <Wire.h>
#include <SPI.h>
#include <Adafruit_Sensor.h>
#include "Adafruit_BME680.h"
#include <WiFi.h>
#include "ESPAsyncWebServer.h"

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

//Uncomment if using SPI
/*#define BME_SCK 18
#define BME_MISO 19
#define BME_MOSI 23
#define BME_CS 5*/

Adafruit_BME680 bme; // I2C
//Adafruit_BME680 bme(BME_CS); // hardware SPI
//Adafruit_BME680 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK);

float temperature;
float humidity;
float pressure;
float gasResistance;

AsyncWebServer server(80);
AsyncEventSource events("/events");

unsigned long lastTime = 0;  
unsigned long timerDelay = 30000;  // send readings timer

void getBME680Readings(){
  // Tell BME680 to begin measurement.
  unsigned long endTime = bme.beginReading();
  if (endTime == 0) {
    Serial.println(F("Failed to begin reading :("));
    return;
  }
  if (!bme.endReading()) {
    Serial.println(F("Failed to complete reading :("));
    return;
  }
  temperature = bme.temperature;
  pressure = bme.pressure / 100.0;
  humidity = bme.humidity;
  gasResistance = bme.gas_resistance / 1000.0;
}

String processor(const String& var){
  getBME680Readings();
  //Serial.println(var);
  if(var == "TEMPERATURE"){
    return String(temperature);
  }
  else if(var == "HUMIDITY"){
    return String(humidity);
  }
  else if(var == "PRESSURE"){
    return String(pressure);
  }
 else if(var == "GAS"){
    return String(gasResistance);
  }
}

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <title>BME680 Web Server</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link rel="icon" href="data:,">
  <style>
    html {font-family: Arial; display: inline-block; text-align: center;}
    p {  font-size: 1.2rem;}
    body {  margin: 0;}
    .topnav { overflow: hidden; background-color: #4B1D3F; color: white; font-size: 1.7rem; }
    .content { padding: 20px; }
    .card { background-color: white; box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5); }
    .cards { max-width: 700px; margin: 0 auto; display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    .reading { font-size: 2.8rem; }
    .card.temperature { color: #0e7c7b; }
    .card.humidity { color: #17bebb; }
    .card.pressure { color: #3fca6b; }
    .card.gas { color: #d62246; }
  </style>
</head>
<body>
  <div class="topnav">
    <h3>BME680 WEB SERVER</h3>
  </div>
  <div class="content">
    <div class="cards">
      <div class="card temperature">
        <h4><i class="fas fa-thermometer-half"></i> TEMPERATURE</h4><p><span class="reading"><span id="temp">%TEMPERATURE%</span> &deg;C</span></p>
      </div>
      <div class="card humidity">
        <h4><i class="fas fa-tint"></i> HUMIDITY</h4><p><span class="reading"><span id="hum">%HUMIDITY%</span> &percnt;</span></p>
      </div>
      <div class="card pressure">
        <h4><i class="fas fa-angle-double-down"></i> PRESSURE</h4><p><span class="reading"><span id="pres">%PRESSURE%</span> hPa</span></p>
      </div>
      <div class="card gas">
        <h4><i class="fas fa-wind"></i> GAS</h4><p><span class="reading"><span id="gas">%GAS%</span> K&ohm;</span></p>
      </div>
    </div>
  </div>
<script>
if (!!window.EventSource) {
 var source = new EventSource('/events');
 
 source.addEventListener('open', function(e) {
  console.log("Events Connected");
 }, false);
 source.addEventListener('error', function(e) {
  if (e.target.readyState != EventSource.OPEN) {
    console.log("Events Disconnected");
  }
 }, false);
 
 source.addEventListener('message', function(e) {
  console.log("message", e.data);
 }, false);
 
 source.addEventListener('temperature', function(e) {
  console.log("temperature", e.data);
  document.getElementById("temp").innerHTML = e.data;
 }, false);
 
 source.addEventListener('humidity', function(e) {
  console.log("humidity", e.data);
  document.getElementById("hum").innerHTML = e.data;
 }, false);
 
 source.addEventListener('pressure', function(e) {
  console.log("pressure", e.data);
  document.getElementById("pres").innerHTML = e.data;
 }, false);
 
 source.addEventListener('gas', function(e) {
  console.log("gas", e.data);
  document.getElementById("gas").innerHTML = e.data;
 }, false);
}
</script>
</body>
</html>)rawliteral";

void setup() {
  Serial.begin(115200);

  // Set the device as a Station and Soft Access Point simultaneously
  WiFi.mode(WIFI_AP_STA);
  
  // Set device as a Wi-Fi Station
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Setting as a Wi-Fi Station..");
  }
  Serial.print("Station IP Address: ");
  Serial.println(WiFi.localIP());
  Serial.println();

  // Init BME680 sensor
  if (!bme.begin()) {
    Serial.println(F("Could not find a valid BME680 sensor, check wiring!"));
    while (1);
  }
  // Set up oversampling and filter initialization
  bme.setTemperatureOversampling(BME680_OS_8X);
  bme.setHumidityOversampling(BME680_OS_2X);
  bme.setPressureOversampling(BME680_OS_4X);
  bme.setIIRFilterSize(BME680_FILTER_SIZE_3);
  bme.setGasHeater(320, 150); // 320*C for 150 ms

  // Handle Web Server
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html, processor);
  });

  // Handle Web Server Events
  events.onConnect([](AsyncEventSourceClient *client){
    if(client->lastId()){
      Serial.printf("Client reconnected! Last message ID that it got is: %un", client->lastId());
    }
    // send event with message "hello!", id current millis
    // and set reconnect delay to 1 second
    client->send("hello!", NULL, millis(), 10000);
  });
  server.addHandler(&events);
  server.begin();
}

void loop() {
  if ((millis() - lastTime) > timerDelay) {
    getBME680Readings();
    Serial.printf("Temperature = %.2f ºC n", temperature);
    Serial.printf("Humidity = %.2f % n", humidity);
    Serial.printf("Pressure = %.2f hPa n", pressure);
    Serial.printf("Gas Resistance = %.2f KOhm n", gasResistance);
    Serial.println();

    // Send Events to the Web Server with the Sensor Readings
    events.send("ping",NULL,millis());
    events.send(String(temperature).c_str(),"temperature",millis());
    events.send(String(humidity).c_str(),"humidity",millis());
    events.send(String(pressure).c_str(),"pressure",millis());
    events.send(String(gasResistance).c_str(),"gas",millis());
    
    lastTime = millis();
  }
}

Chèn thông tin đăng nhập mạng của bạn vào các biến sau và mã sẽ hoạt động ngay lập tức.

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Cách hoạt động của mã

Đọc phần này để tìm hiểu cách mã hoạt động hoặc chuyển sang phần tiếp theo.

Bao gồm các thư viện

Bắt đầu bằng cách bao gồm các thư viện cần thiết. Các Dây điện thư viện cần thiết cho giao thức truyền thông I2C. Chúng tôi cũng bao gồm SPI thư viện nếu bạn muốn sử dụng giao tiếp SPI thay thế.

#include <Wire.h>
#include <SPI.h>

Các Adafruit_Sensor và Adafruit_BME680 thư viện là cần thiết để giao tiếp với cảm biến BME680.

#include <Adafruit_Sensor.h>
#include "Adafruit_BME680.h"

Các Wifi và ESPAsyncWebServer thư viện được sử dụng để tạo máy chủ web.

#include <WiFi.h>
#include "ESPAsyncWebServer.h"

Thông tin đăng nhập mạng

Chèn thông tin đăng nhập mạng của bạn vào các biến sau để ESP32 có thể kết nối với mạng cục bộ của bạn bằng Wi-Fi.

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Giao tiếp I2C

Tạo ra một Adafruit_BME680 đối tượng được gọi là bme trên các chân I2C của ESP32 mặc định.

Adafruit_BME680 bme; // I2C

Nếu bạn muốn sử dụng giao tiếp SPI thay vào đó, bạn cần xác định các chân SPI của ESP32 trên các dòng sau (để bỏ ghi chú, loại bỏ / * và * /):

/*#define BME_SCK 18
#define BME_MISO 19
#define BME_MOSI 23
#define BME_CS 15*/

Và sau đó, tạo một Adafruit_BME680 đối tượng sử dụng các chân đó (để bỏ ghi chú, hãy xóa //).

//Adafruit_BME680 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK);

Khai báo các biến

Các nhiệt độ, độ ẩm, áp lực và gasResistance Các biến float sẽ được sử dụng để giữ các chỉ số cảm biến BME680.

float temperature;
float humidity;
float pressure;
float gasResistance;

Các lần cuối cùng và hẹn giờ các biến sẽ được sử dụng để cập nhật số đọc của cảm biến sau mỗi X số giây. Ví dụ: chúng tôi sẽ nhận được số đọc cảm biến mới sau mỗi 30 giây (30000 mili giây). Bạn có thể thay đổi thời gian trì hoãn đó trong hẹn giờ Biến đổi.

unsigned long lastTime = 0;
unsigned long timerDelay = 30000;

Tạo Máy chủ Web Async trên cổng 80.

AsyncWebServer server(80);

Tạo nguồn sự kiện

Để tự động hiển thị thông tin trên máy chủ web khi có bài đọc mới, chúng tôi sẽ sử dụng Sự kiện do máy chủ gửi (SSE).

Dòng sau tạo nguồn sự kiện mới trên /sự kiện.

AsyncEventSource events("/events");

Sự kiện do máy chủ gửi cho phép một trang web (máy khách) nhận cập nhật từ máy chủ. Chúng tôi sẽ sử dụng điều này để tự động hiển thị các bài đọc mới trên trang máy chủ web khi các bài đọc BME680 mới có sẵn.

Quan trọng: Sự kiện do máy chủ gửi không được hỗ trợ trên Internet Explorer.

Nhận BME680 Đọc

Các getBME680Reading () chức năng nhận các kết quả đo khí, nhiệt độ, độ ẩm và áp suất từ cảm biến BME680 và lưu chúng vào gasResistance, nhiệt độ, độ ẩm và áp lực biến.

void getBME680Readings(){
  // Tell BME680 to begin measurement.
  unsigned long endTime = bme.beginReading();
  if (endTime == 0) {
    Serial.println(F("Failed to begin reading :("));
    return;
  }
  if (!bme.endReading()) {
    Serial.println(F("Failed to complete reading :("));
    return;
  }
  temperature = bme.temperature;
  pressure = bme.pressure / 100.0;
  humidity = bme.humidity;
  gasResistance = bme.gas_resistance / 1000.0;
}

Bộ xử lý

Các bộ xử lý () chức năng thay thế bất kỳ trình giữ chỗ nào trên văn bản HTML được sử dụng để xây dựng trang web với các bài đọc cảm biến hiện tại.

String processor(const String& var){
  getBME680Readings();
  //Serial.println(var);
  if(var == "TEMPERATURE"){
    return String(temperature);
  }
  else if(var == "HUMIDITY"){
    return String(humidity);
  }
  else if(var == "PRESSURE"){
    return String(pressure);
  }
 else if(var == "GAS"){
    return String(gasResistance);
  }
}

Điều này cho phép chúng tôi hiển thị các chỉ số cảm biến hiện tại trên trang web khi bạn truy cập lần đầu tiên. Nếu không, bạn sẽ thấy một khoảng trống cho đến khi có các bài đọc mới (có thể mất một khoảng thời gian tùy thuộc vào thời gian trễ bạn đã xác định trên mã).

Xây dựng trang web

Các index_html biến chứa tất cả HTML, CSS và JavaScript để xây dựng 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 HTML và CSS. Chúng tôi sẽ chỉ xem xét cách xử lý các sự kiện do máy chủ gửi.

Hãy xem nhanh dòng hiển thị nhiệt độ:

<h4><i class="fas fa-thermometer-half"></i> TEMPERATURE</h4><p><span class="reading"><span id="temp">%TEMPERATURE%</span> &deg;C</span></p>

Bạn có thể thấy rằng %NHIỆT ĐỘ% trình giữ chỗ được bao quanh bởi các thẻ. HTML Tôi thuộc tính được sử dụng để chỉ định một id duy nhất cho một phần tử HTML.

Nó được sử dụng để trỏ đến một kiểu cụ thể hoặc nó có thể được JavaScript sử dụng để truy cập và thao tác phần tử với id cụ thể đó. Đó là những gì chúng tôi sẽ làm.

Ví dụ: khi máy chủ web nhận được một sự kiện mới với kết quả đọc nhiệt độ mới nhất, chúng tôi sẽ cập nhật phần tử HTML với id “nhân viên bán thời gian”Với bài đọc mới.

Quá trình tương tự được thực hiện để cập nhật các bài đọc khác.

Xử lý sự kiện

Tạo một cái mới EventSource và chỉ định URL của trang gửi các bản cập nhật. Trong trường hợp của chúng tôi, đó là /sự kiện.

if (!!window.EventSource) {
  var source = new EventSource('/events');

Khi bạn đã khởi tạo nguồn sự kiện, bạn có thể bắt đầu nghe thông báo từ máy chủ với addEventListener ().

Đây là các trình nghe sự kiện mặc định, như được hiển thị ở đây trong tài liệu AsyncWebServer.

source.addEventListener('open', function(e) {
  console.log("Events Connected");
}, false);
source.addEventListener('error', function(e) {
 if (e.target.readyState != EventSource.OPEN) {
   console.log("Events Disconnected");
 }
}, false);

source.addEventListener('message', function(e) {
 console.log("message", e.data);
}, false);

Sau đó, thêm trình nghe sự kiện cho “nhiệt độ”.

source.addEventListener('temperature', function(e) {

Khi có giá trị đọc nhiệt độ mới, ESP32 sẽ gửi một sự kiện (“nhiệt độ”) Cho khách hàng. Các dòng sau xử lý những gì sẽ xảy ra khi trình duyệt nhận được sự kiện đó.

console.log("temperature", e.data);
document.getElementById("temp").innerHTML = e.data;

Về cơ bản, in các bài đọc mới trên bảng điều khiển của trình duyệt và đưa dữ liệu đã nhận vào phần tử có id tương ứng (“nhân viên bán thời gian“) Trên trang web.

Một bộ xử lý tương tự được thực hiện đối với độ ẩm, áp suất và khả năng chống khí.

source.addEventListener('humidity', function(e) {
  console.log("humidity", e.data);
  document.getElementById("hum").innerHTML = e.data;
}, false);
 
source.addEventListener('pressure', function(e) {
  console.log("pressure", e.data);
  document.getElementById("pres").innerHTML = e.data;
}, false);
 
source.addEventListener('gas', function(e) {
  console.log("gas", e.data);
  document.getElementById("gas").innerHTML = e.data;
}, false);

thành lập()

bên trong thành lập(), khởi tạo Serial Monitor.

Serial.begin(115200);

Kết nối ESP32 với mạng cục bộ của bạn và in địa chỉ IP ESP32.

// Set device as a Wi-Fi Station
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.println("Setting as a Wi-Fi Station..");
}
Serial.print("Station IP Address: ");
Serial.println(WiFi.localIP());
Serial.println();

Khởi tạo cảm biến BME680.

// Init BME680 sensor
if (!bme.begin()) {
  Serial.println(F("Could not find a valid BME680 sensor, check wiring!"));
  while (1);
}
// Set up oversampling and filter initialization
bme.setTemperatureOversampling(BME680_OS_8X);
bme.setHumidityOversampling(BME680_OS_2X);
bme.setPressureOversampling(BME680_OS_4X);
bme.setIIRFilterSize(BME680_FILTER_SIZE_3);
bme.setGasHeater(320, 150); // 320*C for 150 ms

Xử lý các yêu cầu

Khi bạn truy cập địa chỉ IP ESP32 trên thư mục gốc / URL, gửi văn bản được lưu trữ trên index_html biến để xây dựng trang web và chuyển bộ xử lý như đối số, để tất cả các trình giữ chỗ được thay thế bằng các số đọc cảm biến mới nhất.

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/html", index_html, processor);
});

Nguồn sự kiện máy chủ

Thiết lập nguồn sự kiện trên máy chủ.

// Handle Web Server Events
events.onConnect([](AsyncEventSourceClient *client){
  if(client->lastId()){
    Serial.printf("Client reconnected! Last message ID that it got is: %un", client->lastId());
  }
  // send event with message "hello!", id current millis
  // and set reconnect delay to 1 second
  client->send("hello!", NULL, millis(), 10000);
});
server.addHandler(&events);

Cuối cùng, khởi động máy chủ.

server.begin();

vòng()

bên trong vòng(), nhận các chỉ số cảm biến mới:

getBME680Readings();

In các bài đọc mới trong Serial Monitor.

Serial.printf("Temperature = %.2f ºC n", temperature);
Serial.printf("Humidity = %.2f % n", humidity);
Serial.printf("Pressure = %.2f hPa n", pressure);
Serial.printf("Gas Resistance = %.2f KOhm n", gasResistance);
Serial.println();

Cuối cùng, gửi các sự kiện đến trình duyệt với các bài đọc cảm biến mới nhất để cập nhật trang web.

// Send Events to the Web Server with the Sensor Readings
events.send("ping",NULL,millis());
events.send(String(temperature).c_str(),"temperature",millis());
events.send(String(humidity).c_str(),"humidity",millis());
events.send(String(pressure).c_str(),"pressure",millis());
events.send(String(gasResistance).c_str(),"gas",millis());

Sơ đồ sau đây tóm tắt cách hoạt động của Sự kiện do máy chủ gửi để cập nhật trang web.

Cập nhật BME680 Web Server Read Reading ESP32 với Arduino IDE bằng cách sử dụng Server Sent Events

Tải lên mã

Bây giờ, hãy tải mã lên ESP32 của bạn. Đảm bảo rằng bạn đã chọn đúng bo mạch và cổng COM.

Sau khi tải lên, mở Serial Monitor với tốc độ truyền là 115200. Nhấn nút ESP32 trên bo mạch RST / EN. Địa chỉ IP của ESP32 phải được in trong màn hình nối tiếp.

Địa chỉ IP ESP32 Màn hình nối tiếp Arduino IDE

Trình diễn

Mở trình duyệt trong mạng cục bộ của bạn và nhập địa chỉ IP ESP32. Bạn sẽ có quyền truy cập vào máy chủ web ESP32 với các bài đọc BME680 mới nhất.

Các bài đọc được cập nhật tự động bằng Sự kiện do máy chủ gửi.

Trình diễn máy chủ web bo mạch NodeMCU ESP32 hoặc ESP8266 với cảm biến khí BME680

Kết thúc

Trong hướng dẫn này, bạn đã học cách xây dựng trạm thời tiết máy chủ web không đồng bộ với ESP32 để hiển thị các chỉ số cảm biến BME680 – khí (chất lượng không khí), nhiệt độ, độ ẩm và áp suất – và cách cập nhật các kết quả đọc tự động trên trang web bằng Máy chủ -Sự kiện.

Chúng tôi có các hướng dẫn về máy chủ web khác mà bạn có thể thích:

ESP32 Máy chủ web DHT11 / DHT22 – Nhiệt độ và độ ẩm sử dụng Arduino IDE
ESP32 Async Máy chủ Web – Kiểm soát đầu ra với Arduino IDE
ESP32 Máy chủ Web với BME280 – Trạm thời tiết nâng cao
ESP32 DS18B20 Cảm biến nhiệt độ với Arduino IDE (Đơn, Nhiều, Máy chủ web)

Chúng tôi hy vọng bạn thấy dự án này thú vị. Tìm hiểu thêm về ESP32 với các tài nguyên của chúng tôi:

Tìm hiểu ESP32 với Arduino IDE (Sách điện tử + Khóa học video)
Lập trình MicroPython với ESP32 và ESP8266
Các dự án và hướng dẫn khác về ESP32…

Cảm ơn vì đã đọc

Search This Blog

7 elements