ESA2GJK1DH1K升級篇: 網頁實現MQTT控制- 網頁版MQTT通信控制ESP8266設備,網頁版MQTT連接阿里雲通信

 

 

前言

　　使用基礎篇的這節代碼測試

        https://www.cnblogs.com/yangfengwu/p/11760590.html 

　　請先按照文章測試好通信控制

提示

　　設備訂閱的主題 user/Wi-Fi的MAC地址

　　設備發布的主題 device/Wi-Fi的MAC地址

　　列如:

　　

 

 

　　那么我的

　　設備訂閱的主題:user/dc:4f:22:10:b8:42

　　設備發布的主題:device/dc:4f:22:10:b8:42

 

網頁訂閱和發布對應填寫

　　http://47.92.31.46/MqttDebugWeb   這是我的, 

　　

 

 

 

 

　　現在網頁端的MQTT調試助手就獲取到了設備發送的溫濕度數據

 

控制繼電器吸合

　　{"data":"switch","bit":"1","status":"1"}

　　

 

 

 

　　

 

 

 

控制繼電器斷開

　　{"data":"switch","bit":"1","status":"0"}

　　

 

 

 

 

 

 

　　

 

 

 

使用網頁遠程控制家電

最大支持10A,注意安全!

 

 

連接阿里雲平台

　　一,提示:請根據基礎篇 連接阿里雲平台的內容,獲取自己的相關的MQTT信息

　　https://www.cnblogs.com/yangfengwu/p/11828777.html

　　https://www.cnblogs.com/yangfengwu/p/11828788.html

　　https://www.cnblogs.com/yangfengwu/p/11828851.html

 

　　以下是我自己的

　　IP地址:     a1m7er1nJbQ.iot-as-mqtt.cn-shanghai.aliyuncs.com

　　端口號:    443

　　Client ID: 112233445566|securemode=3,signmethod=hmacsha1|

　　用戶名:    Mqtt&a1m7er1nJbQ

　　密碼:       8B286A9E99B49E19A0964589E8F3C2DBB1C1A8DE

　

　　提示:使用WebSocket連接注意下連接的IP地址填寫 ws://(IP地址):443/mqtt

　　1.    IP地址填寫:  ws://a1m7er1nJbQ.iot-as-mqtt.cn-shanghai.aliyuncs.com:443/mqtt

　　　　或者加上SSL:     wss://a1m7er1nJbQ.iot-as-mqtt.cn-shanghai.aliyuncs.com:443/mqtt

　　2.使用TCP方式連接是1883,而使用WebSocket連接是443,阿里雲使用的是443端口應該是為了便於小程序連接通信

 

 

　　二,測試連接(用戶根據自己的填寫)

 

　　　　

 

 

 

　　三,接收阿里雲的消息

　　　　訂閱的主題 /a1m7er1nJbQ/Mqtt/user/get

　　　　

 

 

 

 

　　　　

 

 

 

 

　　四,發送消息給阿里雲

 

　　　　/sys/a1m7er1nJbQ/Mqtt/thing/event/property/post