RxJS 是 JavaScript 中用于处理异步数据流的一个流行的库。在 RxJS 中有一个强大的特性就是 Multicasting。Multicasting 可以理解为将一个 Observable 多个订阅者之间共享，从而避免重复地访问同一个数据源。
在本文中，我们将深入探讨 RxJS 中的 Multicasting 原理和如何使用它来优化我们的代码。
Multicasting 的工作原理
Multicasting 通过特定的操作符来实现。使用这些操作符可以将一个单个的 Observable 转换成一个多播 Observable。这样一来就可以将同样的数据流发送给多个订阅者，而不是为每一个订阅者单独访问数据源。
让我们举一个简单的例子。假设有一个计时器 Observbale，每秒会发出一个数字。如果我们直接对它进行订阅，每个订阅者都会单独访问这个 Observable：
const timer = interval(1000);
timer.subscribe((n) => console.log(`Subscriber A: ${n}`));
// output: Subscriber A: 0, Subscriber A: 1, Subscriber A: 2, ...
timer.subscribe((n) => console.log(`Subscriber B: ${n}`));
// output: Subscriber B: 0, Subscriber B: 1, Subscriber B: 2, ...上面的代码中，我们创建了一个计时器 Observable，并创建了两个订阅者。它们都会单独访问这个 Observable 并且输出自己的内容。
如果我们将这个 Observable 转换成一个多播 Observable 并且在订阅之前进行共享，那么它就可以被多个订阅者共享：
const timer = interval(1000).pipe(share());
timer.subscribe((n) => console.log(`Subscriber A: ${n}`));
// output: Subscriber A: 0, Subscriber A: 1, Subscriber A: 2, ...
timer.subscribe((n) => console.log(`Subscriber B: ${n}`));
// output: Subscriber B: 0, Subscriber B: 1, Subscriber B: 2, ...现在，每个订阅者都会输出相同的数据流。每个数据只需要被计算一次，并且可以被多个订阅者共享。
Multicasting 操作符
在 RxJS 中，有很多 Multicasting 操作符可以使用。下面是一些常用的 Multicasting 操作符：
share
share 是最常见的 Multicasting 操作符之一。它可以将一个 Observable 转换成一个多播 Observable。当有多个订阅者时，它们将共享数据流，并且只需要计算一次。
const source = of(1, 2, 3).pipe(share());
source.subscribe((n) => console.log(`Subscriber A: ${n}`));
source.subscribe((n) => console.log(`Subscriber B: ${n}`));publish
publish 能够将一个 Observable 转换成一个 Connectable Observable。Connectable Observable 是在调用了 connect 之后才会开始发送数据流，这意味着可以在需要时手动开始发送数据。
-- -------------------- ---- -------
----- ------ - --------------
------
--------
---------
- -- ------------------------------
-------------------- -- ----------------------- -- --------
-------------------- -- ----------------------- -- --------
----------------- -- ---- ------- ---------publishReplay
publishReplay 与 publish 的行为类似，但是它会在订阅时发布 Observable 中的所有数据，而不是等到观察者调用 connect 后才开始发送数据。
-- -------------------- ---- ------- ----- ------ - -------------------- -------- ------- -- -------- ------- ---------------- - -- ------------------------------ -------------------- -- ----------------------- -- -------- -------------------- -- ----------------------- -- -------- -----------------
上面的代码中，我们将 publishReplay 操作符用于 interval Observable，同时传入了 2 作为 replay 参数，这意味着 Observable 中的最后两个数据会被缓存并在订阅时就会被触发。
publishLast
publishLast 会将 Observable 转变为一个 Connectable Observable，并且只会发出最后一个值。
-- -------------------- ---- ------- ----- ------ - -------------------- -------- ------- -- -------- ------- ------------- - -- ------------------------------ -------------------- -- ----------------------- -- -------- -------------------- -- ----------------------- -- -------- -----------------
上面的代码中，我们使用了 publishLast 操作符。它会创建一个 Connectable Observable 并且只会发出最后一个值。
Multicasting 的使用场景
当我们需要处理多个订阅者的情况时，Multicasting 会变得非常有用。这可以避免多次访问同一个数据源，并且减少了计算时间和内存使用。
下面是一些使用 Multicasting 的场景：
WebSocket
WebSocket 经常用于实时数据更新并且会产生大量网络流量。通过在 WebSocket 上使用 Multicasting，可以避免多个订阅者向服务器发送重复请求并减少流量。
-- -------------------- ---- -------
----- ------ - --- ---------------------------------
----- -------- - --- --------------------- -- -
---------------------------------- ------- -- -
--------------------------
---
--------
---------- -- ------------------
-------
--
------------------------- -- ----------------- -- ---------------
------------------------- -- ----------------- -- ---------------上面的代码中，我们通过 WebSocket 创建了一个 Observable，然后使用 share 操作符来多播这个 Observable。这样，任意数量的订阅者都可以订阅这个数据源。
UI 事件
在处理 UI 事件时，Multicasting 也可以提高性能。由于 UI 事件往往非常频繁，所以可以使用 Multicasting 来避免多个处理器发送重复的事件。
const button = document.getElementById('myButton');
const click$ = fromEvent(button, 'click').pipe(share());
click$.subscribe((event) => console.log(`Handler A: ${event.x}`));
click$.subscribe((event) => console.log(`Handler B: ${event.y}`));上面的代码中，我们使用了 fromEvent 方法创建了一个 Observable，然后使用 share 操作符多播这个 Observable。通过这种方式，我们可以避免多次访问 UI 操作，提高代码性能。
结论
在本篇文章中，我们讨论了 RxJS 中的 Multicasting 概念以及如何使用它来处理多个订阅者的情况。我们介绍了一些 Multicasting 操作符，例如 share、publish、publishReplay 和 publishLast，并且讨论了 Multicasting 的使用场景。
使用 Multicasting 可以避免多次访问同一个数据源，并且减少计算时间和内存使用。当我们需要处理多个订阅者的情况时，Multicasting 会变得非常有用。希望本篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67305600eedcc8a97c91a837