30 天精通 RxJS （30）：Cold & Hot Observable

Hot Observable 跟 Cold Observable 的差别，其实就是 资料源（Data Source） 在 Observable 内部建立还是外部建立。

在 RxJS 中很常会看到 Cold Observable 跟 Hot Observable 这两个名词，其实他们是在区分不同行为的 Observable，所谓的 Cold Observable 就是指每次订阅都是独立的执行，而 Hot Observable 则是共享的订阅。

Cold Observable

Cold Observable 代表 Observable 的每个订阅都是独立的，他们不会互相影响，如下

const source = Rx.Observable.interval(1000).take(5)
source.subscribe((value) => console.log('sub1: ' + value))
setTimeout(() => {
	source.subscribe((value) => console.log('sub2: ' + value))
}, 3500)
// sub1: 0
// sub1: 1
// sub1: 2
// sub1: 3
// sub2: 0
// sub1: 4
// sub2: 1
// sub2: 2
// sub2: 3
// sub2: 4

从上面的代码可以看出来每次订阅source都是独立运行的，这种每次订阅都是独立执行的 Observable 就称为 Cold Observable。

如果从 Observable 内部来看，代表 资料源（Data Source） 是在 Observable 内部建立的的，大概会长像下面

const source = Rx.Observable.create(function (observer) {
	// 订阅时，才建立新的资料源
	const someDataSource = getSomeDataSource()
	someDataSource.addEventListener('message', (data) => {
		observer.next(data)
	})
})

因为每次订阅都建立一个新的数据源，就会使数据从头开始传送。

Hot Observable

Hot Observable 代表 Observable 的每个订阅是共享的，所谓的共享订阅就是指 一个 Observable 在多次订阅时，不会每次都从新开始发送元素，例如

var source = Rx.Observable
            .interval(1000)
            .take(5)
            .share() // 共用

source.subscribe((value) => console.log('sub1: ' + value))

setTimeout(() => {
	source.subscribe((value) => console.log('sub2: ' + value))
}, 3500)
// sub1: 0
// sub1: 1
// sub1: 2
// sub1: 3
// sub2: 3
// sub1: 4
// sub2: 4

从上面的代码可以看出，当我们对source第二次做订阅时，接收到的元素是接续第一个订阅往下发送的，而不是从新（0）开始，这种共享订阅的 Observable 就称为 Hot Observable。

如果从 Observable 内部来看，就是数据源是在 Observable 外部建立的，代码大概就会像下面这样

// 只有一个数据源，每次订阅都是用同一个
const someDataSource = getSomeDataSource()
const source = Rx.Observable.create(function (observer) {
	someDataSource.addEventListener('message', (data) => {
		observer.next(data)
	})
})

Cold 与 Hot

一般的情况下 Observable 都是 Cold 的，这样不同的订阅才不会有 Side Effect 互相影响。 但在需要多次订阅的情境下，我们就很有可能需要 Hot Observable，而让 RxJS 提供了很多让 Cold Observable 变成 Hot Observable 的方法，这个部分可以参考以下文章：

• 30 天精通 RxJS（22）： Subject 基本观念
• 30 天精通 RxJS（24）： Observable operators - multicast， refCount， publish， share

小结

Hot Observable 跟 Cold Observable 的差异就是多次订阅时，是否共享订阅或是独立执行。 而这一切的差异就是来自于资料源 是在 Observable 内部建立还是外部建立。

本系列仅作为学习记录所用，摘录自30 天精通 Rxjs！强烈推荐！膜拜大佬！