uniapp,微信小程式中使用 MQTT

最近在uniapp打包成微信小程式的項目中第一次用到了MQTT。使用比較簡單,但是還是遇到了一些問題。在此記錄一下。

官方文檔:MQTT Github

官方MQTT測試工具:MQTTX測試工具使用說明

MQTT的js文件:mqtt.min.js

 

先上一點注意事項:

(1) MQTT.js 一個 MQTT 協議的客戶端庫,用 JavaScript 編寫,可用於 Node.js 和瀏覽器。在 Node.js 端可以通過全局安裝使用命令行連接,同時還支援 MQTT ,MQTT TLS 證書連接;值得一提的是 MQTT.js 還對微信小程式有較好的支援。

(2) MQTT可以通過三種方式連接,TCP直連, TLS和WebSocket,但是JavaScript使用 TCP 只能通過 ws 即 Websocket 鏈接。所以如果伺服器是TCP直連,客戶端是肯定連不上的,會報 Error in connection establishment 的錯誤。所以客戶端協議只能是ws,wss,wxs(微信)

(3) WebSocket 是一種在單個 TCP 連接上進行全雙工通訊的協議。作為一種通訊協議,其使用 ws(非加密)、wss(SSL 加密) 作為協議標識。MQTT.js 客戶端支援多種協議,連接地址需指明協議類型;

(4) ws: 未加密的 WebSocket 連接,一般使用8083埠。wss: 加密的 WebSocket 連接,一般使用8084埠。mqtt: 未加密的 TCP 連接,一般使用1883埠。mqtts: 加密 TCP 連接。

 

貼一下程式碼:

import $mqtt from './mqtt.min.js';

const mqttOptions = { keepalive: 30, clean: false, connectTimeout: 5000, // Timeout clientId: uni.getStorageSync('clientId'), // username: 'test', // password: 'test', } const connectUrl = `${mqttHost}:${mqttPort}/mqtt`; // #ifdef H5 var client = $mqtt.connect('wss://' + connectUrl, mqttOptions); // #endif // #ifdef MP-WEIXIN||APP-PLUS var client = $mqtt.connect('wxs://' + connectUrl, mqttOptions); // #endif client.on('connect', () => { console.log('connect')
  // 這是為了給自己發條消息,其它無作用 client.subscribe('test', (err) => { if (!err) { client.publish('test', '{}') } }) }); // 自動重連 client.on('reconnect', (msg) => { console.log('reconnect', msg) }); // 錯誤 client.on('error', () => { console.log('error') }); // 斷開 client.on('end', () => { console.log('end') }); // 掉線 client.on('offline', (msg) => { console.log('offline',msg) }); // 收到消息 client.on('message', (topic, message) => { // 把arrayBuffer轉成字元串 let encodedString = String.fromCharCode.apply(null, new Uint8Array(message));// 全局發送消息  uni.$emit('sendTopicMsg',encodedString);
   console.log(encodedString) }) // 全局監聽是否有關閉mqtt的消息的事件 uni.$on('closeMqtt',() => { client.end(true); // 主動斷開連接 })

說明:

(1) 配置項里的 keepAlive 指的是心跳時間。以秒為單位。定義服務端從客戶端接收到消息的最大間隔時間。可以設置為0,表示客戶端一直不斷開,除非主動斷開。

(2) clean 設置為false,是為了讓客戶端掉線的時候,伺服器必須在客戶端斷開之後繼續存儲/保持客戶端的訂閱狀態。即當為true的時候,如果掉線了,服務端會清理鏈接狀態的數據和內容。當為false的時候,服務端會保存消息發送期間,鏈接斷開導致發送失敗的消息。這樣連上的時候就會自動推送到訂閱的客戶端。

(3) 如果連接需要驗證用戶名和密碼,則需要加上username和password欄位。

(4) 微信小程式使用的協議,如果不是加密的,則是 wss,如果是加密的,就是 wxs。web端,一般不加密就是 wx,加密就是wss

(5) 前端收到的消息是 arrayBuffer 格式的,需要轉成字元串格式,如果帶有中文,可能轉成字元串會亂碼。可以使用   let decodeString = decodeURIComponent(escape((encodedString)))  來避免中文亂碼。或者是網上通過移位轉成中文的方法來解決。

(6) clientId 是使用  Math.random().toString(36).substr(3,自定義長度)  來生成自定義長度的的唯一id。

 

應該是免費的測試MQTT消息的鏈接: o(∩_∩)o  

協議 地址 路徑 證書
mqtt broker.hivemq.com 8000
mqtt broker.emqx.io 1883
ws test.mosquitto.org 8080 /mqtt
wss test.mosquitto.org 8081 /mqtt CA signed server

 

 

 

 

 

 

(1) CA signed server 這個直接在MQTTX測試工具裡面 選擇 SSL/TLS 勾選為true時即可選擇。

(2) 測試的時候,先填好內容,然後鏈接上的時候,再添加一個訂閱,Topic就填一會你需要發送消息的Topic,這樣當你模擬伺服器發送消息的時候,MQTTX裡面也會收到你剛才發送的內容,這樣就是連通了。

 

開發過程中遇到的問題:

(1) 如果出現 failed: Connection closed before receiving a handshake response  這個錯誤。說明 服務端的 mqtt 協議和客戶端的協議不一樣,就比如 python用的是基於 tcp 的 mqtt ,js是基於websocket 的 mqtt ,都不能達成握手的操作。出現這個的問題應該是:服務端使用了 1883 這個埠,而客戶端也是用這個埠,就導致這個問題。正確的應該是:客戶端(js)應該使用 8083 埠(未加密)。

(2) 最初我設置心跳時間是3秒,在微信開發者工具,或者H5端的時候,是沒有問題的。但是在小程式真機調試里,當小程式切換到後台,差不多5s就會自動斷開,然後一直重連,直到切換回小程式,重連成功。而且有時候還會連續斷開和重連。自動斷網這個原因,小程式官網做了說明的:超過5s斷網說明 在第二條 網路請求 – 使用限制裡面就說明了,小程式的機制,限制了切換到後台之後網路的處理。所以把心跳時間改為30s,讓 mqtt 30秒之後再自動重連。但是這樣只是為了讓體驗稍微好一點,不會出現切換出去5s就斷開鏈接,再切回來一直提示重連的問題。不過可以把心跳時間改為0,表示一直連接不斷開。

 

總結:

(1)以上對mqtt的了解也只是一知半解,還沒弄明白這裡的心跳時間,和 TCP/IP 的心跳機制是不是一樣的。超過心跳時間,能不能讓客戶端不掉線,或者有沒有更好的解決離線的辦法。

(2)而且還有很多特性都沒用到,比如will遺願標誌,專門用來處理客戶端斷開連接的配置項。

(3)由於這個項目都是用的Qos0的消息,都不知道與Qos1,Qos2的區別是什麼。

先暫時記錄到這裡,後面弄懂了再補充。