ESP8266+DHT11+MQTT+WEB

353529281

Arduino部分代码

1. /*
   
2. 2022年3月24日
   
3. ESP8266+DHT11+MQTT+WEB
   
4. 功能：
   
5. ESP8266获取传感器DHT11传递给网页端显示
   
6. 材料：
   
7. ESP8266
   
8. DHT11
   
9. MQTT服务器
   
10. 注：测试用的MTQQ服务器地址https://www.emqx.com/zh/mqtt/public-mqtt5-broker
    
11. 
    
12. 作者：九洲创客
    
13. QQ：353529281
    
14. */
    
15. #include <ESP8266WiFi.h>    //WIFI库
    
16. #include <PubSubClient.h>   //MQTT库
    
17. #include <Ticker.h>         //定时器库
    
18. #include <DHT.h>            //DHT库
    
19. 
    
20. //设置DHT引脚
    
21. #define DHTPIN D5
    
22. #define DHTTYPE DHT11
    
23. DHT dht(DHTPIN, DHTTYPE);
    
24. 
    
25. // 设置wifi接入信息(请根据您的WiFi信息进行修改)
    
26. const char* ssid = "";
    
27. const char* password = ";
    
28. const char* mqttServer = "broker.emqx.io";
    
29. 
    
30. Ticker ticker;
    
31. WiFiClient wifiClient;
    
32. PubSubClient mqttClient(wifiClient);
    
33. 
    
34. int count;    // Ticker计数用变量
    
35. float h;    //湿度
    
36. float t;    //温度
    
37. 
    
38. void setup() {
    
39.   Serial.begin(9600);
    
40.   
    
41.   //设置ESP8266工作模式为无线终端模式
    
42.   WiFi.mode(WIFI_STA);
    
43.   
    
44.   // 连接WiFi
    
45.   connectWifi();
    
46.   
    
47.   // 设置MQTT服务器和端口号
    
48.   mqttClient.setServer(mqttServer, 1883);
    
49. 
    
50.   // 连接MQTT服务器
    
51.   connectMQTTServer();
    
52. 
    
53.   // Ticker定时对象
    
54.   ticker.attach(1, tickerCount);  
    
55. 
    
56.   //DHT对象
    
57.   dht.begin();
    
58. }
    
59. 
    
60. void loop() {
    
61.   //DHT温度和温度
    
62.   h = dht.readHumidity();
    
63.   t = dht.readTemperature();
    
64.   if (isnan(h) || isnan(t)) {
    
65.     h=0;
    
66.     t=0;
    
67.   }
    
68.   if (mqttClient.connected()) { // 如果开发板成功连接服务器
    
69.     // 每隔3秒钟发布一次信息
    
70.     if (count >= 3){
    
71.       pubMQTTmsg();
    
72.       count = 0;
    
73.     }   
    
74.     // 保持心跳
    
75.     mqttClient.loop();
    
76.   } else {                  // 如果开发板未能成功连接服务器
    
77.     connectMQTTServer();    // 则尝试连接服务器
    
78.   }
    
79. }
    
80. 
    
81. void tickerCount(){
    
82.   count++;
    
83. }
    
84. 
    
85. void connectMQTTServer(){
    
86.   // 根据ESP8266的MAC地址生成客户端ID（避免与其它ESP8266的客户端ID重名）
    
87.   String clientId = "esp8266-" + WiFi.macAddress();
    
88. 
    
89.   // 连接MQTT服务器
    
90.   if (mqttClient.connect(clientId.c_str())) {
    
91.     Serial.println("MQTT Server Connected.");
    
92.     Serial.println("Server Address: ");
    
93.     Serial.println(mqttServer);
    
94.     Serial.println("ClientId:");
    
95.     Serial.println(clientId);
    
96.   } else {
    
97.     Serial.print("MQTT Server Connect Failed. Client State:");
    
98.     Serial.println(mqttClient.state());
    
99.     delay(3000);
    
100.   }   
     
101. }
     
102. 
     
103. // 发布信息
     
104. void pubMQTTmsg(){
     
105.   
     
106.   //发布的主题
     
107.   String topicString = "wendu";
     
108.   char publishTopic[topicString.length() + 1];  
     
109.   strcpy(publishTopic, topicString.c_str());
     
110. 
     
111.   // 建立发布信息。信息内容以JSON格式发布。
     
112.   String messageString ="{"wendu":"+ String(t)+","shidu": "+String(h)+"}";
     
113.   char publishMsg[messageString.length() + 1];   
     
114.   strcpy(publishMsg, messageString.c_str());
     
115. 
     
116.   // 实现ESP8266向主题发布信息
     
117.   if(mqttClient.publish(publishTopic, publishMsg)){
     
118.     Serial.println("Publish Topic:");Serial.println(publishTopic);
     
119.     Serial.println("Publish message:");Serial.println(publishMsg);   
     
120.   } else {
     
121.     Serial.println("Message Publish Failed.");
     
122.   }
     
123. }
     
124. 
     
125. // ESP8266连接wifi
     
126. void connectWifi(){
     
127. 
     
128.   WiFi.begin(ssid, password);
     
129. 
     
130.   //等待WiFi连接,成功连接后输出成功信息
     
131.   while (WiFi.status() != WL_CONNECTED) {
     
132.     delay(1000);
     
133.     Serial.print(".");
     
134.   }
     
135.   Serial.println("");
     
136.   Serial.println("WiFi Connected!");  
     
137.   Serial.println("");
     
138. }

复制代码

Html部分代码(可直接新建文本另存为index.html;复制下面代码保存，双击打开即可。)

