Receiving same message multiple times

[ebosantos]

I have set providers in app.module:

providers: [Ng2Cable, Broadcaster, ...]

And I use ng2-cable functionality on NavComponent:

constructor(..., private ng2cable: Ng2Cable, private broadcaster: Broadcaster) {
    this.initializeWebSocket();
  }

  private initializeWebSocket(): void {
    this.userService.getWebSocketToken().subscribe(res => {
      this.ng2cable.subscribe(`${environment.webSocketHost}/notification?token=${res.token}`, 'NotificationChannel');
      this.initializeWebSocketListening();
    });
  }

  private initializeWebSocketListening(): void {
    this.broadcaster.on<any>('new_notification').subscribe(
      message => {
        console.log(message);
      }
    );
  }

The problem is: Every time I logout and relogin, I receive duplicated messages even I call this.ng2cable.unsubscribe(); as:

ngOnDestroy() {
    if (this.ng2cable)
      this.ng2cable.unsubscribe();
  }

  logout(): void {
    this.userService.logout().subscribe(
      res => { this.ng2cable.unsubscribe(); this.redirectToLoginPage(); },
      error => { this.redirectToLoginPage(); });
  }

What I think is: Even ng2cable is being unsubscribed, broadcasters creates a new subscription every new login, printing a message in console (in my case) for current and past logins (unless I close the browser).

What do you recommend me, @viktor-shmigol ?

[viktor-shmigol]

@ebosantos Yep, I know about that issue. You can use this.broadcaster['_eventBus'] = []; after logout

  logout(): void {
    this.userService.logout().subscribe(
      (res) => {
        this.ng2cable.unsubscribe();
        this.broadcaster['_eventBus'] = []; 
        this.redirectToLoginPage();
      },
      error => { this.redirectToLoginPage(); });
  }

[ebosantos]

@viktor-shmigol It didn't work but has helped to find out a solution.

I don't know if a PR is welcomed, but the solution is:

broadcaster.ts

    unsubscribe() {
      this._eventBus.observers.forEach(observer => {
        observer.unsubscribe();
      });
    }

[NuclearMachine]

@viktor-shmigol Does not work, i get this error when i return.

Uncaught (in promise): TypeError: this._eventBus.asObservable is not a function TypeError: this._eventBus.asObservable is not a function at Broadcaster.on (broadcaster.js:12) at OrderPage.webpackJsonp.835.OrderPage.subscribeToOrderComment (order.ts:126) at OrderPage.webpackJsonp.835.OrderPage.ngOnInit (order.ts:93) at checkAndUpdateDirectiveInline (core.es5.js:10815) at checkAndUpdateNodeInline (core.es5.js:12238) at checkAndUpdateNode (core.es5.js:12177) at debugCheckAndUpdateNode (core.es5.js:12880) at debugCheckDirectivesFn (core.es5.js:12821) at Object.eval [as updateDirectives] (OrderPage_Host.html:1) at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12806) at Broadcaster.on (broadcaster.js:12) at OrderPage.webpackJsonp.835.OrderPage.subscribeToOrderComment (order.ts:126) at OrderPage.webpackJsonp.835.OrderPage.ngOnInit (order.ts:93) at checkAndUpdateDirectiveInline (core.es5.js:10815) at checkAndUpdateNodeInline (core.es5.js:12238) at checkAndUpdateNode (core.es5.js:12177) at debugCheckAndUpdateNode (core.es5.js:12880) at debugCheckDirectivesFn (core.es5.js:12821) at Object.eval [as updateDirectives] (OrderPage_Host.html:1) at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12806) at c (polyfills.js:3) at Object.reject (polyfills.js:3) at Tab.NavControllerBase._fireError (nav-controller-base.js:322) at Tab.NavControllerBase._failed (nav-controller-base.js:310) at nav-controller-base.js:365 at t.invoke (polyfills.js:3) at Object.onInvoke (core.es5.js:4149) at t.invoke (polyfills.js:3) at r.run (polyfills.js:3) at polyfills.js:3

[NuclearMachine]

@viktor-shmigol what you meant is this.broadcaster['_eventBus'].observers = [];