Angular5集成eventbus的示例代码

 更新时间:2018年07月19日 09:11:21   作者:是小太阳呀  
这篇文章主要介绍了Angular5集成eventbus的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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。

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

相关文章

  • AngularJS constant和value区别详解

    AngularJS constant和value区别详解

    angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的。他们之间有什么不同呢?今天小编给大家分享AngularJS constant和value区别详解,需要的朋友参考下
    2017-02-02
  • 使用Angular.js开发的注意事项

    使用Angular.js开发的注意事项

    这篇文章主要记录了一些在学习和使用angular.js踩到的坑和需要注意的点,方便以后自己查阅,也给同样遇到这些问题的朋友们一些帮助,有需要的朋友们下面来一起看看吧。
    2016-10-10
  • 深入理解Angularjs中的$resource服务

    深入理解Angularjs中的$resource服务

    大家可以知道在Angularjs中可以用$http同服务器进行通信,功能上比较简单,AngularJS还提供了另外一个可选的服务$resource,使用它可以非常方便的同支持restful的服务单进行数据交互。这篇文章主要给大家深入的介绍了Angularjs中的$resource服务。
    2016-12-12
  • angular实现表单验证及提交功能

    angular实现表单验证及提交功能

    这篇文章主要为大家详细介绍了angular实现表单验证及提交功能的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)

    浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)

    今天小编就为大家分享一篇浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • 详解JavaScript的AngularJS框架中的表达式与指令

    详解JavaScript的AngularJS框架中的表达式与指令

    这篇文章主要介绍了JavaScript的AngularJS框架中的表达式与指令,文中罗列了几个常用的指令属性加以说明,需要的朋友可以参考下
    2016-03-03
  • 详解为Angular.js内置$http服务添加拦截器的方法

    详解为Angular.js内置$http服务添加拦截器的方法

    所谓拦截器就是在目标达到目的地之前对其进行处理以便处理结果更加符合我们的预期。Angular的$http拦截器是通过$httpProvider.interceptors数组定义的一组拦截器,每个拦截器都是实现了某些特定方法的Factory。本文就介绍了为Angular.js内置$http服务添加拦截器的方法。
    2016-12-12
  • Angular中点击li标签实现更改颜色的核心代码

    Angular中点击li标签实现更改颜色的核心代码

    这篇文章主要介绍了Angular中点击li标签实现更改颜色的核心代码,需要的朋友可以参考下
    2017-12-12
  • 浅谈angular2子组件的事件传递(任意组件事件传递)

    浅谈angular2子组件的事件传递(任意组件事件传递)

    今天小编就为大家分享一篇浅谈angular2子组件的事件传递(任意组件事件传递),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 体验jQuery和AngularJS的不同点及AngularJS的迷人之处

    体验jQuery和AngularJS的不同点及AngularJS的迷人之处

    AngualrJS是一个很贴心的web应用框架,本篇通过jQuery和Angular两种方式来实现同一个实例,从而体验两者的不同点以及AngularJS的迷人之处
    2016-02-02

最新评论