准備工作
最近作比賽，需要用到物聯網平台，對於實時的系統來說，mqtt透傳是最好的選擇，而微信小程序的開發成本又很低廉，所以最終決定使用微信小程序+MQTT服務器的方式來實現，其中也踩了不少坑，所以就此分享一下搭建項目的全過程。
首先是需要准備的東西：
一台服務器（我用的是騰訊雲）
SSL證書（必須品，騰訊雲可以免費申請）
域名（也是必須品，因為微信小程序會檢測合法域名，不能直接掛IP）
mqtt.js第三方庫（后面會介紹怎么用）
MQTT服務器搭建
MQTT服務器搭建的過程請參考 ：mqtt+ssl服務搭建以及ws+wss支持 這篇文章，我就是一路按照這篇博文搭建的服務器。
證書選擇
下載的證書中可能含有阿帕奇、nginx等多個文件夾，部署MQTT服務器時使用的是阿帕奇（apache）文件中的
證書不完整
我從騰訊雲申請的證書，后來在小程序測試時會發生開發者工具中可以正常使用，但是真機調試就不行（選不選檢驗合法域名都不行），其實是因為所頒發的證書不完整的原因，可以通過以下方法解決：
進入SSL證書狀態監測網站：https://myssl.com/ssl.html，輸入自己的域名以及websocket+ssl的端口（按照上述文章是8081），點擊監測。
如果在降級原因中有證書鏈不完整的字樣，那么請進入證書鏈修補工具：https://myssl.com/chain_download.html
將生成的證書鏈復制替換原來三個文件中的第二個（2_www.qilv.group.crt）即可。
重啟服務器
重啟mqtt服務器可以使用如下方法：
查看mosquitto 進程
ps -aux | grep mosquitto
殺死進程
kill -9 15869
重啟
mosquitto -c /etc/mosquitto/mosquitto.conf -d
至此，服務器的搭建已經完成！
微信小程序使用mqtt
微信小程序使用mqtt是通過websocket來實現，需要用到mqtt.js這一個第三方庫。
mqtt.js下載
由於微信小程序不支持CDN（可能支持，反正我是不能用）,所以只能下載到你的項目里，地址：
正常版：https://unpkg.com/mqtt@2.18.8/dist/mqtt.js
mini版：https://unpkg.com/mqtt@2.18.8/dist/mqtt.min.js
創建mqtt連接
首先在app.js中，最上方（App({})的上方）添加代碼：
var mqtt = require("/utils/mqtt.js") //引入mqtt文件
//隨機生成字符串，因為clientId你設成一個固定字符串的話，當你編譯
代碼的時候就會以這個ID連接服務器，當預覽或者真機調試的時候還是這個
ID，就會發生ID沖突的問題，當時差點被這個不起眼的BUG整瘋
function randomString(len) {
len = len || 32;
var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
var maxPos = $chars.length;
var pwd = '';
for (let i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
}
//連接配置
const options = {
connectTimeout: 4000, //超時時間
clientId: randomString(30), //隨機生成ID
username: '', //用戶名
password: '', //密碼
}
接下來在App中添加小程序加載監聽函數：
onLaunch: function () {
let that = this
var client = mqtt.connect('wxs://www.xxx.email:8081', options) //你自己的域名
client.on('connect', (e) => {
console.log('成功連接服務器!')
})
client.subscribe('esp8266', {
qos: 0
}, function (err) {
if (!err) {
console.log("訂閱成功:esp8266")
}
})
client.on('message', function (topic, message, packet) {
that.globalData.mqttData = packet.payload.toString()
})
}
這樣，在全局變量中就儲存了服務器發來的消息，其他頁面均可讀取消息：
const app = getApp(); //引入全局變量
Page({
console.log(app.globalData.mqttData)
})
其他
mqtt.js需要注意的地方
var client = mqtt.connect('wxs://www.xxxx.email:8081', options)
使用時要注意 是wxs 而不是 wss，因為這個第三方庫的作者進行了一次封裝
mqtt.js的其他地方
請參考這片文章：在微信小程序中使用mqtt服務
合法域名問題
這個問題我也不太清楚，因為我一直沒有勾選不檢測合法域名的選項，現在補充一下如何添加合法域名：
打開微信小程序控制台頁面
依次點擊：開發-開發設置-服務器域名
添加服務器地址 ：www.xxx.email:8081；即可
————————————————
版權聲明：本文為CSDN博主「白白的昕」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_43554847/article/details/108587422