使用DHT11和ESP8266 NodeMCU搭建网页服务器

风筝 · 发表于 2022-11-4 20:33:34

您是否曾经希望您可以随时使用手机、平板电脑或电脑监视房屋或酒窖中的温度和湿度？那这个物联网项目可能是一个不错的起点！

本文将使用ESP8266 NodeMCU开发板作为控制设备，该设备连接到现有的WiFi网络并创建Web服务器。当设备连接到该网页服务器时，ESP8266将读取DHT11/DHT22传感器的温度和相对湿度，并将其发送到设备的网页浏览器中。

将DHT11/DHT22传感器接线到ESP8266

将DHT11/DHT22传感器连接到ESP8266非常容易。首先将ESP8266放在面包板上，确保开发板的每一侧都位于面包板的另一侧。

将传感器放在ESP8266旁边的面包板上。将传感器的VCC引脚连接到ESP8266的3.3V引脚，然后接地。将传感器的Data引脚连接到ESP8266的D8引脚。最后，在VCC和数据线之间添加10kΩ上拉电阻，以使其保持高电平，以在传感器和ESP8266之间进行正确的通信。

下图显示了接线。

Wiring-Fritzing-Connecting-DHT11-Temperature-Humidity-Sensor-with-ESP8266-NodeMCU.jpg

安装DHT传感器库

要开始读取传感器数据，您需要安装DHT传感器库。它可从Arduino库管理器获得。

要安装库，请导航到Sketch > Include Library > Manage Libraries…等待库管理器下载库索引并更新已安装的库列表。

Arduino-Library-Installation-Selecting-Manage-Libraries-in-Arduino-IDE.jpg

输入DHT sensor筛选搜索结果。查找Adafruit的DHT传感器库。单击该条目，然后选择Install。

DHT传感器库利用Adafruit传感器支持后端。因此，在库管理器中查找Adafruit Unified Sensor，并安装。

使用WiFi站模式STA创建ESP8266网页服务器

如标题所示，我们将在站模式（STA）下配置ESP8266网页服务器，以将网页服务于现有网络上的任何连接的客户端。

在开始上传草图之前，必须用网络凭据替换以下两个变量，以便ESP8266可以连接到现有网络。

const char* ssid = "YourNetworkName"; // Enter SSID here
const char* password = "YourPassword"; //Enter Password here

复制代码

完成后，尝试草图，然后我们将详细介绍。

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "DHT.h"
// Uncomment one of the lines below for whatever DHT sensor type you're using!
//#define DHTTYPE DHT11 // DHT 11
//#define DHTTYPE DHT21 // DHT 21 (AM2301)
#define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321
/*Put your SSID & Password*/
const char* ssid = "YourNetworkName"; // Enter SSID here
const char* password = "YourPassword"; //Enter Password here
ESP8266WebServer server(80);
// DHT Sensor
uint8_t DHTPin = D8;
// Initialize DHT sensor.
DHT dht(DHTPin, DHTTYPE);
float Temperature;
float Humidity;
void setup() {
Serial.begin(115200);
delay(100);
pinMode(DHTPin, INPUT);
dht.begin();
Serial.println("Connecting to ");
Serial.println(ssid);
//connect to your local wi-fi network
WiFi.begin(ssid, password);
//check wi-fi is connected to wi-fi network
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected..!");
Serial.print("Got IP: "); Serial.println(WiFi.localIP());
server.on("/", handle_OnConnect);
server.onNotFound(handle_NotFound);
server.begin();
Serial.println("HTTP server started");
}
void loop() {
server.handleClient();
}
void handle_OnConnect() {
Temperature = dht.readTemperature(); // Gets the values of the temperature
Humidity = dht.readHumidity(); // Gets the values of the humidity
server.send(200, "text/html", SendHTML(Temperature,Humidity));
}
void handle_NotFound(){
server.send(404, "text/plain", "Not found");
}
String SendHTML(float Temperaturestat,float Humiditystat){
String ptr = "<!DOCTYPE html> <html>\n";
ptr +="<head><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">\n";
ptr +="<title>ESP8266 Weather Report</title>\n";
ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;}\n";
ptr +="p {font-size: 24px;color: #444444;margin-bottom: 10px;}\n";
ptr +="</style>\n";
ptr +="</head>\n";
ptr +="<body>\n";
ptr +="<div id="webpage">\n";
ptr +="<h1>ESP8266 NodeMCU Weather Report</h1>\n";
ptr +="<p>Temperature: ";
ptr +=(int)Temperaturestat;
ptr +="°C</p>";
ptr +="<p>Humidity: ";
ptr +=(int)Humiditystat;
ptr +="%</p>";
ptr +="</div>\n";
ptr +="</body>\n";
ptr +="</html>\n";
return ptr;
}

复制代码

访问Web服务器

上传草图后，打开串口显示器，然后按NodeMCU上的复位按钮。如果一切正常，它将显示从路由器获得的动态IP地址以及HTTP server started消息。

