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 相关文章推荐
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
JavaScript执行效率与性能提升方案
Dec 21 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 Javascript
微信小程序实现弹出菜单
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 金额数字转换成英文
2010/05/06 PHP
需要注意的几个PHP漏洞小结
2012/02/05 PHP
php一个找二层目录的小东东
2012/08/02 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
Javascript 布尔型分析
2008/12/22 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
在nodejs中创建child process的方法
2021/01/26 NodeJs
python有证书的加密解密实现方法
2014/11/19 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
python定时关机小脚本
2018/06/20 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
Python Django基础二之URL路由系统
2019/07/18 Python
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
电子商务专业毕业生求职信
2014/06/12 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
世界气象日活动总结
2015/02/27 职场文书
奔腾年代观后感
2015/06/09 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