微信硬件平臺（七） 設備控制控制面板-網頁sokect-mqtt長鏈接

給微信硬件設備添加咱們本身的控制面板。

 

主要問題：

1 要保證長鏈接，這樣面板能夠實時交互陰間設備，http一次性的鏈接模式通訊不行。

  面板必須是網頁化的，網頁就能夠操做交互。不用APP和小程序。

2 長鏈接須要websocket技術，能夠保證長鏈接。

3  websocket技術雖然保證長鏈接，可是用戶和設備管理這個大後臺須要個總管。 直接上MQTT服務器省去各類管理，一個設備對應一個通訊話題，並且擁有websocket接口。

4 本身的服務器必須單獨開一個php後臺服務，2個小時請求一次微信token。

  當設備須要直接主動發消息給用戶的時候， 利用token調用以下幾個微信API

•   獲取設備主人open_ID :   查詢設備綁定的是誰
•  藉助公衆號給指定用戶(通常是主人)推送消息 。  例如警報消息，用戶此時沒有打開網頁在實時控制設備， 可能多我的都綁定了，都須要發送。   

 

 

 本來想着給微信雲所有代管上面全部流程，然而它的硬件直連SDK都被封裝了，根本不知道調用微信的什麼API通訊。

並且考慮到後期確定收費（用人家服務器），。

 

 

1 修改控制面板連接

 

 

 

 

2 控制界面實現

參看：http://www.hivemq.com/demos/websocket-client/

下載這個網頁，放在你服務器上填寫的地址，這是一個MQTT網頁端控制界面，用來調試。

連接：https://pan.baidu.com/s/1CxHc-nc3dfFyaToce_xFSQ
提取碼：v2wd

 

 

 

 

2-1 網頁前端。有個好臉蛋， 本身根據需求改,空調的，燈的。  

2-2 網頁後面須要創建 websocket，和mqtt服務器通訊。   

      通訊的時候，一個設備ID對應兩個個MQTT通訊話題

      接收話題   用戶ID/設備ID/r

      發送話題   用戶ID/設備ID/s

      （設備ID在用戶點擊設備欄-打開設備的時候，一併送到本身的服務器url了，本身的服務器接收到之後拿出來，用於生成網頁返回給用戶。）

個人微信已經綁定了三個設備

點擊設備

 

 本身的服務器接收到這個請求後，寫個php服務，拿出設備ID，用於生成網頁。

用戶打開控制頁面，發送消息和接收消息。

事實上，至關於返回一個mqtt的網頁通訊控制端。（代替APP和小程序）

 

 好了，通訊打通了，接下來須要美化界面。

同時，自動根據設備ID填入參數，生成MqTT連接。

 

最原始的MQTT網頁客戶端控制，在此基礎上修改。

入手js大坑瞭解下。

 

直接右鍵下載這個網頁，修改

 

1 訂閱按鈕處要修改，

點擊訂閱本應該出現

可是部署在本身的服務器上就跳出去了別的網站。

查看代碼

 data就是這個跳出來的選擇框，本應該業內跳轉到這

可是在   href= 後面原來還加了原網址的的URL，  直接刪了，保留  #data。

 

--問題解決參考1-----------------------------------------------------------------------------------------------------------------------------------------

-問題解決參考2--------------------------------------------------------------------------------------------------------------------------------

 ----------------------------------------------------------------------------------------------------------------------------------------------

本身MQTT服務器自帶的網頁控制（找不到這個源文件）

還有一個版本，好像是日本網友寫的，然而沒法進行用戶帳號密碼自定義寫入，鏈接不上我開啓認證的MQTT服務器，捨棄了。