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

最新推荐文章于 2023-09-08 10:55:08 发布

原创

最新推荐文章于 2023-09-08 10:55:08 发布 · 6.7k 阅读

102 ·

CC 4.0 BY-SA版权

文章标签：

#ESP8266 #物联网 #web

本文介绍了如何利用ESP8266 NodeMCU构建一个简单的Web服务器，通过HTTP协议展示DHT11传感器的温湿度数据，并允许用户通过网页控制LED灯的开关。用户可以通过浏览器实时查看每5秒更新一次的温湿度数据，同时可以通过点击按钮实现LED的亮灭。项目涉及到串口调试、网页数据显示、器件接线和相关代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、项目介绍

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		正极
D4	S（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