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 相关文章推荐
用js判断页面是否加载完成实现代码
Dec 11 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
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文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
删除重复数据的算法
2006/11/23 Javascript
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
Element Input输入框的使用方法
2020/07/26 Javascript
python和shell变量互相传递的几种方法
2013/11/20 Python
python网络编程之文件下载实例分析
2015/05/20 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
Python容器类型公共方法总结
2020/08/19 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
诚信承诺书范文
2014/03/27 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书