最近写了一个项目,其中有个页面需要用到mqtt来通信,以下就是来自我的总结。
先下载mqttjs
yarn add mqtt mqtt@3.0.0
为什么是3.0版本,网上说高版本连接不稳定,那就用稳定版吧;
mqtt在线测试地址,自带一个可连接的mqtt地址;
- 先要一个mqtt的地址:
export const url = '124.**.***.67:8000/mqtt' //mqtt地址端口
记住要他们配置 broker 开 ws 层,终端是tcp,不然也连不通,/mqtt 是必须的,
- mqtt的配置项
// 获取clientId //h5是获取不到的,我这是只用于APP
// const clientId = plus.push.getClientInfo().clientid;
//配置项
export const options = {
connectTimeout: 5000,
clientId, //唯一ID
username, //账号 非必填 看你们设置没有
password, //密码 非必填
clean: true,
}
-
到使用mqtt的页面引用,
- 引入相关文件
import { url, options, } from '@/utils/mqtt.js'; var mqtt = require('mqtt/dist/mqtt.js') //申明一个全局变量 var client;
这里最好用require引入。
-
创建一个方法
//发送信息 sendMessage(){ //this.switches 主题名称。buffer 发送的参数。可以是字符串 也可以是 Buffer; client.publish(this.switches, buffer, (e) => { console.log(e) }) }, connect() { var that = this //h5的连接是 'ws://' + url。 // #ifdef H5 client = mqtt.connect('ws://' + url, options) // #endif //app的连接是 'wx://' + url。 //#ifdef MP-WEIXIN||APP-PLUS client = mqtt.connect('wx://' + url, options) // #endif client.on('connect', function() { console.log('连接成功') //that.switches 这是订阅主题名称 和接口地址差不多,是他们定义的,直接拿过来用就行,订阅成功后,就可以接收这个的信息了 client.subscribe(that.switches, function(err) { if (!err) { console.log('switches订阅成功') } }); client.subscribe(that.drive, function(err) { if (!err) { console.log('drive订阅成功') } }); }).on('reconnect', function(error) { console.log('正在重连...', that.switches) }).on('error', function(error) { console.log('连接失败...', error) }).on('end', function() { console.log('连接断开') }).on('message', function(topic, message) { // 统一接受信息。 topic 是订阅的主题名称,message是监听信息的接收和发送都能接收 }) }
-
页面挂载完毕就调用
mounted() { this.connect() //连接 },
到这里就已经完成mqttjs的简单使用了,我只有这一个地方用,所以就没有封装,有需要的可以去封装.
在下功力不深,任需继续努力,愿大佬们不吝赐教。感谢🙏!
(原创文章,如有雷同,纯属巧合,如有侵权,立即联系)