RxJS 筆記 - Cold 與 Hot Observable

接下來，我們來談談 Observables 的兩種類型，這取決於它們的資料來源方式。到目前為止，我們建立的 Observables 幾乎都是在每次訂閱時才會產生通知。例如：

• 有些 Observables 在訂閱後會發送固定的一組值。
• 也有些是利用 setInterval 啟動計時器，然後依據時間觸發發送資料。

在這些情況下，每個新的訂閱都會獨立產生一組資料。這類型就稱為 Cold Observables。

與此相對的，還有 Hot Observables。它們的邏輯通常會連接到一個共享來源，例如 DOM 事件（像按鈕點擊）。因此，如果多個訂閱同時存在，它們會在同一時間收到相同的資料。

Cold Observable

特性

當我們訂閱 Cold Observable 時，它會自行產生並發送值（可能立即，也可能延遲）。這代表每次訂閱都重新執行邏輯，因此各自獨立運行。

圖示範例 #1

在此例中，兩個訂閱分別獨立執行，因此各自獲得完整的值序列。

圖示範例 #2（HTTP 請求）

Cold Observable 不一定每次訂閱都發送完全相同的值。舉例來說：若 Observable 在每次訂閱時都發送一個 HTTP 請求，那麼每個訂閱會對應到一個獨立的請求，結果也可能不同。

在這裡：

• 第二個訂閱最先收到回應，因此觸發 next 和 complete。
• 接著第一個訂閱收到回應並完成。
• 第三個訂閱則因逾時或伺服器錯誤而觸發 error。

因此，Cold Observable 的重點是：每個訂閱都會獨立產生資料來源。

程式碼範例

在這個範例中，每次訂閱都發送一個新的 HTTP 請求，因此各訂閱者可能收到不同的隨機名稱。

Hot Observable

特性

Hot Observable 的特點是：所有訂閱共享同一資料來源。 這通常透過連接現有的來源實現，例如 DOM 事件或應用程式狀態。

圖示範例

在此例中：

• 第一次訂閱後，若使用者點擊按鈕，會立即觸發通知。
• 第二次訂閱加入後，它也會從同一來源（按鈕事件）接收資料。
• 當第三次訂閱加入時，它同樣能從該 DOM 事件接收值。

因此，雖然每個訂閱都執行了 Observable 的邏輯，但它們共享同一資料來源。

程式碼範例

在這裡，每次點擊按鈕，所有訂閱者都會同時接收到相同的事件。

Cold vs Hot Observable 對照表

進階說明

有些 Observables 同時具備 Cold 與 Hot 的特徵。例如：

• 一開始（Cold 行為）會為第一個訂閱建立一個資料來源，如資料庫連線。
• 後續訂閱者（Hot 行為）則共享該連線。

另一種情境是：先為每個訂閱產生專屬值（Cold），再進一步透過共享來源廣播後續資料（Hot）。

總結

• Cold Observable：每次訂閱會建立獨立的資料來源，結果彼此不影響。
• Hot Observable：多個訂閱共享同一資料來源，事件同時廣播。

參考資料

• RxJs
• RxJs In Practice
• RxJS 7 and Observables: Introduction