The multicast RxJS

aims

1. What is Multicast
2. Hot and Cold difference data stream
3. RxJS understanding of Subject
4. Support multicast operator
5. Learn about advanced multicast features

1. What is a multicast

In RxJS in, Observable and Observer of relations, is the former playing the content, which is
listening to the content. For multicast can be understood as: the contents of a data stream are subscribe to multiple Observer.

RxJS is ⽀ holding ⼀ a Observable been repeatedly subscribe, and
therefore, RxJS ⽀ support multicast, however, see the table ⾯ is multicast or unicast substantially.

// 多播
const tick$ = Observable.interval(1000).pipe(take(3));
tick$.subscribe(value => console.log('observer 1: ' + value));
setTimeout(() => {
tick$.subscribe(value => console.log('observer 2: ' + value));
}, 2000);

operation result:

observer 1: 0
observer 1: 1
observer 2: 0
observer 1: 2
observer 2: 1
observer 2: 2

??? why this result is because of this interval associate the resulting operator is a Cold Observable objects ⼀

2. Hot and Cold difference data stream

1. The so-called Cold Observable, that are produced every time subscribe ⽣ ⼀ data streams new data series. For example interval, range

2. Hot Observable data streams in the outside or from the promise, DOM, EventEmitter.

True multicast, must no matter if the number of Observer to subscribe, pushed to the Observer of
all ⼀ kind of data source, full-EMPTY such conditions, is Observable Hot, Hot because
the content Observable in the creation and subscribers ⽆ off .

3. subject

In functional programming world, there is a requirement to maintain immutability. (Immutable). Therefore, the Cold Observable become Hot Observable, Cold Observable not change itself, but from the previous Cold Observable Observable to a new package.
In this way, it becomes the new Observable downstream want observer of hot data to subscribe to the new Observable, OK.

Well, this produced before a new Cold Observable Observable to packaging. This function is subject middleman to achieve this, it is subject with the following functions:

1. Provided subscribe way for other people to subscribe to their own data stream. (Observable)
2. Receiving pushed data, including cold Observable pushed data (Observer)

 import {Subject} from 'rxjs';

 const subject = new Subject();

 subject.subscribe({
     next:(v)=>console.log(`A:${v}`)
 })

 subject.subscribe({
    next:(v)=>console.log(`B:${v}`)
})

subject.next(1);
subject.next(2);
subject.complete();

With the subject realize multicast and use

const tick$ = Observable.interval(1000).take(3);
const subject = new Subject();
tick$.subscribe(subject);

subject.subscribe(value => console.log('observer 1: ' + value));

setTimeout(() => {
subject.subscribe(value => console.log('observer 2: ' + value));
}, 1500);

makeHot operator

Observable.prototype.makeHot = function () {
const cold$ = this;
const subject = new Subject();
cold$.subscribe(subject);
return Observable.create((observer) => subject.subscribe(observer));
}


const hotTick$ = Observable.interval(1000).take(3).makeHot();
hotTick$.subscribe(value => console.log('observer 1: ' + value));
setTimeout(() => {
hotTick$.subscribe(value => console.log('observer 2: ' + value));
}, 1500);

Subject Note the use of other points:

1. Subject can not be repeated Use
2. There may be multiple upstream Subject
3. Subject error handling

4. Support multicast operator

1. multicast: Examples operator, can be of the upstream production ⽣ Observable data source causes a new Hot Observable object.

// multicast操作符:多播的实现。 需要开启 multicasted.connect();
const source = from ([1,2,3]);
const subject1 = new Subject();

const multicasted = source.pipe(multicast(subject1));

multicasted.subscribe({
    next:(v)=>console.log(`A:${v}`)
})
multicasted.subscribe({
    next:(v)=>console.log(`B:${v}`)
})

multicasted.connect();

2. share

function shareSubjectFactory() {
    return new Subject();
}
function share() {
    return multicast.call(this, shareSubjectFactory).refCount();
}

3. publish

function publish(selector) {
    if (selector) {
        return this.multicast(() => new Subject(), selector);
    } else {
        return this.multicast(new Subject());
    }
// publish相当于封装了multicast和创建⼀个新Subject对象这两个动作，
// 让代码更加简洁，最终返回的是⼀个ConnectableObservable对象
multicast(new Subject())

5. ADVANCED multicast functionality

1. publishLast
2. publishReplay
3. publishBehavior