Angular5集成eventbus的示例代码


Posted in Javascript onJuly 19, 2018

1.package.json中

"dependencies": {
   ...
  "vertx3-eventbus-client": "3.5.2",
 },

然后  npm install,或者:

npm install vertx3-eventbus-client@3.5.2

2.angular-cli.json中

"scripts": [
     ...
    "../node_modules/vertx3-eventbus-client/vertx-eventbus.js"
   ],

3.创建一个eventbus.service.ts用来通信

导入eventbus:

import { EventBus } from 'vertx3-eventbus-client';

声明eventbus:

declare var EventBus: any;

4.创建eventbus实例,监听接口以及发送消息

//创建实例
var eb = new EventBus('http://localhost:8080/eventbus');

eb.onopen = function() {
 //注册监听器用来接受消息
 eb.registerHandler('some-address', function(error, message) {
  console.log('received a message: ' + JSON.stringify(message));
 });

 //发送消息
 eb.send('some-address', {name: 'tim', age: 587});

}

更多信息请参考这里 https://vertx.io/docs/vertx-web/java/

注:

对于需要发送消息来接受的消息,需要先监听,然后再发送消息。
对于一直推送的消息,不需要发送。

代码实例如下:

RegisterHandler(key, id, callback) {
    const address = '***.' + key + '.' + id;
    if (typeof (this.eventBus[key]) === 'undefined' || !this.eventBus[key]) {
      this.eventBus[key] = new EventBus(environment.eventbusUrl);
    }
    if (this.eventBus[key].state === EventBus.OPEN) {
      this.eventBus[key].registerHandler(address, callback);
    } else {
      const $this = this;
      this.eventBus[key].onopen = function () {
        $this.eventBus[key].registerHandler(address, callback)
      }
    }
  }

Send(key, id) {
    var data = '';
    const address = ***.' + key + '.' + id;
    if (typeof (this.eventBus[key]) === 'undefined' || !this.eventBus[key]) {
      this.eventBus[key] = new EventBus(environment.eventbusUrl);
    }
    if (this.eventBus[key].state === EventBus.OPEN) {
      this.eventBus[key].send(address, data)
    } else {
      const $this = this;
      this.eventBus[key].onopen = function () {
        $this.eventBus[key].send(address, data)
      }
    }
  }

closeEventBus(key) {
    if (typeof (this.eventBus[key]) !== 'undefined' && this.eventBus[key] && this.eventBus[key].state === EventBus.OPEN) {
      this.eventBus[key].close();
    }
    this.eventBus[key] = null;
}

在组件ngOnDestroy中调用closeEventBus关闭eventbus。

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

Javascript 相关文章推荐
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
微信小程序实现弹出菜单
Jul 19 #Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 #Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 #Javascript
微信小程序实现折叠展开效果
Jul 19 #Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 #Javascript
微信小程序实现天气预报功能
Jul 18 #Javascript
vue代理和跨域问题的解决
Jul 18 #Javascript
You might like
PHP生成月历代码
2007/06/14 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
js继承的实现代码
2010/08/05 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
Python中使用支持向量机(SVM)算法
2017/12/26 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
python名片管理系统开发
2020/06/18 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
个人应聘自我评价分享
2013/11/18 职场文书
党员群众路线承诺书
2014/05/20 职场文书
五五普法心得体会
2014/09/04 职场文书
2014年质量工作总结
2014/11/22 职场文书
2016年教师节慰问信
2015/12/01 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python