EventEmitter 的なことを RxJS で実現してみました。
- ES2015 で書いてます。
- ソースコード全体は GitHub に置いてます。この投稿の末尾のリンクから参照ください。
次のような RxEventBus
クラスおよび RxEvent
クラスを用意します。
import {Rx} from 'rx';
class RxEventBus {
constructor() {
this.subject = new Rx.Subject();
}
subscribe(key, action) {
return this.subject
.filter(event => event.key === key)
.map(event => event.value)
.subscribe(action);
}
post(event) {
this.subject.onNext(event);
}
}
export const rxEventBus = new RxEventBus();
export class RxEvent {
constructor(key, value) {
this.key = key;
this.value = value;
}
}
RxEventBus
クラスはイベントを仲介するもので、シングルトンインスタンスとして運用します(インスタンス化したものを export
)。
具体的には Rx の
Subject
がイベントを仲介しています。
RxEvent
クラスは単にキーと値を保持しているだけのクラスです。キーを用意したのは複数種類のイベントに対応できるようにする為です。値はもし不要であれば空で構いません。
イベントを送る
送る方
RxEvent
クラスをインスタンス化し、それを引数に rxEventBus
(シングルトンインスタンス) の #post
メソッドを呼び出します。
import {rxEventBus, RxEvent} from './rx_event_bus.es6';
// イベントのPOST
rxEventBus.post(new RxEvent('someKey', 'someValue'));
購読する方
rxEventBus
(シングルトンインスタンス) の #subscribe
メソッドでイベントを購読します。第一引数でどのイベントかをキーで指定し、第二引数でイベント受け取り時に実行する処理を定義します。
import {rxEventBus} from './rx_event_bus.es6';
// ...
// イベントの購読
rxEventBus.subscribe('someKey', value => {
console.log(value); // 'someValue' が出力される
});
以上で任意のイベント送信が実現できました。ソースコードは GitHub に置きました。よろしければ参照ください。
⇒ https://github.com/hkusu/rxjs-eventbus-sample
$ npm install
で環境が再現できるはずです。利用できるnpm
スクリプトはpackage.json
を参照ください。
ほか
用途的にはデータの変更通知などが考えられるでしょうか。
リークを防止する為、本当は Rx の Subject
や Subscription
はもし不要になったら停止した方がいいです。
⇒ RxJS/doc/gettingstarted/subjects.md