stopWatching() does not work

[vqn1204]

Describe the bug
Calling stopWatching() fires onTimerStart() for some reason and does not stop watching. I have ping set to 2 seconds and the user idle service continues to ping.

To Reproduce
Steps to reproduce the behavior:

1. Set ping to a low time
2. Set onTimerStart() to log to console
3. Start Watching
4. Stop Watching

Expected behavior
Service stops watching, does not ping or watch for user idle anymore

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome

[briangullo]

Hello,
I'm using v2.1.2 (the latest) and the behavior is working as expected. Can you post you code?

Thanks!
B

[vqn1204]

Project is too complex to include everything, but here is minimum code on how I am using the service:

timeout.component.ts

 ngOnInit() {
    // begins countdown after user has been inactive for a certain amount of time
    this.userIdleService.onTimerStart().subscribe(count => {
      console.log('timer start')
      this.overlayShowing = true;
      this.timeLeft = (this.timeout - count); // match timeout with timeout when component is imported into core module
    });

another component:

ngOnInit() {
    this.userIdleService.startWatching();
    this.userIdleService.ping$.subscribe(() => {
        console.log('pinging');
        this.userIdleService.stopWatching(); // when this is called, "timer start" is logged to console twice and the service continues to ping
    });

[briangullo]

Let me share with you how I'm using it.

app.module.ts (imports/global config)
UserIdleModule.forRoot( { idle: 600, timeout: 300, ping: 600 })

app.component
`ngOnInit(){
if(condition) {
this.myService.myMethod().subscribe(() => {
this.userIdle.startWatching();
this.myService.initializePingSubscriptions();
});
}

this.userIdle.onTimerStart().subscribe(count => {
//do a bunch of work including resetting timer and starting timer etc.
});

this.userIdle.onTimeout().subscribe(() => {
// do a bunch of work
});
}`

myService
`
initializePingSubscriptions() {
//rest of userIdle subscriptions are in app.component.
//ping$ is not available till after timer has been initialized and started.
this.userIdle.ping$.subscribe((value) => {
//do work
});
}

login(***)
{
//if login successful, I do this....
this.userIdle.startWatching();
this.initializePingSubscriptions();
}

logout() {
//other work
this.userIdle.stopWatching();
}
`

[vqn1204]

Let me share with you how I'm using it.

app.module.ts (imports/global config)
UserIdleModule.forRoot( { idle: 600, timeout: 300, ping: 600 })

app.component
`ngOnInit(){
if(condition) {
this.myService.myMethod().subscribe(() => {
this.userIdle.startWatching();
this.myService.initializePingSubscriptions();
});
}

this.userIdle.onTimerStart().subscribe(count => {
//do a bunch of work including resetting timer and starting timer etc.
});

this.userIdle.onTimeout().subscribe(() => {
// do a bunch of work
});
}`

myService
`
initializePingSubscriptions() {
//rest of userIdle subscriptions are in app.component.
//ping$ is not available till after timer has been initialized and started.
this.userIdle.ping$.subscribe((value) => {
//do work
});
}

login(***)
{
//if login successful, I do this....
this.userIdle.startWatching();
this.initializePingSubscriptions();
}

logout() {
//other work
this.userIdle.stopWatching();
}
`

My userIdle.stopWatching() only works properly when called within userIdle.onTimeout()

[MuneebSaeed30]

userIdle.stopWatching is still not working and trigger onTimout Function. Please Help

[kleky]

I'm also having an issue with ping. It appears that ping just doesn't stop when calling stopWatching()

"angular-user-idle": "^2.2.4",

export enum SessionEvent {
  COUNTDOWN= 'countdown',
  TIMEOUT = 'timeout',
  PING = 'ping',
}

interface TimerEvent {
  event: SessionEvent;
  value?: number;
}

@Injectable({
  providedIn: 'root'
})
export class SessionService {


  @LocalStorage()
  private cachedTime;
  private sub: Subscription;
  // private logout$: Observable<void> = this.store.select();

  constructor(private userIdle: UserIdleService,
              private router: Router,
              private toastService: ToastService) {}

  /**
   * Start session timer for timeout after x minutes
   * @param reset Force reset the timer ignoring any locally stored timer
   */
  startSessionTimer(reset: boolean): void {

    this.userIdle.startWatching();
    const timeoutTotalSeconds = (this.userIdle.getConfigValue().idle + this.userIdle.getConfigValue().timeout) / 1000;
    console.log('timeout (s)', timeoutTotalSeconds);

    if (reset || !this.cachedTime) {
      console.log(`reset: ${ reset }, ${ this.cachedTime ? 'timer exists' : 'new timer' }`);
      this.cachedTime = Date.now();
    }

    const ping$: Observable<TimerEvent> =  this.userIdle.ping$.pipe(map(_ => ({ event: SessionEvent.PING })));
    const timer$: Observable<TimerEvent> =
      this.userIdle.onTimerStart().pipe(
        map(value => ({ value: environment.sessionTimeoutSeconds - value , event: SessionEvent.COUNTDOWN }))
      );
    const timeout$: Observable<TimerEvent> = this.userIdle.onTimeout().pipe(map(_ => ({ event: SessionEvent.TIMEOUT })));
    this.sub = merge(ping$, timer$, timeout$).subscribe((e) => {
      if (e.event === SessionEvent.PING) {
        console.log(`now: ${Date.now()} | cached: ${this.cachedTime} | diff: ${(Date.now() - this.cachedTime) / 1000} | timeout (s): ${timeoutTotalSeconds}`);
      }
      // if (Date.now() - this.cachedTime > timeoutTotalMilliseconds) {
      //
      // }
      if (e.event === SessionEvent.TIMEOUT) {
        this.userIdle.resetTimer();
        this.userIdle.stopTimer();
        this.userIdle.stopWatching();
        localStorage.clear();
        this.router.navigateByUrl('/login');
        this.toastService.warning('AUTH.SESSION_TIMEOUT');
      }
    });

  }

}

[archandran]

I also having the same issue. When userIdle.stopwatching() is calling onTimerStart() is calling internally. Please help me to resolve this issue

[DamarisParciu]

I don't know if this will help anyone, but if you use a subscribe for onTimerStart(), the value will be null when it is called by userIdle.stopWatching().
ex:

  this.userIdle.onTimerStart().pipe(
    // your code
  ).subscribe((nr) => {
  if (!nr) {
   return; // called by stopWatching();
  }
  // do your thing
  });