This is mainly an RxJs best practice/approach question, since my POC code works but I\'m brand new to RxJs.
The question boils down to .subscribe() vs <
The difference between subscribe() and .publish().connect() is in when they subscribe to its source Observable. Consider the following Observable:
let source = Observable.from([1, 2, 3])
This Observable emits all values to an Observer right when it subscribes. So if I have two Observers then they receive all values in order:
source.subscribe(val => console.log('obs1', val));
source.subscribe(val => console.log('obs2', val));
This will print to console:
obs1 1
obs1 2
obs1 3
obs2 1
obs2 2
obs2 3
On the other hand calling .publish() returns a ConnectableObservable. This Observable doesn't subscribe to it's source (source in our example) in its constructor and only keeps its reference. Then you can subscribe multiple Observers to it and nothing happens. Finally, you call connect() and the ConnectableObservable subscribes to the source which starts emitting values. This time there're already two Observers subscribes so it emits values to both of them one by one:
let connectable = source.publish();
connectable.subscribe(val => console.log('obs1', val));
connectable.subscribe(val => console.log('obs2', val));
connectable.connect();
Which prints to console:
obs1 1
obs2 1
obs1 2
obs2 2
obs1 3
obs2 3
See live demo: http://plnkr.co/edit/ySWocRr99m1WXwsOGfjS?p=preview