微信小程序连接EMQX服务器

2022-07-22 23:14:45

最近在做微信小程序连接物联网的项目，奈何网上资料总是与需求不尽匹配，在不断实验中终于算是成功了，在此稍作记录。

效果展示

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('已发送消息')
    },    
    onl oad: function (options) {
        this.connect();
        this.subscribe();
    },