1. <!DOCTYPE html>
   
2. <html lang="en">
   
3.     <head>
   
4.     <meta charset="UTF-8">
   
5.     <title>ESP8266+MQTT+DHT11+WEB</title>
   
6.     <style type="text/css">
   
7. div {
   
8.         width: 33%;
   
9.         height: 300px;
   
10.         float: left;
    
11.         border: red solid 1px;
    
12. }
    
13. </style>
    
14.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" ></script>
    
15.     <script src="https://unpkg.com/mqtt/dist/mqtt.min.js" ></script>
    
16.     <script type="text/javascript">
    
17.             const options = {
    
18.                 clean: true,
    
19.                 connectTimeout: 4000,
    
20.                 clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
    
21.                 username: "",
    
22.                 password: ''
    
23.             }
    
24.                        
    
25.                        
    
26.                         /******需要修改的订阅主题和MQTT服务器地址****/
    
27.                         const toppic="wendu";
    
28.             const connectUrl = 'ws://broker.emqx.io:8083/mqtt';
    
29.                         /******需要修改的订阅主题和MQTT服务器地址*/
    
30.                        
    
31.                        
    
32.             const client = mqtt.connect(connectUrl, options);
    
33. 
    
34.             //当重新连接启动触发回调
    
35.             client.on('reconnect', () => {
    
36.                 $("#div1").text("正在重连.....");
    
37.             });
    
38.             //连接断开后触发的回调
    
39.             client.on("close",function () {
    
40.                 $("#div1").text("客户端已断开连接.....");
    
41.             });
    
42.             //从broker接收到断开连接的数据包后发出。MQTT 5.0特性
    
43.             client.on("disconnect",function (packet) {
    
44.                 $("#div1").text("从broker接收到断开连接的数据包....."+packet);
    
45.             });
    
46.             //客户端脱机下线触发回调
    
47.             client.on("offline",function () {
    
48.                 $("#div1").text("客户端脱机下线.....");
    
49.             });
    
50.             //当客户端无法连接或出现错误时触发回调
    
51.             client.on("error",(error) =>{
    
52.                 $("#div1").text("客户端出现错误....."+error);
    
53.             });
    
54.             //当客户端发送任何数据包时发出。这包括published()包以及MQTT用于管理订阅和连接的包
    
55.             client.on("packetsend",(packet)=>{
    
56.                 $("#div1").text("客户端已发出数据包....."+packet);
    
57.             });
    
58.             //当客户端接收到任何数据包时发出。这包括来自订阅主题的信息包以及MQTT用于管理订阅和连接的信息包
    
59.             client.on("packetreceive",(packet)=>{
    
60.                 $("#div1").text("客户端已收到数据包....."+packet);
    
61.             });
    
62. 
    
63.             //成功连接后触发的回调
    
64.             client.on("connect",function (connack) {
    
65.                 $("#div1").text("成功连接上服务器"+new Date());
    
66.                 //订阅某主题
    
67.                 /**
    
68.                  * client.subscribe(topic/topic array/topic object, [options], [callback])
    
69.                  * topic:一个string类型的topic或者一个topic数组,也可以是一个对象
    
70.                  * options
    
71.                  */
    
72.                 client.subscribe(toppic,{qos:0});
    
73.                 //每隔2秒发布一次数据
    
74.                 //setInterval(publish,2000)
    
75.             });
    
76. 
    
77.             function publish() {
    
78.                 //发布数据
    
79.                 /**
    
80.                  * client.publish(topic,message,[options], [callback])
    
81.                  *
    
82.                  * message: Buffer or String
    
83.                  * options:{
    
84.                  * qos:0, //默认0
    
85.                  * retain:false, //默认false
    
86.                  * dup:false, //默认false
    
87.                  * properties:{}
    
88.                  * }
    
89.                  * callback:function (err){}
    
90.                  */
    
91.                 const message = "h5 message "+Math.random()+new Date();
    
92.                 client.publish(toppic,message,{qos:0});
    
93.                 $("#div2").text("客户端发布了数据:"+message);
    
94.             }
    
95. 
    
96.             //当客户端接收到发布消息时触发回调
    
97.             /**
    
98.              * topic:收到的数据包的topic
    
99.              * message:收到的数据包的负载playload
    
100.              * packet:收到的数据包
     
101.              */
     
102.             client.on('message', (topic, message,packet) => {
     
103.                         $("#div2").text("客户端收到订阅消息,topic="+topic+";消息数据:"+message+";数据包:"+packet);
     
104.                         var obj =JSON.parse(message);
     
105.                         $("#div3").text("温度："+obj.wendu+"℃;湿度："+obj.shidu+"%")
     
106.             });
     
107.                         ;
     
108.             //页面离开自动断开连接
     
109.             $(window).bind("beforeunload",()=>{
     
110.                 $("#div1").text("客户端窗口关闭,断开连接");
     
111.                 client.disconnect();
     
112.             })
     
113.     </script>
     
114.     </head>
     
115.     <body>
     
116. <div id="div1"></div>
     
117. <div id="div2"></div>
     
118. <div id="div3"></div>
     
119. </body>
     
120. </html>
     

复制代码

dudua

大神，膜拜。刚刚入坑！

dfbxh

你好，可以分享全部源码或者购买吗

My_N@me

18行那个DHT.h的库是哪个在哪里下的？？？

iamdai2000

error: unable to find string literal operator 'operator""wendu' with 'const char [3]', 'unsigned int' arguments
       String messageString ="{"wendu":"+ String(t)+","shidu": "+String(h)+"}";