ESA2GJK1DH1K升級篇: 引入網頁實現MQTT控制- 網頁實現MQTT通訊入門

• 2019 年 12 月 25 日
• 筆記

前言

　　咱的MQTT伺服器可以連接很多設備,這就涉及到管理

　　現在做的項目大部分人都會選擇用網頁進行管理所有的設備.

　　不過在升級篇咱也只是引入網頁實現MQTT通訊控制,還做不到管理的程度

　　實際上要想讓網頁管理設備,首先網頁必須和用戶綁定的設備掛鉤,那麼必須有資料庫

　　所以咱們會在數據篇或者安全篇做一套網頁的管理軟體,用來管理咱所有的MQTT設備

　　之所以在升級篇引入網頁控制,是因為正好升級篇引入了Web伺服器

　　這個時候趁熱打鐵!

　　後面咱會把網頁嵌入到微信公眾號裡面,咱直接用微信公眾號就可以實現MQTT控制設備

　　不過要等我寫到微信公眾號篇,其實我想提供給大家的有很多很多.

　　我不期望大家能夠把所有的源碼學會,我希望大家的腦海里能透徹的明白一切的一切是如何做到的!

嘮叨的有點多

　　如果想學習網頁的基礎: https://www.cnblogs.com/yangfengwu/category/1587497.html

　　趕緊的打開這個軟體

　　建一個html

下載網頁實現MQTT的js包

https://docs.emqx.io/sdk_tools?category=MQTT_Clients   下載鏈接

　　咱使用這個

關於js包

paho-mqtt.js  完整功能

paho-mqtt-min.js  不支援SSL

咱用 paho-mqtt.js

拷貝到自己的html目錄下

引入js包

<script src="paho-mqtt.js" type="text/javascript"></script>

 官方給了例子

https://www.eclipse.org/paho/clients/js/

咱直接拷貝過來

修改下鏈接的IP地址和埠號

API介紹  https://www.eclipse.org/paho/files/jsdoc/index.html

注:MQTT實現WebSocket通訊的埠號是 8083

測試

結語

最終大家做好了這個html,直接放到雲端的Web伺服器裡面咱就可以遠程訪問了