Make BehaviorSubject persist across browser tabs? (@HostListener?)

Question

We've got an Angular 6 app consisting of Excel-like grids. When a user updates one grid, myFunction() runs, and from another component we need to be able to tell if myFunction() is still in progress or not.

I found a solution using RXJS BehaviorSubject. Then I realized that this solution does not persist across browser tabs (since each tab is its own instance of Angular). This is a problem since users may have one grid open on one monitor, another grid open in another.

So I found this @HostListener solution https://stackoverflow.com/a/45638992/6647188, but I can't figure out how to transition my BehaviorSubject logic to this strategy. Perhaps there are alternatives to saving and subscribing to localStorage besides @HostListener, so I don't have to use an event? Otherwise, I could try using @HostListener with my own custom manually emitted event, though I don't know how to do that, either. My code:

Component 1 (US Dollars grid):

myFunction() {
     self.myService.isFunctionStillRunningBehaviorSubject.next(true);
     this.get(path).subscribe (
         data = > {  
           self.myService.isFunctionStillRunningBehaviorSubject.next(false); 
         }
     );
}

Component 2 (Euros grid):

public subscription;

ngOnInit() {
    this.myService.isFunctionStillRunningObservable.subscribe(
        data => {
            if (data === true) {
                console.log("myFunction() is still running!");
            }
        }
    );
}

My Service:

import { Observable, BehaviorSubject } from 'rxjs';

public isFunctionStillRunningBehaviorSubject = new BehaviorSubject<boolean>(null);

public isFunctionStillRunningObservable = this.isFunctionStillRunningBehaviorSubject.asObservable();

Even using localStorage, I still won't be able to tell if the function is in progress if it was initiated by someone else on a different machine - but on a user per user basis, localStorage may be adequate enough.

When you say across "Tabs" do you mean browser tabs? Or Tabs within your angular application similar to MaterialTabs like - https://material.angular.io/components/tabs/overview. If its browser tab, please update your question to avoid confusion. — user2216584, Jun 20 '19 at 20:00
This articles has some ideas for syncing browser tabs with NgRx store: https://blog.angularindepth.com/keeping-browser-tabs-in-sync-using-localstorage-ngrx-and-rxjs-87de3bca4e2c. There are some difficult issues here though, eg. what happens if the user closes the browser tab while `this.get(path)` is in progress. — Will Taylor, Jun 21 '19 at 14:10

score 2 · Answer 1 · answered Jun 20 '19 at 20:58

If you need to have communication between two separate browsers (two different people) you will probably need to look into using some type of Socket communication. For Node it would be something like SocketIO.. If your backend is in C# maybe SignalR.

Make BehaviorSubject persist across browser tabs? (@HostListener?)

1 Answers1