Angular5集成eventbus的示例代碼
更新時間：2018年07月19日 09:11:21 作者：是小太陽呀
這篇文章主要介紹了Angular5集成eventbus的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
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.創(chuàng)建一個eventbus.service.ts用來通信
導入eventbus：
import { EventBus } from 'vertx3-eventbus-client';
聲明eventbus:
declare var EventBus: any;
4.創(chuàng)建eventbus實例，監(jiān)聽接口以及發(fā)送消息
//創(chuàng)建實例
var eb = new EventBus('http://localhost:8080/eventbus');
eb.onopen = function() {
//注冊監(jiān)聽器用來接受消息
eb.registerHandler('some-address', function(error, message) {
console.log('received a message: ' + JSON.stringify(message));
});
//發(fā)送消息
eb.send('some-address', {name: 'tim', age: 587});
}
更多信息請參考這里 https://vertx.io/docs/vertx-web/java/
注：
對于需要發(fā)送消息來接受的消息，需要先監(jiān)聽，然后再發(fā)送消息。
對于一直推送的消息，不需要發(fā)送。
代碼實例如下：
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中調(diào)用closeEventBus關(guān)閉eventbus。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS constant和value區(qū)別詳解
angularJS可以通過constant(name,value)和value(name,value)對于創(chuàng)建服務(wù)也是很重要的。他們之間有什么不同呢？今天小編給大家分享AngularJS constant和value區(qū)別詳解，需要的朋友參考下2017-02-02
這篇文章主要記錄了一些在學習和使用angular.js踩到的坑和需要注意的點，方便以后自己查閱，也給同樣遇到這些問題的朋友們一些幫助，有需要的朋友們下面來一起看看吧。2016-10-10
深入理解Angularjs中的$resource服務(wù)
大家可以知道在Angularjs中可以用$http同服務(wù)器進行通信，功能上比較簡單，AngularJS還提供了另外一個可選的服務(wù)$resource,使用它可以非常方便的同支持restful的服務(wù)單進行數(shù)據(jù)交互。這篇文章主要給大家深入的介紹了Angularjs中的$resource服務(wù)。2016-12-12
這篇文章主要為大家詳細介紹了angular實現(xiàn)表單驗證及提交功能的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
淺談angularJs函數(shù)的使用方法(大小寫轉(zhuǎn)換,拷貝,擴充對象)
今天小編就為大家分享一篇淺談angularJs函數(shù)的使用方法(大小寫轉(zhuǎn)換,拷貝,擴充對象)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
詳解JavaScript的AngularJS框架中的表達式與指令
這篇文章主要介紹了JavaScript的AngularJS框架中的表達式與指令,文中羅列了幾個常用的指令屬性加以說明,需要的朋友可以參考下2016-03-03
詳解為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法
所謂攔截器就是在目標達到目的地之前對其進行處理以便處理結(jié)果更加符合我們的預(yù)期。Angular的$http攔截器是通過$httpProvider.interceptors數(shù)組定義的一組攔截器，每個攔截器都是實現(xiàn)了某些特定方法的Factory。本文就介紹了為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法。2016-12-12
Angular中點擊li標簽實現(xiàn)更改顏色的核心代碼
這篇文章主要介紹了Angular中點擊li標簽實現(xiàn)更改顏色的核心代碼,需要的朋友可以參考下2017-12-12
今天小編就為大家分享一篇淺談angular2子組件的事件傳遞(任意組件事件傳遞)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
體驗jQuery和AngularJS的不同點及AngularJS的迷人之處
AngualrJS是一個很貼心的web應(yīng)用框架，本篇通過jQuery和Angular兩種方式來實現(xiàn)同一個實例，從而體驗兩者的不同點以及AngularJS的迷人之處2016-02-02