【Angular中的RxJS】- Cold Observables VS Hot Observables

        There are two types of Observables in RxJS: Cold Observables and Hot Observables.

Cold Observables

        Cold Observables only start producing values ​​when they are subscribed to by observers. It is unicast. As many subscriptions as there are subscription instances will be generated. Each subscription starts to receive the value from the first value generated, so the value received by each subscription is the same.

        Cold Observables example:

import { Observable } from 'rxjs';

    let observable = new Observable((observer: any) => {
      let count = 0;
      let intervalId = setInterval(() => {
        count++;
        if (count < 3) {
          observer.next(count);
        } else {
          observer.complete();
          clearInterval(intervalId);
        }
      }, 1000);
    });
 
    observable.subscribe(
      data => { console.log(`1st subscribe: ${data}`) },
      (err) => { console.log(`1st subscribe err: ${err}`) },
      () => { console.log(`1st subscribe complete`) });
 
    setTimeout(() => {
      observable.subscribe(
        data => { console.log(`2nd subscribe: ${data}`) },
        (err) => { console.log(`2nd subscribe err: ${err}`) },
        () => { console.log(`2nd subscribe complete`) });
    }, 2000);
    
    setTimeout(() => {
      observable.subscribe(
        data => { console.log(`3rd subscribe: ${data}`) },
        (err) => { console.log(`3rd subscribe err: ${err}`) },
        () => { console.log(`3rd subscribe complete`) });
    }, 5000);

        operation result:

         You can see that the last subscription     was added after observer.complete(); was completed, but it still received all the data values.

Hot Observables

        Hot Observables produce values ​​regardless of whether they are subscribed to or not. It is multicast, multiple subscriptions share the same instance, and the value is received from the subscription, and the value received by each subscription is different, depending on when they started subscribing.

        In RxJS, Hot Observables can be created using the publish operator, ConnectableObservable, and the connect() method:

import { Observable } from 'rxjs';
import { publish } from 'rxjs/operators';

   let observable = new Observable((observer: any) => {
      let count = 0;
      let intervalId = setInterval(() => {
        count++;
        if (count < 3) {
          observer.next(count);
        } else {
          observer.complete();
          clearInterval(intervalId);
        }
      }, 1000);
    }).pipe(publish()) as ConnectableObservable<any>;
 
    observable.connect();
 
    observable.subscribe(
      data => { console.log(`1st subscribe: ${data}`) },
      (err) => { console.log(`1st subscribe err: ${err}`) },
      () => { console.log(`1st subscribe complete`) });
 
    setTimeout(() => {
      observable.subscribe(
        data => { console.log(`2nd subscribe: ${data}`) },
        (err) => { console.log(`2nd subscribe err: ${err}`) },
        () => { console.log(`2nd subscribe complete`) });
    }, 2000);

    setTimeout(() => {
      observable.subscribe(
        data => { console.log(`3rd subscribe: ${data}`) },
        (err) => { console.log(`3rd subscribe err: ${err}`) },
        () => { console.log(`3rd subscribe complete`) });
    }, 5000);

        operation result:

        It can be seen that for Hot Observables, a subscription added after a value is emitted cannot receive the value and the value emitted before it. But can receive completion notification.

        Operator and method description:

• publish : This operator converts ordinary Observables (Cold Observables) into ConnectableObservables.
• ConnectableObservable : It is a variant of Observable, belonging to Hot Observable, which will wait until the connect method is called before sending values ​​to observers who subscribe to it.
• connect : ConnectableObservable does not actively send values. By calling the connect method, you can start ConnectableObservable to send values. When the connect method is called, the value is sent regardless of whether it is subscribed or not.