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

  • 一、项目介绍
  • 二、实现效果
  • （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灯的亮灭。

mysql记录温湿度数据 温湿度记录表数据_mysql记录温湿度数据

二、实现效果

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

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

mysql记录温湿度数据 温湿度记录表数据_数据_02

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

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

mysql记录温湿度数据 温湿度记录表数据_mysql记录温湿度数据_03

三、器件接线

  • 器件接线示意表

ESP8266 NodeMCU开发板

DHT11传感

LED灯

D2

正极

D4

S（DATA数据引脚）

3.3V

+

GND

-

负极

  • 器件接线示意图

四、相关代码

  • 流程图

mysql记录温湿度数据 温湿度记录表数据_数据_04

  • 相关头文件及代码
  • 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内容为：&#x6E29;&#x5EA6; 湿度转后的utf-8内容为：&#x6E7F;&#x5EA6; 将utf-8的内容放在html文件相应的地方即可。

（3）HTTP状态码

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

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

  • 常见的状态码如下：

状态码

注解

200

服务器成功返回网页

404

请求的网页不存在

301

本网页被永久性转移到另一个URL

503

服务器目前不可用

401

请求未经授权，需要登录认证

(4)Content-Type

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

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

  • Content-Type举例

状态码

注解

text/plain

纯文本文件

text/html

html文件

application/json

json形式数据文件

application/xml

xml形式数据文件

image/png

png格式图片