物联网-使用网页查看温湿度数据&&开关灯

技术2024-12-20 6

物联网-使用网页查看温湿度数据&&开关灯

一、项目介绍二、实现效果（1）串口调试助手-实验数据展示与分析（2）网页-实验数据展示与分析三、器件接线四、相关代码五、备注（1）三个web注册函数的内容注解（2）网页显示中文的问题（3）HTTP状态码(4)Content-Type

一、项目介绍

ESP8266可以方便的进行UDP通讯实现通过网络控制设备的功能，但是该方法对于用户来说还需要一个界面来完成数据通讯，所幸ESP系列有着不错的性能和不小的存储空间，足够用来构建简单的网页服务器（Web Server），这样用户就可以通过浏览器访问服务器的ip地址进行查看数据或控制设备。

我们这次的方案将采用ESP8266 NodeMCU构建简单的网页服务器（Web Server），后通过http协议将获取的DHT11温湿度传感器的温湿度数据传送到web页面，使得用户可以通过浏览器访问服务器的ip地址进行温湿度数据的查询（数据每5秒更新一次），并且用户可以通过on/off按钮下发请求命令，控制led灯的亮灭。

二、实现效果

（1）串口调试助手-实验数据展示与分析

利用友善串口调试助手连接我们开发板所在的串口com15,波特率选择115200，接收设置选择ASCII，自动换行，则在数据窗口我们就可以看到串口打印的WIFI名、本地IP地址、MDNS域名服务信息、温湿度数据。

（2）网页-实验数据展示与分析

在浏览器访问我们的服务端IP地址，即可看到采集的温湿度数据（每5秒更新一次），点击on按钮可以下发请求开灯命令，点亮LED灯；点击off按钮可以下发请求关灯命令，熄灭LED灯。

三、器件接线

器件接线示意表 ESP8266 NodeMCU开发板DHT11传感LED灯D2正极D4S（DATA数据引脚）3.3V+GND-负极器件接线示意图

四、相关代码

流程图

相关头文件及代码NodeMcu arduino编程环境搭建（Esp8266开发环境搭建）这里有这次代码所用到的ESP8266 NodeMCU的头文件链接：https://pan.baidu.com/s/1liNawFRqJ2C-i-gNlp-MIw 提取码：t29r 这里面有dth11的头文件及项目源码 /**头文件**/ #include <SPI.h> #include <Wire.h> #include <dht11.h> //温度的头文件 #include <ESP8266WiFi.h> #include <WiFiClient.h> #include <ESP8266WebServer.h> #include <ESP8266mDNS.h> const char *ssid = "111";//WIFI名 const char *password = "wubaoshi";//密码 char temp[900]; //网页显示内容 ESP8266WebServer server ( 80 );//建立服务器对象，设置监听端口号为80（网页默认端口号） //温度传感器加载 dht11 DHT11; #define DHT11_PIN 2 //dht11引脚 D4 #define led 4 //led引脚 D2 int temperature=0;//存放温度的变量 int humidity=0;//存放湿度的变量 void handleRoot() {//根目录发送主页 //网页内容如下 snprintf (temp, 900, "<html>\ <head>\ <meta http-equiv='refresh' content='5'/>\ <title>ESP8266 Demo</title>\ <style>\ body { background-color: #cccccc; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }\ </style>\ </head>\ <body>\ <h1>Hello from ESP8266!</h1>\ <p>temperature : %02d</p>\ <p>humidity : %02d</p>\ <p>On_LED</p>\ <a href=./pin?light=On><input type=button value=On></a>\ <p>OFF_LED</p>\ <a href=./pin?light=Off><input type=button value=Off></a>\ </body>\ </html>\ ", temperature,humidity ); /**code：状态代码如：200， 404， 500等 type：网页类型如：text/html，image/svg+xml等 message：要发给客户端的内容 server.send ( code, type, message ); **/ server.send ( 200, "text/html", temp ); } void handleNotFound() {//访问地址不存在返回404 //message:要发给客户端的内容 String message = "File Not Found\n\n"; //字符串内容 message += "URI: "; //字符串内容 message += server.uri();//获取uri message += "\nMethod: "; //字符串内容 message += ( server.method() == HTTP_GET ) ? "GET" : "POST";//判断是get方法，还是post方法 message += "\nArguments: "; //字符串内容 message += server.args(); //获取返回参数的内容 message += "\n"; //换行 //获取返回参数的名字、内容 for ( uint8_t i = 0; i < server.args(); i++ ) { message += " " + server.argName ( i ) + ": " + server.arg ( i ) + "\n"; } server.send ( 404, "text/plain", message ); //返回404错误信息给客户端 } /**点击按钮后的连接函数**/ void pin(){ if(server.arg("light")=="On"){ // 如果获得的light参数值等于on digitalWrite(led,HIGH); //拉高led的引脚，即可点亮led server.send ( 200, "text/html", temp ); //返回temp信息给客户端 } if(server.arg("light")=="Off"){ // 如果获得的light参数值等于off digitalWrite(led,LOW); //拉低led的引脚，即可熄灭led server.send ( 200, "text/html", temp ); //返回temp信息给客户端 } } //在这里加入初始化相关代码，只运行一次: void setup ( void ) { Serial.begin ( 115200 ); //初始化串口通信，并将波特率设置为115200 WiFi.mode ( WIFI_STA ); //WIFI设为STA模式 WiFi.begin ( ssid, password ); //连接WIFI Serial.println ( "" ); //串口打印 pinMode(DHT11_PIN,OUTPUT); //dht11引脚设置为输出模式 pinMode(led,OUTPUT); //led引脚设置为输出模式 // Wait for connection while ( WiFi.status() != WL_CONNECTED ) { //WIFI的连接状态 delay ( 500 ); Serial.print ( "." ); //如果没有连通向串口发送..... } Serial.println ( "" ); //串口打印 Serial.print ( "Connected to " ); //串口打印Connected to Serial.println ( ssid ); //串口打印WIFI名 Serial.print ( "IP address: " ); //串口打印IP address: Serial.println ( WiFi.localIP() ); //串口打印本地IP地址 if ( MDNS.begin ( "esp8266" ) ) { //MDNS域名服务，begin方法创建我们将使用的Web地址，并将其命名为“esp8266”。 Serial.println ( "MDNS responder started" ); //如果已经存在，串口打印MDNS responder started提示信息 } server.on ( "/", handleRoot );//注册访问根目录回调函数 server.on("/pin", HTTP_GET ,pin); //注册按钮点击的事件 server.onNotFound ( handleNotFound );//注册无地址访问函数 server.begin();//启动服务器 Serial.println ( "HTTP server started" ); //串口打印HTTP server started } // 在这里加入主要程序代码，重复执行: void loop ( void ) { /**串口温度**/ int chk1 = DHT11.read(DHT11_PIN); //将读取到的数据赋给chk temperature=DHT11.temperature;//将温湿度值赋值给变量temperature humidity=DHT11.humidity;//将湿度值赋值给变量humidity /**串口打印温湿度数据**/ Serial.print("Temperature: "); Serial.println(temperature); Serial.print("humidity "); Serial.println(humidity); delay(100); //延时100ms server.handleClient();//监听客户端请求，并处理 }

