“冷” vs “热” Observable

Observables 可以分为两大类:“冷”和“热” Observables 。让我们从一个“冷” Observable开始。

  1. const obsv = new Observable(observer => {
  2. setTimeout(() => {
  3. observer.next(1);
  4. }, 1000);
  5. setTimeout(() => {
  6. observer.next(2);
  7. }, 2000);
  8. setTimeout(() => {
  9. observer.next(3);
  10. }, 3000);
  11. setTimeout(() => {
  12. observer.next(4);
  13. }, 4000);
  14. });
  15. // Subscription A
  16. setTimeout(() => {
  17. obsv.subscribe(value => console.log(value));
  18. }, 0);
  19. // Subscription B
  20. setTimeout(() => {
  21. obsv.subscribe(value => console.log(`>>>> ${value}`));
  22. }, 2500);

View Example

在上述情况下,用户B在用户A之后2000ms订阅。然而,用户B开始获得像用户A的值只是时间偏移的值。 这种行为被称为冷Observables。 一个有用的类比是观看预录制的视频,例如在Netflix上。 您按下Play键,电影从头开始播放。 别人可以在25分钟后在自己的家里开始播放同一部电影。

另一方面,还有一个热Observables,这更像是一个现场表演。 你从一开始就参加一个现场乐队表演,但有些人可能迟到25分钟的节目。 乐队不会从头开始播放,后来者必须从那里开始观看表演。

我们已经遇到了这两种Observables。 上面的例子是一个冷的Observables,而在我们的文本字段输入上使用valueChanges的例子是一个热的Observables

Cold Observables 转换到 Hot Observables

在RxJS API中的方法是publish方法。 此方法接受一个冷Observable作为其来源,并返回一个ConnectableObservable的实例。 在这种情况下,我们必须显式调用connect在我们的热Observable开始广播值给其订阅者。

  1. const obsv = new Observable(observer => {
  2. setTimeout(() => {
  3. observer.next(1);
  4. }, 1000);
  5. setTimeout(() => {
  6. observer.next(2);
  7. }, 2000);
  8. setTimeout(() => {
  9. observer.next(3);
  10. }, 3000);
  11. setTimeout(() => {
  12. observer.next(4);
  13. }, 4000);
  14. }).publish();
  15. obsv.connect();
  16. // Subscription A
  17. setTimeout(() => {
  18. obsv.subscribe(value => console.log(value));
  19. }, 0);
  20. // Subscription B
  21. setTimeout(() => {
  22. obsv.subscribe(value => console.log(` ${value}`));
  23. }, 2500);

View Example

在上面的情况下,现场演出开始于1000ms,用户A在0秒到达音乐厅并找了一个好位置,用户B在2500ms处达到并错过了一首歌曲。 另一个有用的方法使用hot Observables而不是connectrefCount 。 这是一种自动连接方法,只要有多个用户,就会立即开始广播。 类似地,如果订阅者的数量到0,它将停止; 换句话说,如果观众中的每个人走出来,演出都会停止。