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