Subject: 複数のObserverにマルチキャスト

• Subject、BehaviorSubject、ReplaySubject

Subject: マルチキャストできるObservable

複数のObserverを登録できる

• subject.subscribe(observer): 登録するだけでまだ実現しない
• subject.next(値)でマルチキャスト実現

Observerでもある

• 他のObservableのObserverにもなる
• 他のObservable.subscribe(subject) (これはこのとき実現)

複数のObserverを登録できる

next()でマルチキャスト

const Subject = rxjs.Subject
const subject = new Subject()

// Observerを登録
subject.subscribe(x => console.log('A', x)) // 一つ目
subject.subscribe(x => console.log('B', x)) // 二つ目
// まだ実現していない
console.log(0)
subject.next(1) // next()でマルチキャスト
console.log(2)
subject.next(3)

/*
0
A 1
B 1
2
A 3
B 3
*/

他のObservableのObserverにもなる

他のObservable.subscribe(subject)

• このときマルチキャスト

const subject = new Subject()
// Observerを登録
subject.subscribe(x => console.log('A', x)) // 一つ目
subject.subscribe(x => console.log('B', x)) // 二つ目
// まだ実現していない
console.log(0)

// SubjectをObserverにする
// take(2)はそれぞれ2個ずつの意味
interval(500).pipe(take(2)).subscribe(subject) // マルチキャスト
console.log(1) // 非同期なのでこれが先

/*
0
1
A 0
B 0
A 1
B 1
*/

BehaviorSubject: 直前値を発行できるSubject

• コンストラクタに初期値を渡す
  • これは直後のsubscribe()で実現
• next()でマルチキャスト

追加のsubscribe()で直前値発行

// コンストラクタに初期値を渡す
const subject = new BehaviorSubject(1)

// 一つ目のObserver
// subscribe()で直前値発行(ここでは初期値)
subject.subscribe(x => console.log('A', x)) // A 1
// next()でも発行
subject.next(2) // A 2

// 二つ目のObserver
// 直前値発行
subject.subscribe(x => console.log('B', x)) // B 2
console.log(subject.getValue()) // 2 直前値
subject.next(3) // マルチキャスト

/*
A 1
A 2
B 2
2
A 3
B 3
*/

ReplaySubject: 指定回数分の過去値を発行できるSubject

• コンストラクタに、過去何回分記憶するか渡す
• 引数2で時間制限も

追加のsubscribe()で直前値発行

const subject = new ReplaySubject(2) // 2回分

subject.subscribe(x => console.log('A', x)) // 一つ目
subject.next(1)
subject.next(2)
subject.next(3)
console.log(4)
// 過去の値も実現
subject.subscribe(x => console.log('B', x)) // 二つ目
subject.next(5)

/*
A 1
A 2
A 3
4
B 2
B 3
A 5
B 5
*/