最近在做微信小程序連接物聯網的項目，奈何網上資料總是與需求不盡匹配，在不斷實驗中終於算是成功了，在此稍作記錄。
效果展示
EMQX服務端配置
主機地址替換為服務器域名，要是沒有ICP備案的話就使用WS通信，即使用8083端口，點擊上圖連接即可。
如果經過了備案，並且獲得了SSL證書，可以勾選SSL，此時通過WSS通信，使用8084端口。
注意：服務器一定要放行相關端口！查看防火牆或安全規則確認端口打開情況。
如果想使用WSS通信，需要如下的額外配置。
EMQX部署證書步驟如下：
在證書頒發網站下載xxx.pem和xxx.key文件，重命名為cert.pem和key.pem，（.key后綴變更為.pem無妨，其內容不會改變），替換EMQX安裝路徑下etc/certs/cert.pem和key.pem。也可以選擇更改etc/emqx.conf中listener.wss.externel.keyfile和listener.wss.externel.certfile，均需以pem為后綴。
微信小程序域名設置步驟如下：
進入微信公眾平台，選擇開發管理，開發設置，修改socket合法域名，保留wss://，后面不要加端口。
之后清除微信小程序緩存，在詳情，項目配置中可看到更改已生效。
微信小程序部分代碼
下面為mqtt通信相關js代碼
import mqtt from '../../utils/mqtt.min.js';
Page({
/**
* 頁面的初始數據
*/
data: {
client: 'wxapp',
host: 'x.x.x.x:8083',
/*
注意這里使用8083端口，按照需求決定是否更改8084。x.x.x.x可以直接替換為域名，填寫域名綁定的公網IP也可。
*/
topic: 'testtopic/miniprogram',
msg: '',
mqttOptions: {
protocolVersion: 4,
clientId: 'wxapp',
clean: true,
password: 'wxapp',//自定義，與EMQX服務器配置相同均可
username: 'wxapp',//自定義，與EMQX服務器配置相同均可
reconnectPeriod: 1000,
connectTimeout: 30 * 1000,
resubscribe: true // 如果連接斷開並重新連接，則會再次自動訂閱已訂閱的主題（默認true）
},
},
setHost(e) {
this.setData({
host: e,
})
},
setTopic(e) {
this.setData({
topic: e,
})
},
setMsg(e) {
this.setData({
msg: e,
})
},
connect() {
this.data.client = mqtt.connect(`wx://${this.data.host}/mqtt`, this.data.mqttOptions)
/*
注意上面是wx://，使用8083端口，如果使用8084端口，需要改為wxs://
*/
this.data.client.on('connect', () => {
console.log('連接成功')
this.data.client.on('message', (topic, payload) => {
console.log(`收到 Topic: ${topic}, Payload: ${payload}`)
})
this.data.client.on('error', (error) => {
console.log('error')
})
this.data.client.on('reconnect', () => {
console.log('Reconnecting...')
})
this.data.client.on('offline', (errr) => {
console.log('Offline')
})
})
},
disconnect() {
this.data.client.end()
this.setData({
btnText: '連接',
})
wx.showToast({
title: '斷開連接成功'
})
},
subscribe() {
this.data.client.subscribe(this.data.topic)
wx.showToast({
title: `主題訂閱成功`
})
},
unsubscribe() {
this.data.client.unsubscribe(this.data.topic)
wx.showToast({
title: `取消訂閱成功`
})
},
publish() {
this.data.client.publish(this.data.topic, this.data.msg)
console.log('已發送消息')
},
onLoad: function (options) {
this.connect();
this.subscribe();
},
微信小程序連接EMQX服務器
連接前先為微信小程序創建client端
這里我已經新建好了，點擊新建用戶，輸入小程序對應的username和password即可創建。
回到websocket頁面，應該可以看到小程序已經連接了EMQX服務器。
接下來實現EMQX向微信小程序發消息。首先點擊訂閱，（主題要和小程序端匹配）小程序使用上面的程序應該完成了連接和訂閱testtopic/miniprogram這個主題，點擊訂閱后實際訂閱了所有testtopic下的主題。在消息面板中更改主題為testtopic/miniprogram,編輯消息，消息的格式要為json，最后點擊發送，應該可以在微信小程序控制台收到發送的消息。至於微信小程序如何向EMQX服務端發送消息，在合適的位置使用this.public即可。注意發布時接收方要訂閱相應主題。
以上就是微信小程序連接EMQX服務器的內容了，希望對讀者有些許幫助。