ESP8266-NodeMCU-Web-Server-Station-Mode-Serial-Monitor-Output-Server-Started.jpg

接下来，启动浏览器并导航到串口显示器上显示的IP地址。 ESP8266应提供当前温度和相对湿度的网页。

Display-DHT11-DHT22-AM2302-Temperature-Humidity-on-ESP8266-Web-Server-Profession.jpg

详细的代码说明

草图首先包括ESP8266WIFI.H库。该库包含我们用来连接到网络的ESP8266特定方法。之后，我们包括ESP8266Weberver.h库，其中包含一些方法，这些方法将有助于我们配置服务器并处理传入的HTTP请求，而不必担心低级实现详细信息。最后，我们包括DHT.H库。

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "DHT.h"

复制代码

接下来，我们指定正在使用的DHT传感器的类型。

//#define DHTTYPE DHT11 // DHT 11
//#define DHTTYPE DHT21 // DHT 21 (AM2301)
#define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321

复制代码

因为我们正在将ESP8266网页服务器配置为STA模式，因此它将加入现有的WiFi网络。因此，我们需要指定SSID和密码。

/*Put your SSID & Password*/
const char* ssid = "YourNetworkName"; // Enter SSID here
const char* password = "YourPassword"; //Enter Password here

复制代码

之后，我们创建了ESP8266Weberver库的对象，以便我们可以访问其函数。该对象的构造函数接受服务器将要侦听的端口作为参数。由于HTTP默认使用端口80，因此我们将使用此值。这使我们可以在不指定URL中的端口的情况下连接到服务器。

// declare an object of WebServer library
ESP8266WebServer server(80);

复制代码

接下来，我们定义ESP8266连接传感器的Data引脚的GPIO编号，并创建DHT对象。我们可以访问DHT特定于DHT库的函数。

// DHT Sensor
uint8_t DHTPin = D8;
// Initialize DHT sensor.
DHT dht(DHTPin, DHTTYPE);

复制代码

定义了两个浮点变量：Temperature和Humidity。

float Temperature;
float Humidity;

复制代码

在setup()函数中，我们配置了网页务器。首先，我们为调试目的建立了串口连接，并将GPIO引脚配置为输入。我们还初始化了DHT对象。

Serial.begin(115200);
delay(100);
pinMode(DHTPin, INPUT);
dht.begin();

复制代码

然后，我们使用wifi.begin()函数连接到WiFi网络。该函数以SSID（网络名称）和密码作为参数。

Serial.println("Connecting to ");
Serial.println(ssid);
//connect to your local wi-fi network
WiFi.begin(ssid, password);

复制代码

当ESP8266尝试连接到网络时，我们可以使用wifi.status()函数检查连接状态。

//check wi-fi is connected to wi-fi network
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}

复制代码

连接到网络后，WiFi.localIP()函数将用于打印分配给ESP8266的IP地址。

Serial.println("");
Serial.println("WiFi connected..!");
Serial.print("Got IP: "); Serial.println(WiFi.localIP());

复制代码

要处理传入的HTTP请求，我们必须指定当访问特定URL时应执行哪些代码。为此，我们使用.on()方法。该方法接受两个参数：相对URL路径和访问该URL时要执行的函数的名称。

下面的代码表明，当服务器在root（/）路径上接收HTTP请求时，它将调用handle_onconnect()函数。重要的是要注意指定的URL是相对路径。

server.on("/", handle_OnConnect);

复制代码

如果客户端请求未指定server.on.on()的URL，我们尚未指定服务器应提供的服务。它应该给出404错误（未找到页面）作为响应。为此，我们使用server.onNotFound()方法。

server.onNotFound(handle_NotFound);

复制代码

现在，要启动服务器，我们调用服务器对象的begin()方法。

server.begin();
Serial.println("HTTP server started");

复制代码

实际传入的HTTP请求在loop()函数中处理。为此，我们使用服务器对象的handleclient()方法。

server.handleClient();

复制代码

现在，我们必须编写handle_onconnect()函数，以前将其连接到root（/）url server.on。在函数中首先从传感器中读取温度和湿度值。我们使用发送方法来响应HTTP请求。尽管该方法可以使用许多不同的参数调用，但最简单的表格需要HTTP响应代码、内容类型和内容。

我们传递给发送方法的第一个参数是代码200（HTTP状态代码之一），与确定响应相对应。然后，我们将内容类型指定为“ text/html”，最后我们通过sendhtml()自定义函数，该函数生成具有温度和湿度读数的动态HTML页面。

void handle_OnConnect() {
Temperature = dht.readTemperature(); // Gets the values of the temperature
Humidity = dht.readHumidity(); // Gets the values of the humidity
server.send(200, "text/html", SendHTML(Temperature,Humidity));
}

复制代码

同样，我们编写一个函数来处理404错误页面。

void handle_NotFound(){
server.send(404, "text/plain", "Not found");
}

复制代码

账号		自动登录	找回密码
密码			立即注册

使用DHT11和ESP8266 NodeMCU搭建网页服务器

相关帖子

浏览过的版块