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

效果展示

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服务器的内容了，希望对读者有些许帮助。