vue 通过 mqtt 实现实时接收消息的操作方法
作者:叶子_o
MQTT是一种基于发布/订阅模式的轻量级消息协议,适用于硬件性能有限的远程设备和网络状况不佳的环境,这篇文章主要介绍了vue 通过 mqtt 实现实时接收消息,需要的朋友可以参考下
一. MQTT 简介
MQTT(消息队列遥测传输)是一种基于发布/订阅模式的轻量级消息协议,适用于硬件性能有限的远程设备和网络状况不佳的环境。它工作在TCP/IP协议之上,具有轻量、简单、开放和易于实现的特点,广泛应用于物联网(IoT)、机器与机器(M2M)通信、智能家居等领域。
二. MQTT 的基本组成
MQTT协议由固定头、可变头和消息体三部分组成:
固定头:每个消息都有固定头,但其长度不固定,范围为2-5个字节。固定头用于表示消息的长度和其他控制信息。
可变头:存储消息相关的属性,如协议名、协议版本号、心跳时长、主题名、消息ID等。不同类型的消息,可变头中的内容也不同。
消息体:实际发送的数据。例如,CONNECT消息体包含客户端标识、用户名、密码等信息;PUBLISH消息体则是实际发送的消息内容。
三. MQTT 的使用
安装
npm i mqtt --save
引入
import mqtt from 'mqtt'
使用
data() { client: null, connection: { host: 'localhost', port: 8083, // 端口号 endpoint: '/mqtt', clean: true, connectTimeout: 4000, // 超时时间 reconnectPeriod: 4000, clientId: uuid.v4(), // 这是一个随机生成的自定义的值 cleanSession: true, // 是否清理Session keepAlive: 5 // 心跳间隔 }, mqttfalg: true, // 是否开启 mqtt // 下边三个的值是与后端约定好的,根据实际情况赋值 ImgStart: '', ImgSend: '', ImgEnd: '' }, mounted() { // 创建连接 this.createConnection() }, beforeDestroy() { // 断开 mqtt 连接,不然会一直监听消息 this.disConnect() }, methods: { // 创建连接 createConnection() { const { host, port, endpoint, ...options } = this.connection // 连接的 url const connectUrl = `ws://${host}:${port}${endpoint}` // 如果开启了 mqtt if (this.mqttfalg) { this.client = mqtt.connect(connectUrl, options) this.client.on('connect', () => { console.log('连接成功!') // 关闭开关,不然会一直重复连接 this.mqttfalg = false // 订阅配置(这里的参数都是与后端约定好的,根据实际情况传入) this.client.subscribe(this.ImgEnd, { qos: 2 }) this.client.subscribe(this.ImgSend, { qos: 2 }) this.client.subscribe(this.ImgStart, { qos: 2 }) }) // 连接出错执行 this.client.on('error', error => { console.log('连接出错', error) }) // 重连时执行 this.client.on('reconnect', error => { console.log('正在重连', error) }) // 监听收到的消息 this.client.on('message', async (topic, data) => { const json = JSON.parse(data.toString()) console.log('接到了消息', topic, json) // 如果收到的消息 topic 等于发送 if (topic === this.ImgSend) { // 处理收到的消息 json console.log('收到的消息内容', json) } // 如果收到的消息 topic 等于结束,说明当前最后一条消息已发送完毕 if (topic === this.ImgEnd) { console.log('消息接收完毕') } }) } }, // 断开连接 disConnect() { if (this.client) { this.client.end() console.log('断开连接') } }, }
到此这篇关于vue 通过 mqtt 实现实时接收消息的文章就介绍到这了,更多相关vue实时接收消息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!