五、备注

（1）三个web注册函数的内容注解

函数内容注解根目录注册函数主要用于显示页面的主要内容，存放html相关的文件请求不可用时的回调函数主要用于出现404错误时，在客户端打印错误信息点击按钮后的连接函数主要用于接收客户端下发的请求开关灯参数，比较参数是开灯/关灯，后上拉/下拉LED灯的引脚，从而控制LED灯的亮灭

（2）网页显示中文的问题

运用中文转utf-8工具(百度就用)，将中文转化为utf-8，如温度转后的utf-8内容为：温度 湿度转后的utf-8内容为：湿度 将utf-8的内容放在html文件相应的地方即可。

（3）HTTP状态码

网页上面的200、404等是HTTP状态码。

用户在请求访问某个地址的时候，WebServer需要进行响应，发送响应头，响应头中第一行一般像是这样的HTTP/1.1 200 OK，其中200就是状态码。

常见的状态码如下：状态码注解200服务器成功返回网页404请求的网页不存在301本网页被永久性转移到另一个URL503服务器目前不可用401请求未经授权，需要登录认证

(4)Content-Type

Content-Type（MediaType），即是Internet Media Type，互联网媒体类型，也叫做MIME类型。在互联网中有成百上千中不同的数据类型，HTTP在传输数据对象时会为他们打上称为MIME的数据格式标签，用于区分数据类型。最初MIME是用于电子邮件系统的，后来HTTP也采用了这一方案。

在HTTP协议消息头中，使用Content-Type来表示请求和响应中的媒体类型信息。它用来告诉服务端如何处理请求的数据，以及告诉客户端（一般是浏览器）如何解析响应的数据，比如显示图片，解析并展示html等等。

Content-Type举例状态码注解text/plain纯文本文件text/htmlhtml文件application/jsonjson形式数据文件application/xmlxml形式数据文件image/pngpng格式图片

Processed: 0.059, SQL: 9

物联网-使用网页查看温湿度数据&amp;&amp;开关灯