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

官方文檔：MQTT Github

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

MQTT的js文件：mqtt.min.js

先上一點注意事項：

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

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

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

（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')
　　// 這是為了給自己發(fā)條消息，其它無作用
  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轉(zhuǎn)成字符串
  let encodedString = String.fromCharCode.apply(null, new Uint8Array(message));// 全局發(fā)送消息
 　uni.$emit('sendTopicMsg',encodedString);
　　 console.log(encodedString)
})

// 全局監(jiān)聽是否有關(guān)閉mqtt的消息的事件
uni.$on('closeMqtt',() => {
  client.end(true); // 主動斷開連接
})

說明：

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

（2） clean 設(shè)置為false，是為了讓客戶端掉線的時候，服務(wù)器必須在客戶端斷開之后繼續(xù)存儲/保持客戶端的訂閱狀態(tài)。即當為true的時候，如果掉線了，服務(wù)端會清理鏈接狀態(tài)的數(shù)據(jù)和內(nèi)容。當為false的時候，服務(wù)端會保存消息發(fā)送期間，鏈接斷開導(dǎo)致發(fā)送失敗的消息。這樣連上的時候就會自動推送到訂閱的客戶端。

（3） 如果連接需要驗證用戶名和密碼，則需要加上username和password字段。

（4） 微信小程序使用的協(xié)議，如果不是加密的，則是 wss，如果是加密的，就是 wxs。web端，一般不加密就是 wx，加密就是wss。

（5） 前端收到的消息是 arrayBuffer 格式的，需要轉(zhuǎn)成字符串格式，如果帶有中文，可能轉(zhuǎn)成字符串會亂碼?？梢允褂胠et decodeString = decodeURIComponent(escape((encodedString))) 來避免中文亂碼?；蛘呤蔷W(wǎng)上通過移位轉(zhuǎn)成中文的方法來解決。

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

應(yīng)該是免費的測試MQTT消息的鏈接：o(∩_∩)o

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

（2） 測試的時候，先填好內(nèi)容，然后鏈接上的時候，再添加一個訂閱，Topic就填一會你需要發(fā)送消息的Topic，這樣當你模擬服務(wù)器發(fā)送消息的時候，MQTTX里面也會收到你剛才發(fā)送的內(nèi)容，這樣就是連通了。

開發(fā)過程中遇到的問題：

（1）如果出現(xiàn)failed: Connection closed before receiving a handshake response這個錯誤。說明 服務(wù)端的 mqtt 協(xié)議和客戶端的協(xié)議不一樣，就比如python用的是基于 tcp 的 mqtt ，js是基于websocket 的 mqtt，都不能達成握手的操作。出現(xiàn)這個的問題應(yīng)該是：服務(wù)端使用了1883這個端口，而客戶端也是用這個端口，就導(dǎo)致這個問題。正確的應(yīng)該是：客戶端（js）應(yīng)該使用8083端口（未加密）。

（2） 最初我設(shè)置心跳時間是3秒，在微信開發(fā)者工具，或者H5端的時候，是沒有問題的。但是在小程序真機調(diào)試里，當小程序切換到后臺，差不多5s就會自動斷開，然后一直重連，直到切換回小程序，重連成功。而且有時候還會連續(xù)斷開和重連。自動斷網(wǎng)這個原因，小程序官網(wǎng)做了說明的：超過5s斷網(wǎng)說明在第二條 網(wǎng)絡(luò)請求 - 使用限制里面就說明了，小程序的機制，限制了切換到后臺之后網(wǎng)絡(luò)的處理。所以把心跳時間改為30s，讓 mqtt 30秒之后再自動重連。但是這樣只是為了讓體驗稍微好一點，不會出現(xiàn)切換出去5s就斷開鏈接，再切回來一直提示重連的問題。不過可以把心跳時間改為0，表示一直連接不斷開。

總結(jié)：

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

（2）而且還有很多特性都沒用到，比如will遺愿標志，專門用來處理客戶端斷開連接的配置項。

（3）由于這個項目都是用的Qos0的消息，都不知道與Qos1，Qos2的區(qū)別是什么。

到此這篇關(guān)于uniapp,微信小程序中使用 MQTT的文章就介紹到這了,更多相關(guān)微信小程序MQTT內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論