ESP32 DHT11 / DHT22 Web服务器–使用Arduino IDE的温度和湿度
在本项目中，您将学习如何使用DHT11或DHT22来构建异步ESP32 Web服务器，该服务器使用Arduino IDE显示温度和湿度。
我们将构建的网络服务器无需刷新网页即可自动更新读数。
通过这个项目，您将学到：
· 如何从DHT传感器读取温度和湿度；
· 使用ESPAsyncWebServer库构建异步Web服务器;
· 自动更新传感器读数，而无需刷新网页。
异步Web服务器
为了构建Web服务器，我们将使用ESPAsyncWebServer库，该提供了一种构建异步Web服务器的简便方法。如库GitHub页面中所述，构建异步Web服务器具有多个优点，例如：
· "同时处理多个连接"；
· "当您发送响应时，当服务器负责在后台发送响应时，您将立即准备处理其他连接"；
· "用于处理模板的简单模板处理引擎"；
· 以及更多。
所需部件
要完成本教程，您需要以下部分：
原理图
进入Web服务器之前，您需要按照以下示意图所示将DHT11或DHT22传感器连接到ESP32。
在这种情况下，我们将数据引脚连接到GPIO 27，但是您可以将其连接到任何其他数字引脚。您可以将此示意图用于DHT11和DHT22传感器。
（此原理图使用带有36个GPIO的ESP32 DEVKIT V1模块版本–如果您使用的是其他型号，请检查所用电路板的引脚排列。）
注意：如果您使用的模块带有DHT传感器，则通常只有三个引脚。引脚上应标有标签，以便您知道如何进行接线。此外，这些模块中的许多模块已经带有内部上拉电阻，因此您无需在电路中增加一个。
安装库
您需要为此项目安装几个库：
· DHT和Adafruit的统一传感器驱动器库读取DHT传感器数据。
· ESPAsyncWebServer和Async TCP库可构建异步Web服务器。
按照以下说明安装这些库：
安装DHT传感器库
要使用Arduino IDE读取DHT传感器，您需要安装DHT传感器库 。请按照以下步骤安装库。
1. 下载DHT-sensor-library-master .zip文件
2. 解压缩.zip文件夹，您应该获得 DHT-sensor-library-master 文件夹
3. 重命名您的文件夹 到DHT_sensor
4. 将DHT_sensor 文件夹移至Arduino IDE安装库文件夹
5. 最后，重新打开您的Arduino IDE
安装Adafruit统一传感器驱动程序
您还需要安装Adafruit统一传感器驱动程序库才能使用DHT传感器。请按照以下步骤安装库。
1. 下载 Adafruit_sensor-master.zip文件
2. 解压缩.zip文件夹，您应该获得 Adafruit_sensor-master 文件夹
3. 重命名您的文件夹 到 Adafruit_sensor
4. 将Adafruit_sensor文件夹移至Arduino IDE安装库文件夹
5. 最后，重新打开您的Arduino IDE
安装ESPAsyncWebServer库
请按照以下步骤安装 ESPAsyncWebServer库：
1. 下载ESPAsyncWebServer-master.zip文件
2. 解压缩.zip文件夹，您应该得到ESPAsyncWebServer-master文件夹
3. 重命名您的文件夹 到ESPAsyncWebServer
4. 将ESPAsyncWebServer 文件夹移至Arduino IDE安装库文件夹
为ESP32安装异步TCP库
该 ESPAsyncWebServer库需要 AsyncTCP库才能工作。请按照以下步骤安装该库：
1. 下载AsyncTCP-master.zip文件
2. 解压缩.zip文件夹，您应该获得AsyncTCP-master文件夹
3. 重命名您的文件夹 到AsyncTCP
4. 将AsyncTCP文件夹移至Arduino IDE安装库文件夹
5. 最后，重新打开您的Arduino IDE
程序代码
我们将使用Arduino IDE对ESP32进行编程，因此在继续之前，请确保已安装ESP32附加组件：
打开您的Arduino IDE并复制以下代码。
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
// Import required libraries
#include "WiFi.h"
#include "ESPAsyncWebServer.h"
#include <Adafruit_Sensor.h>
#include <DHT.h>
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
#define DHTPIN 27 // Digital pin connected to the DHT sensor
// Uncomment the type of sensor in use:
//#define DHTTYPE DHT11 // DHT 11
#define DHTTYPE DHT22 // DHT 22 (AM2302)
//#define DHTTYPE DHT21 // DHT 21 (AM2301)
DHT dht(DHTPIN, DHTTYPE);
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
String readDHTTemperature() {
// Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
// Read temperature as Celsius (the default)
float t = dht.readTemperature();
// Read temperature as Fahrenheit (isFahrenheit = true)
//float t = dht.readTemperature(true);
// Check if any reads failed and exit early (to try again).
if (isnan(t)) {
Serial.println("Failed to read from DHT sensor!");
return "--";
}
else {
Serial.println(t);
return String(t);
}
}
String readDHTHumidity() {
// Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
float h = dht.readHumidity();
if (isnan(h)) {
Serial.println("Failed to read from DHT sensor!");
return "--";
}
else {
Serial.println(h);
return String(h);
}
}
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<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">
<style>
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
h2 { font-size: 3.0rem; }
p { font-size: 3.0rem; }
.units { font-size: 1.2rem; }
.dht-labels{
font-size: 1.5rem;
vertical-align:middle;
padding-bottom: 15px;
}
</style>
</head>
<body>
<h2>ESP32 DHT Server</h2>
<p>
<i class="fas fa-thermometer-half" style="color:#059e8a;"></i>
<span class="dht-labels">Temperature</span>
<span id="temperature">%TEMPERATURE%</span>
<sup class="units">°C</sup>
</p>
<p>
<i class="fas fa-tint" style="color:#00add6;"></i>
<span class="dht-labels">Humidity</span>
<span id="humidity">%HUMIDITY%</span>
<sup class="units">%</sup>
</p>
</body>
<script>
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("temperature").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/temperature", true);
xhttp.send();
}, 10000 ) ;
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("humidity").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/humidity", true);
xhttp.send();
}, 10000 ) ;
</script>
</html>)rawliteral";
// Replaces placeholder with DHT values
String processor(const String& var){
//Serial.println(var);
if(var == "TEMPERATURE"){
return readDHTTemperature();
}
else if(var == "HUMIDITY"){
return readDHTHumidity();
}
return String();
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
dht.begin();
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Print ESP32 Local IP Address
Serial.println(WiFi.localIP());
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", readDHTTemperature().c_str());
});
server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", readDHTHumidity().c_str());
});
// Start server
server.begin();
}
void loop(){
}
将WIFI用户名和密码插入以下变量中，该代码将立即生效。
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
代码如何工作
在下面的段落中，我们将解释代码的工作方式。
导入库
首先，导入所需的库。需要WiFi，ESPAsyncWebServer和ESPAsyncTCP来构建Web服务器。Adafruit_Sensor和DHT是从DHT11或DHT22传感器来读取数据。
#include "WiFi.h"
#include "ESPAsyncWebServer.h"
#include <ESPAsyncTCP.h>
#include <Adafruit_Sensor.h>
#include <DHT.h>
设置您的WIFI网络
在以下变量中插入您的用户名和密码，以便ESP32可以连接到您的本地WIFI网络。
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
变量定义
定义DHT数据引脚连接的GPIO。在这种情况下，它已连接到GPIO 27。
#define DHTPIN 27 // Digital pin connected to the DHT sensor
然后，选择您正在使用的DHT传感器类型。在我们的示例中，我们使用的是DHT22。如果您使用的是其他类型，则只需要取消注释传感器并注释所有其他传感器即可。
#define DHTTYPE DHT22 // DHT 22 (AM2302)
使用我们之前定义的类型和引脚实例化DHT对象。
DHT dht(DHTPIN, DHTTYPE);
在端口80上创建一个AsyncWebServer对象。
AsyncWebServer server(80);
读取温度和湿度函数
我们创建了两个函数：一个读取温度（readDHTTemperature（）），另一个读取湿度（readDHTHumidity（））。
String readDHTTemperature() {
// Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
// Read temperature as Celsius (the default)
float t = dht.readTemperature();
// Read temperature as Fahrenheit (isFahrenheit = true)
//float t = dht.readTemperature(true);
// Check if any reads failed and exit early (to try again).
if (isnan(t)) {
Serial.println("Failed to read from DHT sensor!");
return "--";
}
else {
Serial.println(t);
return String(t);
}
}
获取传感器读数就像在dht对象上使用readTemperature（）和readHumidity（）方法一样简单。
float t = dht.readTemperature();
float h = dht.readHumidity();
如果传感器无法获得读数，我们还有一个条件返回两个破折号（–）。
if (isnan(t)) {
Serial.println("Failed to read from DHT sensor!");
return "--";
}
读数以字符串类型返回。要将float转换为字符串，请使用String（）函数。
return String(t);
默认情况下，我们以摄氏度为单位读取温度。要获取以华氏度为单位的温度，请以摄氏度为单位注释温度，并以华氏度为注释温度，以便您具有以下条件：
//float t = dht.readTemperature();
// Read temperature as Fahrenheit (isFahrenheit = true)
float t = dht.readTemperature(true);
建立网页
进入Web服务器页面。
如上图所示，该网页显示一个标题和两个段落。有一段显示温度，另一段显示湿度。还有两个图标可以美化我们的页面。
让我们看看如何创建此网页。
所有包含样式的HTML文本都存储在index_html变量中。现在，我们将遍历HTML文本，并查看每个部分的作用。
以下<meta>标记使您的网页在任何浏览器中都能响应。
<meta name="viewport" content="width=device-width, initial-scale=1">
所述<链路>需要标签来从网站fontawesome加载的图标。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
风格样式
在<style> </ style>标记之间，我们添加了一些CSS来设置网页样式。
<style>
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
h2 { font-size: 3.0rem; }
p { font-size: 3.0rem; }
.units { font-size: 1.2rem; }
.dht-labels{
font-size: 1.5rem;
vertical-align:middle;
padding-bottom: 15px;
}
</style>
基本上，我们将HTML页面设置为显示Arial字体的文本，该文本以不带边距的块显示，并居中对齐。
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
我们为读数的标题（h2），段落（p）和单位（.units）设置字体大小。
h2 { font-size: 3.0rem; }
p { font-size: 3.0rem; }
.units { font-size: 1.2rem; }
读数的标签样式如下所示：
dht-labels{
font-size: 1.5rem;
vertical-align:middle;
padding-bottom: 15px;
}
先前的所有标记应位于<head>和</ head>标记之间。这些标记用于包含用户不直接可见的内容，例如<meta>，<link>标记和样式。
HTML主体
在<body> </ body>标记内是我们添加网页内容的位置。
该<h2> </ h2>标签标题添加到网页。在这种情况下，" ESP32 DHT服务器"文本，但是您可以添加任何其他文本。
<h2>ESP32 DHT Server</h2>
然后，有两个段落。一个显示温度，另一个显示湿度。段落由<p>和</ p>标记分隔。温度的段落如下：
<p>
<i class="fas fa-thermometer-half" style="color:#059e8a;"</i>
<span class="dht-labels">Temperature</span>
<span id="temperature">%TEMPERATURE%</span>
<sup class="units">°C</sup>
</p>
湿度的段落在以下摘要中：
<p>
<i class="fas fa-tint" style="color:#00add6;"></i>
<span class="dht-labels">Humidity</span>
<span id="humidity">%HUMIDITY%</span>
<sup class="units">%</sup>
</p>
所述的<i>标签显示fontawesome图标。
如何显示图标
要选择图标，请访问。
搜索您要查找的图标。例如，"温度计"。
单击所需的图标。然后，您只需要复制提供的HTML文本。
<i class="fas fa-thermometer-half">
要选择颜色，您只需要通过十六进制传递颜色的样式参数，如下所示：
<i class="fas fa-tint" style="color:#00add6;"></i>
继续HTML文本…
下一行在网页中写入"温度"一词。
<span class="dht-labels">Temperature</span>
％符号之间的TEMPERATURE文本是温度值的占位符。
<span id="temperature">%TEMPERATURE%</span>
这意味着此％TEMPERATURE％文本就像一个变量，将被DHT传感器的实际温度值代替。HTML文本上的占位符应位于％符号之间。
最后，我们添加度数符号。
<sup class="units">°C</sup>
该<SUP> < / SUP>标签使文本标。
对于湿度段，我们使用相同的方法，但是使用不同的图标和％HUMIDITY％占位符。
<p>
<i class="fas fa-tint" style="color:#00add6;"></i>
<span class="dht-labels">Humidity</span>
<span id="humidity">%HUMIDITY%</span>
<sup class="units">%</sup>
</p>
自动更新
最后，我们的网页中有一些JavaScript代码，每10秒自动更新一次温度和湿度。
HTML文本中的脚本应位于<script> </ script>标记之间。
<script>
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("temperature").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/temperature", true);
xhttp.send();
}, 10000 ) ;
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("humidity").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/humidity", true);
xhttp.send();
}, 10000 ) ;
</script>
要更新背景温度，我们有一个setInterval（）函数，该函数每10秒运行一次。
基本上，它在/ temperature URL中发出请求以获取最新的温度读数。
xhttp.open("GET", "/temperature", true);
xhttp.send();
}, 10000 ) ;
收到该值时，它将更新id为temperature的HTML元素。
if (this.readyState == 4 && this.status == 200) {
document.getElementById("temperature").innerHTML = this.responseText;
}
总而言之，上一节负责异步更新温度。对湿度读数重复相同的过程。
重要提示：由于DHT传感器获取读数的速度非常慢，如果您计划同时将多个客户端连接到ESP32，建议您增加请求间隔或删除自动更新。
处理器
现在，我们需要创建processor（）函数，该函数将用实际的温度和湿度值替换HTML文本中的占位符。
String processor(const String& var){
//Serial.println(var);
if(var == "TEMPERATURE"){
return readDHTTemperature();
}
else if(var == "HUMIDITY"){
return readDHTHumidity();
}
return String();
}
当请求网页时，我们检查HTML是否具有任何占位符。如果找到％TEMPERATURE％占位符，则通过调用先前创建的readDHTTemperature（）函数来返回温度。
if(var == "TEMPERATURE"){
return readDHTTemperature();
}
如果占位符为％HUMIDITY％，则返回湿度值。
else if(var == "HUMIDITY"){
return readDHTHumidity();
}
设定（）
在setup（）中，初始化串口监视器以进行调试。
Serial.begin(115200);
初始化DHT传感器。
dht.begin();
连接到您的局域网并打印ESP32 IP地址。
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
最后，添加以下代码行以处理Web服务器。
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", readDHTTemperature().c_str());
});
server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", readDHTHumidity().c_str());
});
当我们在根URL上发出请求时，我们将发送存储在index_html变量中的HTML文本。我们还需要传递处理器函数，该函数将用正确的值替换所有占位符。
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
我们需要添加两个其他处理程序来更新温度和湿度读数。当我们在/ temperature URL 上收到请求时，我们只需要发送更新的温度值。它是纯文本，应该以char形式发送，因此我们使用c_str（）方法。
server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", readDHTTemperature().c_str());
});
对湿度重复相同的过程。
server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", readDHTHumidity().c_str());
});
最后，我们可以启动服务器。
server.begin();
因为这是一个异步Web服务器，所以我们不需要在loop（）中编写任何内容。
void loop(){
}
以上就是代码的工作原理。
上载验证程序
现在，将代码上传到ESP32。确保选择了正确的板和COM端口。
上传后，以115200的波特率打开串口监视器。按ESP32复位按钮。ESP32 IP地址应在串口监视器中打印。
Web服务器演示
打开浏览器，输入ESP32 IP地址。您的Web服务器应显示最新的传感器读数。
请注意，温度和湿度读数会自动更新，而无需刷新网页。
在本教程中，我们向您展示了如何使用ESP32构建异步Web服务器以显示来自DHT11或DHT22传感器的传感器读数以及如何自动更新读数。