微信公众号开发

微信小程序连接EMQX服务器

本文主要是介绍微信小程序连接EMQX服务器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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

效果展示

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();
    },

微信小程序连接EMQX服务器

连接前先为EMQX创建client端

这里我已经新建好了,点击新建用户,输入小程序对应的username和password即可创建。

回到websocket页面,应该可以看到小程序已经连接了EMQX服务器。

接下来实现EMQX向微信小程序发消息。首先点击订阅,(主题要和小程序端匹配)小程序使用上面的程序应该完成了连接和订阅testtopic/miniprogram这个主题,点击订阅后实际订阅了所有testtopic下的主题。在消息面板中更改主题为testtopic/miniprogram,编辑消息,消息的格式要为json,最后点击发送,应该可以在微信小程序控制台收到发送的消息。至于微信小程序如何向EMQX服务端发送消息,在合适的位置使用this.public即可。注意发布时接收方要订阅相应主题

以上就是微信小程序连接EMQX服务器的内容了,希望对读者有些许帮助。

这篇关于微信小程序连接EMQX服务器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!