RxJS - .subscribe() vs .publish().connect()

Question

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 .publish().connect(), since they both appear to do the same thing.

In my angular2 app, I have a button that calls a function to log the user out, which calls a function in my service that performs some server side actions and returns me a URL to redirect the user to. In order to initiate the request I call .subscribe() to cause the observable to start producing values. I was reading an article on "Cold vs Hot Observables" and it another approach would be to call .publish().connect() instead of .subscribe(). Is there any benefit to either approach.

<a (click)="logout()">Logout</a>

The logout function looks like this:

logout.component.ts

logout() { this.authService.logout(); }

And the service (actual logout) looks like this:

auth.service.ts

logout() : Observable<boolean>  {
        this.http.get(this.location.prepareExternalUrl('api/v1/authentication/logout'))
            .map(this.extractData)
            .catch(this.handleError)
            .do((x: string) => { window.location.href = x; })
            .subscribe();    // Option A - 

        return Observable.of(true);

    }

auth.service.alternative.ts

logout() : Observable<boolean>  {
        this.http.get(this.location.prepareExternalUrl('api/v1/authentication/logout'))
            .map(this.extractData)
            .catch(this.handleError)
            .do((x: string) => { window.location.href = x; })
            .publish()  // Option B - Make connectable observable
            .connect(); // Option B - Cause the connectable observable to subscribe and produce my value       

        return Observable.of(true);
    }

Answer 1

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

Answer 2

This sidesteps your question a bit but you may find it helpful:

I would not return a different observable stream from the one that calls the http service because doing so makes it impossible for the calling function to:

• cancel the stream
• modify the stream
• determine whether the operation was successful

Instead I'd do:

auth.servive.ts

logout() : Observable<string>  {
       return this.http.get(...).map(this.extractData)          
            .catch(this.handleError);
}

Now the calling code can do whatever it wants with the resulting url

logout.component.ts

logout(){
    this.authService.logout().subscribe(
        url => window.location.href = url,
        err => {
            /*todo: handle if error was thrown by authService.handleError*/
        }
    );
}