In RxJS, why does a pipe get executed once for each subscription?

Question

I want to have multiple subscriptions to react to an observable event, but I want to log the event as well, so I pipe it through a do() operator in which I do the logging.

The problem is, the event gets logged once for each of the subscriptions I create!

I'm getting around this at the moment by creating a Subject and calling next on it from an event callback, which allows me to log the event once and trigger multiple subscriptions as well.

Here is some code that demonstrates the issue: https://stackblitz.com/edit/rxjs-xerurd

I have a feeling I'm missing something, isn't there a more "RxJS" way of doing this?

EDIT:

I'm not asking for a difference between hot & cold observable, in fact I was using a hot observable - the one created by fromEvent() and was wondering why does my presumably hot event source behave like it's cold.

I realize now - after reading about share() - that pipe() "turns" your observable cold i.e. returns a cold one based on the your source (which may be cold, may be hot)

Angarsk

This is what RxJS is supposed to do. You can use share() operator if you want to keep only one subscription to its source. – Lexical

Thank you for answering so quickly! share() indeed seems to be what I'm looking for, but could you perhaps (if you know why it is so) explain the reasoning behind such a design? It seems to me that maybe "sharing" should be a default and, "not sharing" should have an operator. – Angarsk

Possible duplicate of What does subscribe do, and how it is related to Observable? – Forespent

Answer 1

Because Observable sequences are cold by default, each subscription will have a separate set of site effects.

If you want your side effect to be executed only once - you can share subscription by broadcasting a single subscription to multiple subscribers. To do this you can use share, shareReplay, etc.

To better understand how it works, what is "cold" and publish, refer to the RxJS v4 documentation:

4.8 Use the publish operator to share side-effects

Leukas

if share() and multicasting stuffs did not solve your issue. Look at my answer. ;) – Sastruga

Answer 2

EDIT : share() is finally working. Please have a look to the comments below. Thx to @Oles Savluk.

I let my answer below for the records. It may help.

---

share() and multicasting stuffs did not solve my very similar issue.

Here is how I solved it : https://stackblitz.com/edit/rxjs-dhzisp

const finalSource = new Subject();
fromEvent(button3, "click").pipe(
  tap(() => {
    console.log("this happens only once")
  }) 
).subscribe(() => finalSource.next())

finalSource.subscribe(
  () => console.log("first final subscription")
)

finalSource.subscribe(
  () => console.log("second final subscription")
)

finalSource.subscribe(
  () => console.log("third final subscription")
)

Affective

You basically did multicasting "manually". Same will happen if you put share() right after tap() in badSource - side effect will be executed once. – Leukas

This is totally fine, but longer and you are not propagating errors which might cause issues – Leukas

Ooooooooooooooooooooooooooo ... I think I just figured something out : during my tests, I put the share() BEFORE the tap(), and indeed it did not work! Now, it makes sense to me: it can only "share" what is "before itself". I need to "share" AFTER all the pipes. Anyway, thank you so much for this small explanation (and you are totally right about the no-propagation of errors ... I missed this part) ... feeling dumb right now! :( – Sastruga