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


 

 

 

前言

  咱的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服務器里面咱就可以遠程訪問了

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM