vue中利用mqtt服务端实现即时通讯的步骤记录


Posted in Vue.js onJuly 01, 2021

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即时通讯内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
vue 自定义组件添加原生事件
Apr 21 Vue.js
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
Vue实现tab导航栏并支持左右滑动功能
Vue3.0写自定义指令的简单步骤记录
vue.js Router中嵌套路由的实用示例
Jun 27 #Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
vue-router中hash模式与history模式的区别
You might like
自己做矿石收音机
2021/03/02 无线电
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
python里大整数相乘相关技巧指南
2014/09/12 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
python简单区块链模拟详解
2019/07/03 Python
Python datetime包函数简单介绍
2019/08/28 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
python利用faker库批量生成测试数据
2020/10/15 Python
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
九一八事变纪念日演讲稿
2014/09/14 职场文书
教师年度考核个人总结
2015/02/12 职场文书
辛亥革命观后感
2015/06/02 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP