微信小程序连接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服务器的内容了,希望对读者有些许帮助。
标签:微信,程序,pem,client,EMQX,服务器,data 来源: https://www.cnblogs.com/yl-blogs/p/15600039.html