vue中利用mqtt服务端实现即时通讯的步骤记录
MQTT协议
MQTT(Message Queuing Telemetry Transport,消息队列遥测传输)是IBM开发的一个即时通讯协议,有可能成为物联网的重要组成部分。该协议支持所有平台,几乎可以把所有联网物品和外部连接起来,被用来当做传感器和制动器(比如通过Twitter让房屋联网)的通信协议。
MQTT是轻量级基于代理的发布/订阅的消息传输协议,它可以通过很少的代码和带宽和远程设备连接。例如通过卫星和代理连接,通过拨号和医疗保健提供者连接,以及在一些自动化或小型设备上,而且由于小巧,省电,协议开销小和能高效的向一和多个接收者传递信息,故同样适用于称动应用设备上。
vue利用mqtt服务端实现即时通讯
在大部分项目中,前后端交互只是前端请求后端的接口,拿到数据后再处理,前段时间我手上的一个项目需要用到mqtt,使用后觉得真神奇,只需要订阅就能实时获取到数据,废话不多说,妹妹给你们上步骤!
1.在vue项目中安装mqtt.js
npm install mqtt --save
2.在项目的main.js或者在需要用到的vue页面上引用
import mqtt from 'mqtt'
3.在vue页面的data中定义一个client对象,方便后面使用
client: {}
ok,接下来就是重点了,首先我们得连接mqtt,连接mqtt的方法有个回调函数,我接下来就把订阅的方法写在连接成功后的回调里,这样能保证不出错,上代码!
4.连接mqtt并订阅
//连接服务器 connect() { let options = { username: "xxx", password: "xxxx", cleanSession : false, keepAlive:60, clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8), connectTimeout: 4000 } this.client = mqtt.connect('ws://192.168.xxx.xx:8083/mqtt',options); this.client.on("connect", (e)=>{ console.log("成功连接服务器:",e); //订阅三个名叫'top/#', 'three/#'和'#'的主题 this.client.subscribe(['top/#', 'three/#', '#'], { qos: 1 }, (err)=> { if (!err) { console.log("订阅成功"); //向主题叫“pubtop”发布一则内容为'hello,this is a nice day!'的消息 this.publish("pubtop", 'hello,this is a nice day!') } else { console.log('消息订阅失败!') } }); }); //重新连接 this.reconnect() //是否已经断开连接 this.mqttError() //监听获取信息 this.getMessage() }
5.发布消息方法
//发布消息@topic主题 @message发布内容 publish(topic,message) { if (!this.client.connected) { console.log('客户端未连接') return } this.client.publish(topic,message,{qos: 1},(err) => { if(!err) { console.log('主题为'+topic+ "发布成功") } }) }
6.监听并接收上面订阅的三个主题的信息
//监听接收消息 getMessage() { this.client.on("message", (topic, message) => { if(message) { console.log('收到来着',topic,'的信息',message.toString()) const res = JSON.parse(message.toString()) //console.log(res, 'res') switch(topic) { case 'top/#' : this.msg = res break; case 'three/#' : this.msg = res break; case 'three/#' : this.msg = res break; default: return this.msg = res } this.msg = message } }); },
7.监听服务器是否连接失败
//监听服务器是否连接失败 mqttError() { this.client.on('error',(error) => { console.log('连接失败:',error) this.client.end() }) },
8.取消订阅
//取消订阅 unsubscribe() { this.client.unsubscribe(this.mtopic, (error)=> { console.log('主题为'+ this.mtopic+'取消订阅成功',error) }) },
9.断开连接
//断开连接 unconnect() { this.client.end() this.client = null console.log('服务器已断开连接!') },
10.监听服务器重新连接
//监听服务器重新连接 reconnect() { this.client.on('reconnect', (error) => { console.log('正在重连:', error) }); },
总结
到此这篇关于vue中利用mqtt服务端实现即时通讯的文章就介绍到这了,更多相关vue用mqtt即时通讯内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 前些日子了解到mqtt这样一个协议,可以在web上达到即时通讯的效果,所以下面这篇文章主要给大家介绍了关于vue中如何利用mqtt服务端实现即时通讯的相关资料,需要的朋友可以参考下...2021-07-01
- 这篇文章主要介绍了uniapp,微信小程序中使用 MQTT的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
- 这篇文章主要介绍了C# Mqtt 断线重连,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
- 这篇文章主要介绍了在Django中使用MQTT的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-05-10
- 本篇文章主要介绍了Node.js之网络通讯模块实现浅析,具有一定的参考价值,有兴趣的可以了解一下。 ...2017-04-03
- 这篇文章主要为大家详细介绍了C#基于SerialPort类实现串口通讯,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2022-01-31
- 这篇文章主要介绍了微信小程序+mqtt,esp8266温湿度读取的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-02
- 这篇文章主要给大家介绍了关于C#串口通讯概念及简单的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者使用C#具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-06-25
- 之前文章我们描述给过Vue3 的七通信使用,今天中五篇文章我们再来看看Vue2 的通信使用写法的相关资料,需要的朋友可以参考下面文章的具体内容...2021-09-25
- 这篇文章主要介绍了C# WPF上位机实现和下位机TCP通讯的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
- 跟后台打印程序系统服务通讯时出现错误。请打开服务管理单元,确认后台打印程序服务是否在运行。 ...2016-01-27
- 这篇文章主要给大家介绍了关于如何利用C#实现SSLSocket加密通讯的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-11-03
- 这篇文章主要介绍了JAVA多线程间通讯常用实现方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-27
- 这篇文章主要介绍了详解react组件通讯方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-11-10
- 这篇文章主要介绍了C#窗体间通讯的几种常用处理方法总结,有很好的实用价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了微信小程序连接服务器展示MQTT数据信息的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-14
- 这篇文章主要介绍了php微信公众号开发第三课,php实现简单微信文本通讯,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-08
- 这篇文章主要介绍了...2020-06-25
- 下面小编就为大家带来一篇C/C++ 进程通讯(命名管道)的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-04-25
Python中使用matplotlib绘制mqtt数据实时图像功能
这篇文章主要介绍了Python中使用matplotlib绘制mqtt数据实时图像,本代码中publish是一个死循环,数据一直往外发送,详细代码跟随小编一起通过本文学习下吧...2021-09-10