微信小程序连接EMQX服务器 .pdfVIP

微信⼩程序连接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代码

importmqttfrom../../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}`)

})