ESP8266+DHT11+MQTT+WEB
本帖最后由 353529281 于 2022-3-24 10:39 编辑Arduino部分代码/*
2022年3月24日
ESP8266+DHT11+MQTT+WEB
功能：
ESP8266获取传感器DHT11传递给网页端显示
材料：
ESP8266
DHT11
MQTT服务器
注：测试用的MTQQ服务器地址https://www.emqx.com/zh/mqtt/public-mqtt5-broker
作者：九洲创客
QQ：353529281
*/
#include <ESP8266WiFi.h> //WIFI库
#include <PubSubClient.h> //MQTT库
#include <Ticker.h> //定时器库
#include <DHT.h> //DHT库
//设置DHT引脚
#define DHTPIN D5
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);
// 设置wifi接入信息(请根据您的WiFi信息进行修改)
const char* ssid = "";
const char* password = ";
const char* mqttServer = "broker.emqx.io";
Ticker ticker;
WiFiClient wifiClient;
PubSubClient mqttClient(wifiClient);
int count; // Ticker计数用变量
float h; //湿度
float t; //温度
void setup() {
Serial.begin(9600);
//设置ESP8266工作模式为无线终端模式
WiFi.mode(WIFI_STA);
// 连接WiFi
connectWifi();
// 设置MQTT服务器和端口号
mqttClient.setServer(mqttServer, 1883);
// 连接MQTT服务器
connectMQTTServer();
// Ticker定时对象
ticker.attach(1, tickerCount);
//DHT对象
dht.begin();
}
void loop() {
//DHT温度和温度
h = dht.readHumidity();
t = dht.readTemperature();
if (isnan(h) || isnan(t)) {
h=0;
t=0;
}
if (mqttClient.connected()) { // 如果开发板成功连接服务器
// 每隔3秒钟发布一次信息
if (count >= 3){
pubMQTTmsg();
count = 0;
}
// 保持心跳
mqttClient.loop();
} else { // 如果开发板未能成功连接服务器
connectMQTTServer(); // 则尝试连接服务器
}
}
void tickerCount(){
count++;
}
void connectMQTTServer(){
// 根据ESP8266的MAC地址生成客户端ID（避免与其它ESP8266的客户端ID重名）
String clientId = "esp8266-" + WiFi.macAddress();
// 连接MQTT服务器
if (mqttClient.connect(clientId.c_str())) {
Serial.println("MQTT Server Connected.");
Serial.println("Server Address: ");
Serial.println(mqttServer);
Serial.println("ClientId:");
Serial.println(clientId);
} else {
Serial.print("MQTT Server Connect Failed. Client State:");
Serial.println(mqttClient.state());
delay(3000);
}
}
// 发布信息
void pubMQTTmsg(){
//发布的主题
String topicString = "wendu";
char publishTopic;
strcpy(publishTopic, topicString.c_str());
// 建立发布信息。信息内容以JSON格式发布。
String messageString ="{\"wendu\":"+ String(t)+",\"shidu\": "+String(h)+"}";
char publishMsg;
strcpy(publishMsg, messageString.c_str());
// 实现ESP8266向主题发布信息
if(mqttClient.publish(publishTopic, publishMsg)){
Serial.println("Publish Topic:");Serial.println(publishTopic);
Serial.println("Publish message:");Serial.println(publishMsg);
} else {
Serial.println("Message Publish Failed.");
}
}
// ESP8266连接wifi
void connectWifi(){
WiFi.begin(ssid, password);
//等待WiFi连接,成功连接后输出成功信息
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi Connected!");
Serial.println("");
}
Html部分代码(可直接新建文本另存为index.html;复制下面代码保存，双击打开即可。)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ESP8266+MQTT+DHT11+WEB</title>
<style type="text/css">
div {
width: 33%;
height: 300px;
float: left;
border: red solid 1px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" ></script>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js" ></script>
<script type="text/javascript">
const options = {
clean: true,
connectTimeout: 4000,
clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
username: "",
password: ''
}
/******需要修改的订阅主题和MQTT服务器地址****/
const toppic="wendu";
const connectUrl = 'ws://broker.emqx.io:8083/mqtt';
/******需要修改的订阅主题和MQTT服务器地址*/
const client = mqtt.connect(connectUrl, options);
//当重新连接启动触发回调
client.on('reconnect', () => {
$("#div1").text("正在重连.....");
});
//连接断开后触发的回调
client.on("close",function () {
$("#div1").text("客户端已断开连接.....");
});
//从broker接收到断开连接的数据包后发出。MQTT 5.0特性
client.on("disconnect",function (packet) {
$("#div1").text("从broker接收到断开连接的数据包....."+packet);
});
//客户端脱机下线触发回调
client.on("offline",function () {
$("#div1").text("客户端脱机下线.....");
});
//当客户端无法连接或出现错误时触发回调
client.on("error",(error) =>{
$("#div1").text("客户端出现错误....."+error);
});
//当客户端发送任何数据包时发出。这包括published()包以及MQTT用于管理订阅和连接的包
client.on("packetsend",(packet)=>{
$("#div1").text("客户端已发出数据包....."+packet);
});
//当客户端接收到任何数据包时发出。这包括来自订阅主题的信息包以及MQTT用于管理订阅和连接的信息包
client.on("packetreceive",(packet)=>{
$("#div1").text("客户端已收到数据包....."+packet);
});
//成功连接后触发的回调
client.on("connect",function (connack) {
$("#div1").text("成功连接上服务器"+new Date());
//订阅某主题
/**
* client.subscribe(topic/topic array/topic object, , )
* topic:一个string类型的topic或者一个topic数组,也可以是一个对象
* options
*/
client.subscribe(toppic,{qos:0});
//每隔2秒发布一次数据
//setInterval(publish,2000)
});
function publish() {
//发布数据
/**
* client.publish(topic,message,, )
*
* message: Buffer or String
* options:{
* qos:0, //默认0
* retain:false, //默认false
* dup:false, //默认false
* properties:{}
* }
* callback:function (err){}
*/
const message = "h5 message "+Math.random()+new Date();
client.publish(toppic,message,{qos:0});
$("#div2").text("客户端发布了数据:"+message);
}
//当客户端接收到发布消息时触发回调
/**
* topic:收到的数据包的topic
* message:收到的数据包的负载playload
* packet:收到的数据包
*/
client.on('message', (topic, message,packet) => {
$("#div2").text("客户端收到订阅消息,topic="+topic+";消息数据:"+message+";数据包:"+packet);
var obj =JSON.parse(message);
$("#div3").text("温度："+obj.wendu+"℃;湿度："+obj.shidu+"%")
});
;
//页面离开自动断开连接
$(window).bind("beforeunload",()=>{
$("#div1").text("客户端窗口关闭,断开连接");
client.disconnect();
})
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
大神，膜拜。刚刚入坑！ 你好，可以分享全部源码或者购买吗 18行那个DHT.h的库是哪个在哪里下的？？？ error: unable to find string literal operator 'operator""wendu' with 'const char ', 'unsigned int' arguments
String messageString ="{"wendu":"+ String(t)+","shidu": "+String(h)+"}";
页:
[1]