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 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue使用require.context实现动态注册路由
Dec 25 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 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
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
Python备份Mysql脚本
2008/08/11 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
python matlibplot绘制3D图形
2018/07/02 Python
Python 如何提高元组的可读性
2019/08/26 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
Python3 集合set入门基础
2020/02/10 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
python 贪心算法的实现
2020/09/18 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
存储过程的优点有哪些
2012/09/27 面试题
C#面试问题
2016/07/29 面试题
我为党旗添光彩演讲稿
2014/09/13 职场文书
优秀党员申报材料
2014/12/18 职场文书
负责培养人意见
2015/06/05 职场文书