這篇文章主要講解了uniapp打包成微信小程序中如何使用 MQTT，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。愛掏網(wǎng) - it200.com
最近在uniapp打包成微信小程序的項(xiàng)目中第一次用到了MQTT。愛掏網(wǎng) - it200.com使用比較簡(jiǎn)單，但是還是遇到了一些問題。愛掏網(wǎng) - it200.com在此記錄一下。愛掏網(wǎng) - it200.com
官方文檔：MQTT Github
官方MQTT測(cè)試工具：MQTTX。愛掏網(wǎng) - it200.com測(cè)試工具使用說明
MQTT的js文件：mqtt.min.js
先上一點(diǎn)注意事項(xiàng)：
（1）MQTT.js 一個(gè) MQTT 協(xié)議的客戶端庫，用 Javascript 編寫，可用于 Node.js 和瀏覽器。愛掏網(wǎng) - it200.com在 Node.js 端可以通過全局安裝使用命令行連接，同時(shí)還支持 MQTT ，MQTT TLS 證書連接；值得一提的是 MQTT.js 還對(duì)微信小程序有較好的支持。愛掏網(wǎng) - it200.com
（2）MQTT可以通過三種方式連接，TCP直連, TLS和WebSocket，但是Javascript使用 TCP 只能通過 ws 即 Websocket 鏈接。愛掏網(wǎng) - it200.com所以如果服務(wù)器是TCP直連，客戶端是肯定連不上的，會(huì)報(bào) Error in connection establishment 的錯(cuò)誤。愛掏網(wǎng) - it200.com所以客戶端協(xié)議只能是ws，wss，wxs（微信）
（3）WebSocket 是一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。愛掏網(wǎng) - it200.com作為一種通信協(xié)議，其使用 ws(非加密)、wss(SSL 加密) 作為協(xié)議標(biāo)識(shí)。愛掏網(wǎng) - it200.comMQTT.js 客戶端支持多種協(xié)議，連接地址需指明協(xié)議類型；
（4）ws: 未加密的 WebSocket 連接，一般使用8083端口。愛掏網(wǎng) - it200.comwss: 加密的 WebSocket 連接，一般使用8084端口。愛掏網(wǎng) - it200.commqtt: 未加密的 TCP 連接，一般使用1883端口。愛掏網(wǎng) - it200.commqtts: 加密 TCP 連接。愛掏網(wǎng) - it200.com
貼一下代碼：
import $mqtt from &＃39;./mqtt.min.js&＃39;;
const mqttOptiOns= {
keepalive: 30,
clean: false,
connectTimeout: 5000, // Timeout
clientId: uni.getStorageSync(&＃39;clientId&＃39;),
// username: &＃39;test&＃39;,
// password: &＃39;test&＃39;,
}
const cOnnectUrl= `${mqttHost}:${mqttPort}/mqtt`;
// #ifdef H5
var client = $mqtt.connect(&＃39;wss://&＃39; + connectUrl, mqttOptions);
// #endif
// #ifdef MP-WEIXIN||APP-PLUS
var client = $mqtt.connect(&＃39;wxs://&＃39; + connectUrl, mqttOptions);
// #endif
client.on(&＃39;connect&＃39;, () => {
console.log(&＃39;connect&＃39;)
// 這是為了給自己發(fā)條消息，其它無作用
client.subscribe(&＃39;test&＃39;, (err) => {
if (!err) {
client.publish(&＃39;test&＃39;, &＃39;{}&＃39;)
}
})
});
// 自動(dòng)重連
client.on(&＃39;reconnect&＃39;, (msg) => {
console.log(&＃39;reconnect&＃39;, msg)
});
// 錯(cuò)誤
client.on(&＃39;error&＃39;, () => {
console.log(&＃39;error&＃39;)
});
// 斷開
client.on(&＃39;end&＃39;, () => {
console.log(&＃39;end&＃39;)
});
// 掉線
client.on(&＃39;offline&＃39;, (msg) => {
console.log(&＃39;offline&＃39;,msg)
});
// 收到消息
client.on(&＃39;message&＃39;, (topic, message) => {
// 把a(bǔ)rrayBuffer轉(zhuǎn)成字符串
let encodedString = String.fromCharCode.apply(null, new Uint8Array(message));// 全局發(fā)送消息
uni.$emit(&＃39;sendTopicMsg&＃39;,encodedString);
console.log(encodedString)
})
// 全局監(jiān)聽是否有關(guān)閉mqtt的消息的事件
uni.$on(&＃39;closeMqtt&＃39;,() => {
client.end(true); // 主動(dòng)斷開連接
})
說明：
（1） 配置項(xiàng)里的 keepAlive 指的是心跳時(shí)間。愛掏網(wǎng) - it200.com以秒為單位。愛掏網(wǎng) - it200.com定義服務(wù)端從客戶端接收到消息的最大間隔時(shí)間。愛掏網(wǎng) - it200.com可以設(shè)置為0，表示客戶端一直不斷開，除非主動(dòng)斷開。愛掏網(wǎng) - it200.com
（2） clean 設(shè)置為false，是為了讓客戶端掉線的時(shí)候，服務(wù)器必須在客戶端斷開之后繼續(xù)存儲(chǔ)/保持客戶端的訂閱狀態(tài)。愛掏網(wǎng) - it200.com即當(dāng)為true的時(shí)候，如果掉線了，服務(wù)端會(huì)清理鏈接狀態(tài)的數(shù)據(jù)和內(nèi)容。愛掏網(wǎng) - it200.com當(dāng)為false的時(shí)候，服務(wù)端會(huì)保存消息發(fā)送期間，鏈接斷開導(dǎo)致發(fā)送失敗的消息。愛掏網(wǎng) - it200.com這樣連上的時(shí)候就會(huì)自動(dòng)推送到訂閱的客戶端。愛掏網(wǎng) - it200.com
（3） 如果連接需要驗(yàn)證用戶名和密碼，則需要加上username和password字段。愛掏網(wǎng) - it200.com
（4） 微信小程序使用的協(xié)議，如果不是加密的，則是 wss，如果是加密的，就是 wxs。愛掏網(wǎng) - it200.comweb端，一般不加密就是 wx，加密就是wss。愛掏網(wǎng) - it200.com
（5） 前端收到的消息是 arrayBuffer 格式的，需要轉(zhuǎn)成字符串格式，如果帶有中文，可能轉(zhuǎn)成字符串會(huì)亂碼。愛掏網(wǎng) - it200.com可以使用let decodeString = decodeURIComponent(escape((encodedString))) 來避免中文亂碼。愛掏網(wǎng) - it200.com或者是網(wǎng)上通過移位轉(zhuǎn)成中文的方法來解決。愛掏網(wǎng) - it200.com
（6） clientId 是使用Math.random().toString(36).substr(3,自定義長度) 來生成自定義長度的的唯一id。愛掏網(wǎng) - it200.com
應(yīng)該是免費(fèi)的測(cè)試MQTT消息的鏈接：o(∩_∩)o
| 協(xié)議 | 地址 | 端口 | 路徑 | 證書 |
| 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 這個(gè)直接在MQTTX測(cè)試工具里面 選擇 SSL/TLS 勾選為true時(shí)即可選擇。愛掏網(wǎng) - it200.com
（2） 測(cè)試的時(shí)候，先填好內(nèi)容，然后鏈接上的時(shí)候，再添加一個(gè)訂閱，Topic就填一會(huì)你需要發(fā)送消息的Topic，這樣當(dāng)你模擬服務(wù)器發(fā)送消息的時(shí)候，MQTTX里面也會(huì)收到你剛才發(fā)送的內(nèi)容，這樣就是連通了。愛掏網(wǎng) - it200.com
開發(fā)過程中遇到的問題：
（1）如果出現(xiàn)failed: Connection closed before receiving a handshake response這個(gè)錯(cuò)誤。愛掏網(wǎng) - it200.com說明 服務(wù)端的 mqtt 協(xié)議和客戶端的協(xié)議不一樣，就比如python用的是基于 tcp 的 mqtt ，js是基于websocket 的 mqtt，都不能達(dá)成握手的操作。愛掏網(wǎng) - it200.com出現(xiàn)這個(gè)的問題應(yīng)該是：服務(wù)端使用了1883這個(gè)端口，而客戶端也是用這個(gè)端口，就導(dǎo)致這個(gè)問題。愛掏網(wǎng) - it200.com正確的應(yīng)該是：客戶端（js）應(yīng)該使用8083端口（未加密）。愛掏網(wǎng) - it200.com
（2） 最初我設(shè)置心跳時(shí)間是3秒，在微信開發(fā)者工具，或者H5端的時(shí)候，是沒有問題的。愛掏網(wǎng) - it200.com但是在小程序真機(jī)調(diào)試?yán)铮?dāng)小程序切換到后臺(tái)，差不多5s就會(huì)自動(dòng)斷開，然后一直重連，直到切換回小程序，重連成功。愛掏網(wǎng) - it200.com而且有時(shí)候還會(huì)連續(xù)斷開和重連。愛掏網(wǎng) - it200.com自動(dòng)斷網(wǎng)這個(gè)原因，小程序官網(wǎng)做了說明的：超過5s斷網(wǎng)說明在第二條 網(wǎng)絡(luò)請(qǐng)求 - 使用限制里面就說明了，小程序的機(jī)制，限制了切換到后臺(tái)之后網(wǎng)絡(luò)的處理。愛掏網(wǎng) - it200.com所以把心跳時(shí)間改為30s，讓 mqtt 30秒之后再自動(dòng)重連。愛掏網(wǎng) - it200.com但是這樣只是為了讓體驗(yàn)稍微好一點(diǎn)，不會(huì)出現(xiàn)切換出去5s就斷開鏈接，再切回來一直提示重連的問題。愛掏網(wǎng) - it200.com不過可以把心跳時(shí)間改為0，表示一直連接不斷開。愛掏網(wǎng) - it200.com
總結(jié)：
（1）以上對(duì)mqtt的了解也只是一知半解，還沒弄明白這里的心跳時(shí)間，和 TCP/IP 的心跳機(jī)制是不是一樣的。愛掏網(wǎng) - it200.com超過心跳時(shí)間，能不能讓客戶端不掉線，或者有沒有更好的解決離線的辦法。愛掏網(wǎng) - it200.com
（2）而且還有很多特性都沒用到，比如will遺愿標(biāo)志，專門用來處理客戶端斷開連接的配置項(xiàng)。愛掏網(wǎng) - it200.com
（3）由于這個(gè)項(xiàng)目都是用的Qos0的消息，都不知道與Qos1，Qos2的區(qū)別是什么。愛掏網(wǎng) - it200.com
看完上述內(nèi)容，是不是對(duì)uniapp打包成微信小程序中如何使用 MQTT有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注編程筆記行業(yè)資訊頻道。愛掏網(wǎng) - it200.com