CODEWITHSUNDEEP
angularobservable
tlq
tlq

Reputation: 991

Angular 2 subscribe/unsubscribe through a button

I m trying to check the internet connection. Whenever connection is lost, i want to show an alert to the user and if user clicks on the refresh button i want to check the connection again... But when i unsubscribe when the connection is lost, i cant subscribe again. what am i doing wrong ?

  constructor( private alertController: AlertController ){

                    let connection = this.checkConnection().subscribe(data => {
                      let alert = this.alertController.create({
                          title: 'Error',
                          subTitle: "You lost connection !",
                          buttons: [ {
                     text: 'Refresh',
                     handler: () => {
                     connection.subscribe();
                }}]
               });

                  if(data == false){
                      alert.present();
                      connection.unsubscribe();
                  }
              }
                 );

        checkConnection() {

                   return Observable
                    .interval(500)
                    .map(() => {
                    return navigator.onLine;
                    });
                 }

UPDATE:

     let refresh$ = new Subject();
          let connection$ = refresh$.mergeMap(() => {
                        return Observable
                                .interval(50)
                                .map(() => navigator.onLine)
                                .filter(onLine => !onLine) 
                                .take(1); 
                      });

                      refresh$.next();

            connection$.subscribe(data => {
                    console.log(data)

            })

Upvotes: 0

Views: 796

Answers (1)

snorkpete
snorkpete

Reputation: 14574

I think you're misunderstanding how observables work.

When you unsubscribe from an observable, you, as the consumer of the observable, are telling the observable that you no longer want any more values to be emitted to you. That's the signal to the observable to tear down its producer of values. So, unsubscribe is a one way street - there's no going back.

But you can probably still achieve what you want. From your code, it seems as though there is a navigator.onLine boolean that you can check to determine if you're currently online or not. And, if that boolean is false, you want to show a prompt telling the user that they are disconnected. In addition, it seems as though you want to stop checking for a connection at that point, until the user clicks 'Refresh' and then at that point, you want to resume checking.

If I'm getting your flow correct, then you can achieve that with using an observable chain.

Basically, you need multiple observables that you compose to get the effect that you want.

let refresh$ = new Subject();
let connection$ = refresh$.mergeMap(() => {
                    // on each refresh,
                    // create a new observable that checks every 50ms,
                    // but only emits if we are not online
                    return Observable
                            .interval(50)
                            .map(() => navigator.isOnline)
                            .filter(isOnline => !isOnline)  //only emit a when we go offline 
                            .take(1);  // just need a single value to notify us to bring up our alert prompt
                  });

So, in the example above, refresh$ is a Subject that you call next() on whenever you want to start checking for an offline connection. You'll call refresh.next() manually for your first check, and then call refresh$.next() on each press of the refresh button after that.

connection$ is your observable that you subscribe to where you show your alert box whenever it receives a value.

I may not have gotten your precise use case correct - i had to guess based on the code you submitted - but hopefully this gets you thinking as to how you can go about achieving the result you want.

Upvotes: 1

Related Questions