HTTP物联网温湿度网页数据展示

前言

有些设备由于没有必要或者无法使用MQTT协议，从而使用更加简单的HTTP协议来进行数据展示，相较于MQTT协议，使用HTTP协议的操作更加简单，如果使用WiFi模块（ESP8266）一般情况下可以直接使用AT命令执行发送，无需再次刷入固件；展示效果图如下图所示。

一、环境准备

网页空间

网页空间需要支持PHP文件的运行，一般网页空间都支持PHP的运行

域名

需要准备一个可用的域名

二、功能简介

本程序实现了用 HTTP(TCP) 协议直接向网页发送数据（温度、湿度），并且实时显示在前端，当实时数据在阈值之外的情况会触发报警（背景闪烁、声音报警、文字提示），报警阈值会存储到服务器（刷新/新开网页后不会重置信息），当超过 20s 没有接收到数据时，设备会显示离线，设备离线时监测页面的温湿度就会消失；当首次打开网页时，监测页面会显示连接信息，可以通过连接信息的内容来发送数据；历史页面可以查看发送的历史数据并配有图表显示

三、工作流程图

四、使用方法

1.服务器配置方法

网页项目部署教程快速使用虚拟主机/服务器搭建一个网页空间

当部署完成后，访问网址即可展示如下界面

2.设备发送信息

连接信息只会在首次访问网页时显示，若想再次查看，请更换浏览器访问或者清除缓存
连接信息查看方法：http://您的域名/目录/hello.html

连接方式：

TCP：地址和端口请看连接信息！

HTTP-POST格式：

POST abc/hello/receive.php HTTP/1.1         //根据连接信息界面修改POST内容
Host: mqtt.uuwb09.top                       //根据连接信息界面修改Host内容（TCP）
Content-Type: application/json              //无需改动
Content-Length: 23                          //下面的字符个数
                                            //空行不能删除
{"temp":38.5,"humi":30}                     //温湿度数值报送

3.连接示例

WiFi模块

AT+CIPSTART="TCP","mqtt.uuwb09.top",80   //替换为您的域名和端口（请查看连接信息）

AT+CIPMODE=1                             //打开穿透模式

AT+CIPSEND                               //发送模式

POST /abc/hello/receive.php HTTP/1.1         //POST内容，请一次性发送完毕
Host: mqtt.uuwb09.top
Content-Type: application/json
Content-Length: 23

{"temp":38.5,"humi":30}