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 相关文章推荐
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
canvas绘制环形进度条
Feb 23 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
javascript实现前端分页效果
Jun 24 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
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
YII框架http缓存操作示例
2019/04/29 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
js工具方法弹出蒙版
2013/05/08 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
使用python实现链表操作
2018/01/26 Python
Python函数装饰器实现方法详解
2018/12/22 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
python实现数据分析与建模
2019/07/11 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
食堂标语大全
2014/06/11 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
辩护词格式
2015/05/22 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
详解MySQL集群搭建
2021/05/26 MySQL
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript