vue使用stompjs实现mqtt消息推送通知


Posted in Javascript onJune 22, 2017

最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt消息通知建立一个独立于业务服务系统的消息通知服务,这个服务还可以与开发的语言无关,客户端既可以是安卓也可以是ios,也可以是java或者c#,python等。闲话不多扯,这里只是实现了在vue中使用mqtt的js客户端,后台用.net WEB API用的是c#的mqtt客户端

第一步:安装依赖

npm install stompjs

运行npm run dev可能会报错,提示安装net,执行命令

npm install --save net

第二部:组件中应用stompjs

组件中的js部分

<script>
import Stomp from 'stompjs'
---在sysconstant.js配置文件中配置mqtt的服务端地址,账号等信息
import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } from '../../config/sysconstant.js'
export default {
 name: 'entry',
 data () {
  return {
   client: Stomp.client(MQTT_SERVICE)
  }
 },
 created () {
  this.connect()
 },
 methods: {
  onConnected: function (frame) {
   console.log('Connected: ' + frame)
   var topic = '/topic/AllCustomer' 
---订阅频道
   this.client.subscribe(topic, this.responseCallback, this.onFailed) 
  },
  onFailed: function (frame) {
   console.log('Failed: ' + frame)
  },
  responseCallback: function (frame) {
   console.log('responseCallback msg=>' + frame.body)
   ---接收消息
  },
  connect: function () {
   ---初始化mqtt客户端,并连接mqtt服务
   var clientid = util.uuid()
   var headers = {
    'login': MQTT_USERNAME,
    'passcode': MQTT_PASSWORD,
    'client-id': clientid
    // additional header
   }
   this.client.connect(headers, this.onConnected, this.onFailed)
  }
 }
}
</script>

配置文件sysconstant.js

/**
 * 配置文件,记录系统中固定的参数
 */
export const MQTT_SERVICE = 'ws://127.0.0.1:61623/stomp' // mqtt服务地址
export const MQTT_USERNAME = 'admin' // mqtt连接用户名
export const MQTT_PASSWORD = 'password' // mqtt连接密码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
28个JS验证函数收集
Mar 02 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
老生常谈js中的MVC
Jul 25 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 #Javascript
详解用webpack2搭建angular2的项目
Jun 22 #Javascript
vue2.0实现分页组件的实例代码
Jun 22 #Javascript
纯JS实现只能输入数字的简单代码
Jun 21 #Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 #Javascript
Vue实现百度下拉提示搜索功能
Jun 21 #Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 #Javascript
You might like
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
Exjs 入门篇
2010/04/07 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
基于python时间处理方法(详解)
2017/08/14 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
写好自荐信的技巧
2013/11/08 职场文书
简历自我评价模版
2014/01/31 职场文书
风险评估实施方案
2014/03/09 职场文书
大型演出策划方案
2014/05/28 职场文书
基层党员公开承诺书
2014/05/29 职场文书
辞职信怎么写?
2019/05/21 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
数据设计之权限的实现
2022/08/05 MySQL