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-router定义元信息meta操作
Dec 07 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
解读Vue组件注册方式
May 15 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 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安全编程之加密功能
2006/10/09 PHP
PHP中的正规表达式(一)
2006/10/09 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
vue webuploader 文件上传组件开发
2017/09/23 Javascript
Puppet的一些技巧
2018/09/17 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
Python显示进度条的方法
2014/09/20 Python
Python探索之自定义实现线程池
2017/10/27 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
Python之变量类型和if判断方式
2020/05/05 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
公司领导推荐信
2013/11/12 职场文书
《长相思》听课反思
2014/04/10 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
期中考试复习计划
2015/01/19 职场文书
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android