Multicasting angular là gì?

Many times in Angular application development we’ll have an Observable, and want to use the values from that Observable to do different things in the UI.

Let’s imagine we’re building this interface that shows information about a fish, and we want to show users a schedule of when that fish is available based on the hemisphere of the world selected.

Multicasting angular là gì?

In our component we’ll get the response of an HTTP request to the animal crossing API. We’re using HTTPClient which returns an Observable. We want to display data from that HTTP request in our UI so a user can see information about the fish, but we also want to display a custom built schedule based on that data and input from something else.

The API returns an object that looks something like this:

{
   "id":10,
   "fileName":"killifish",
   "name":{
      "name-en":"killifish",
      ...
   },
   "availability":{
      "month-northern":"4-8",
      "month-southern":"10-2",
      "time":"",
      "isAllDay":true,
      "isAllYear":false,
      "location":"Pond",
      "rarity":"Common"
   },
   "shadow":"Smallest (1)",
   "price":300,
   "priceCj":450,
   "catchPhrase":"I caught a killifish! The streams are safe again.",
   "museumPhrase":"Ah, the magnificent killifish! Did you know there are over 1,000 different species? My own favorite killifish species are the mangrove, which can live on land for weeks, breathing air! And the mummichog, the first fish ever brought to space. I wonder if the killifish you've brought me is related to either those intrepid explorers?",
}

We want to get the availability based on the hemisphere(northern or southern) the user cares about, and display the months during which that fish is available, by creating an array like this:

[
   {
      "month":"January",
      "available":false
   },
   {
      "month":"February",
      "available":true
   },
   ...
]

We might consider doing something like this (note we are using the Async pipe in our component template to subscribe to fish$):

// fish.component.html 

  
    {{fish.name['name-en']}}
    {{fish.price | currency }}
  
  
    

Multicasting angular là gì?
"{{fish.museumPhrase}}"

Northern Hemisphere Southern Hemisphere

{{month.month}}

The {{fish.name['name-en']}} is available at all times

The {{fish.name['name-en']}} is available from {{fish.availability.time}}

This will give us a displayedSchedule$ Observable with an array that displays either the northern or southern hemisphere schedule when the value of selectedHemi changes. Again, assume that we’re using the Async pipe in our template to subscribe to this Observable because we want the tear down functionality of our Angular component to handle unsubscribing for us.

But by doing this we’re creating an additional subscription to fish$ when we subscribe to displayedSchedules, which means our Observable is being executed twice, quite unnecessarily. Not to mention rude, this awesome developer built a great free API indexing Animal Crossing stuff, and we’re thoughtlessly hitting it twice? Ruuuuuude. (ps. how many of ya’ll have been doing something like this without even realizing?)

How can we avoid this?

Instead of an Observable, we can use a Subject instead. Subjects can have multiple subscribers and only execute their context once. To convert an Observable to a Subject we can use the multicast operator.

The multicast operator is a bit of a bear to understand - it takes a selector as a parameter and according to the docs returns

“An Observable that emits the results of invoking the selector on the items emitted by a ConnectableObservable that shares a single subscription to the underlying stream.”

A more palatable summary from the docs is

“A multicasted Observable uses a Subject under the hood to make multiple Observers see the same Observable execution. Multicast returns an Observable that looks like a normal Observable, but works like a Subject when it comes to subscribing. multicast returns a ConnectableObservable, which is simply an Observable with the connect() method.

The connect() method is important to determine exactly when the shared Observable execution will start. Because connect() does source.subscribe(subject) under the hood, connect() returns a Subscription, which you can unsubscribe from in order to cancel the shared Observable execution.

So let’s pipe the multicast operator to source Observable fish$ with a new

[
   {
      "month":"January",
      "available":false
   },
   {
      "month":"February",
      "available":true
   },
   ...
]
1 (because we want late subscribers to get the value).


On the Subject of Subjects …

subject - a special type of Observable that allows values to be multicasted to many Observers

behaviorSubject - a subject that can ‘store’ a current value that new subscribers will receive

replaySubject - a subject than can send old values to new subscribers


this.fish$ = this.route.paramMap.pipe(
     switchMap((params: ParamMap) => {
       return this.acnhService.getFish(params.get('id')).pipe(map((res: Fish) => {
         return {
           ...res,
           uiSchedule: {
             northern: buildSchedule(res.availability, 'northern'),
             southern: buildSchedule(res.availability, 'southern')
           }
         }
       }));
     }),
     multicast(new ReplaySubject(1))
   )

… now we have nothing displaying in our UI? Why? We still have the async pipe subscribing to fish$, but fish$ is now a ConnectableObservable, and we must call the

[
   {
      "month":"January",
      "available":false
   },
   {
      "month":"February",
      "available":true
   },
   ...
]
4 method on it to trigger our source observables execution.

However, this means we must also remember to unsubscribe from that subscription created by the connect method, so doesn’t that defeat the purpose of using the async pipe? Yep. Boo. BUT, fear not, gentle reader, we can use the

[
   {
      "month":"January",
      "available":false
   },
   {
      "month":"February",
      "available":true
   },
   ...
]
5 operator, instead of having to manage the
[
   {
      "month":"January",
      "available":false
   },
   {
      "month":"February",
      "available":true
   },
   ...
]
4 method ourselves.

refCount makes the multicasted Observable automatically start executing when the first subscriber arrives, and stop executing when the last subscriber leaves.

RefCount returns an Observable that keeps track of how many subscribers it has, it will start executing when subscribers is more than 0, and stops when subscribers are 0 again. This means when we use our async pipe on fish$, the count will become 1, when we use our async pipe on displayedSchedule$ the count will become 2 and when our component is destroyed and the async pipes unsubscribe, the count will go back to 0.

Our final code looks something like this

    this.fish$ = this.route.paramMap.pipe(
      switchMap((params: ParamMap) => {
        return this.acnhService.getFish(params.get('id')).pipe(map((res: Fish) => {
          return {
            ...res,
            uiSchedule: {
              northern: buildSchedule(res.availability, 'northern'),
              southern: buildSchedule(res.availability, 'southern')
            }
          }
        }));
      }),
      multicast(new ReplaySubject(1)),
      refCount()
    )

In summary, when we have an Observable we’d like to use a source for various purposes without executing its context every time, we can use the

[
   {
      "month":"January",
      "available":false
   },
   {
      "month":"February",
      "available":true
   },
   ...
]
9 operator to take a Subject and use it to share the source execution of our source Observable. The multicast operator returns a ConnectableObservable type, on which we CAN use the
[
   {
      "month":"January",
      "available":false
   },
   {
      "month":"February",
      "available":true
   },
   ...
]
4 method to create the subscription to our source Observable(the HTTP request to get a fish). A more management approach is to use the refCount operator which will count subscriptions and call the
[
   {
      "month":"January",
      "available":false
   },
   {
      "month":"February",
      "available":true
   },
   ...
]
4 method to subscribe to the source Observable once the first subscription is created and run tear down logic when the subscription count returns to 0 (AKA all the subscriptions have been unsubscribed).