Pausing or buffering an RxJS 6 observable when the page is inactive

Question

Pausing or buffering an RxJS 6 observable when the page is inactive

Currently, I am dealing with a stream of letters that need to be arranged in the correct order to form a word. However, an issue arises when the user switches tabs, minimizes the browser, or switches applications - the behavior mimics using setTimeout(), resulting in a jumbled order and lost items. Despite attempting to utilize functions like bufferWhen(), bufferToggle(), takeUntil(), publish(), and connect(), none of them have helped me achieve my objective. While considering using delayWhen, it seems deprecated and not practical as it immediately halts the stream. Could you suggest which functions I should use and how? Here's the snippet of my code:

export class MyComponent implements AfterViewInit {
  private visibilityChange$ = fromEvent(document, 'visibilitychange').pipe(startWith('visible'), shareReplay({ refCount: true, bufferSize: 1 }));
  private show$ = this.visibilityChange$.pipe(filter(() => document.visibilityState === 'visible'));
  private hide$ = this.visibilityChange$.pipe(filter(() => document.visibilityState === 'hidden'));

  public ngAfterViewInit() {
    const lettersStream$ = zip( // add delay for each letter
            from(['w', 'o', 'r', 'd']),
            interval(1000))
           // pause when hide$ fires, resume when show$
          .pipe(map(([letter, delayTime]) => letter))
          .subscribe(console.log);
  }
}

I have created a demonstration on stackblitz with the main goal being to observe (and halt writing when tab is inactive) how the phrase appears on the screen.

angular typescript asynchronous rxjs rxjs6

Answer 1

Answer №1

In a previous project called RxJS Snake Game, I implemented a similar pause/unpause feature which can be helpful for your case.

The core idea is to use an interval(1000) as the foundation, serving as the source of truth for all actions. The goal then becomes to make this interval pausable based on visibility changes: emitting events when visible and halting on hide. By simply ceasing to listen to the source interval during hide and resuming on show, the implementation can be simplified. Let's delve into the exact approach:

To experiment with the modified StackBlitz demo code, visit RxJS Pause Observable.

import { of, interval, fromEvent, timer, from, zip, never } from 'rxjs';
import { delayWhen, tap, withLatestFrom, concatMap, take, startWith, distinctUntilChanged, switchMap, shareReplay, filter, map, finalize } from 'rxjs/operators';

console.log('-------------------------------------- STARTING ----------------------------')

class MyComponent {
  private visibilityChange$ = fromEvent(document, 'visibilitychange')
    .pipe(
      map(x => document.visibilityState),
      startWith('visible'),
      shareReplay(1)
    );

  private isVisible$ = this.visibilityChange$.pipe(
    map(x => x === 'visible'),
    distinctUntilChanged(),
  );

  constructor() {
    const intervalTime = 1000;
    const source$ = from('word or two'.split(''));
    /** should remove these .pipe(
        concatMap(ch => interval(intervalTime).pipe(map(_ => ch), take(1)))
      );*/

    const pausableInterval$ = this.isVisible$.pipe(
      switchMap(visible => visible ? interval(intervalTime) : never()),
    )

    const lettersStream$ = zip(pausableInterval$, source$).pipe(
      map(([tick, letter]) => letter),
    ).subscribe(letter => {
      this.writeLetter(letter);
    });
  }

  private writeLetter(letter: string) {
    if (letter === ' ') letter = '\u00A0'; // fix for spaces
    document.body.innerText += letter;
  }
}

const component = new MyComponent();

This snippet above showcases code directly pulled from StackBlitz, replicated here for better understanding.

Let's break down some key components:

Take note of visibilityChange$ and isVisible$. They are slightly altered to emit either 'visible' or 'hidden' depending on document.visibilityState. The latter outputs true when document.visibilityState is 'visible'.
Observe the behavior of source$. It emits a letter and pauses for 1 second using concatMap and interval combined with take(1), repeating this process until no characters remain in the text.
Focus on pausableInterval$. This observable, driven by this.isVisible$ that adjusts according to document.visibilityState, will output items every second or nothing at all thanks to never().
Lastly, check out lettersStream$. Utilizing zip(), it pairs up pausableInterval$ and source$, retrieving one letter from the source alongside a tick from the pausable interval. If pausableInterval$ stops emitting due to a visibility change, zip will also wait, requiring both observables to emit concurrently to trigger a subscription event.

Answer 2

In a previous project called RxJS Snake Game, I implemented a similar pause/unpause feature which can be helpful for your case.

The core idea is to use an interval(1000) as the foundation, serving as the source of truth for all actions. The goal then becomes to make this interval pausable based on visibility changes: emitting events when visible and halting on hide. By simply ceasing to listen to the source interval during hide and resuming on show, the implementation can be simplified. Let's delve into the exact approach:

To experiment with the modified StackBlitz demo code, visit RxJS Pause Observable.

import { of, interval, fromEvent, timer, from, zip, never } from 'rxjs';
import { delayWhen, tap, withLatestFrom, concatMap, take, startWith, distinctUntilChanged, switchMap, shareReplay, filter, map, finalize } from 'rxjs/operators';

console.log('-------------------------------------- STARTING ----------------------------')

class MyComponent {
  private visibilityChange$ = fromEvent(document, 'visibilitychange')
    .pipe(
      map(x => document.visibilityState),
      startWith('visible'),
      shareReplay(1)
    );

  private isVisible$ = this.visibilityChange$.pipe(
    map(x => x === 'visible'),
    distinctUntilChanged(),
  );

  constructor() {
    const intervalTime = 1000;
    const source$ = from('word or two'.split(''));
    /** should remove these .pipe(
        concatMap(ch => interval(intervalTime).pipe(map(_ => ch), take(1)))
      );*/

    const pausableInterval$ = this.isVisible$.pipe(
      switchMap(visible => visible ? interval(intervalTime) : never()),
    )

    const lettersStream$ = zip(pausableInterval$, source$).pipe(
      map(([tick, letter]) => letter),
    ).subscribe(letter => {
      this.writeLetter(letter);
    });
  }

  private writeLetter(letter: string) {
    if (letter === ' ') letter = '\u00A0'; // fix for spaces
    document.body.innerText += letter;
  }
}

const component = new MyComponent();

This snippet above showcases code directly pulled from StackBlitz, replicated here for better understanding.

Let's break down some key components:

Take note of visibilityChange$ and isVisible$. They are slightly altered to emit either 'visible' or 'hidden' depending on document.visibilityState. The latter outputs true when document.visibilityState is 'visible'.
Observe the behavior of source$. It emits a letter and pauses for 1 second using concatMap and interval combined with take(1), repeating this process until no characters remain in the text.
Focus on pausableInterval$. This observable, driven by this.isVisible$ that adjusts according to document.visibilityState, will output items every second or nothing at all thanks to never().
Lastly, check out lettersStream$. Utilizing zip(), it pairs up pausableInterval$ and source$, retrieving one letter from the source alongside a tick from the pausable interval. If pausableInterval$ stops emitting due to a visibility change, zip will also wait, requiring both observables to emit concurrently to trigger a subscription event.

Answer 3

Answer №2

Feeling a bit unsure about how to tackle this scenario, but here is a possible solution:

Firstly, start by implementing the following:

private isVisible$ = this.visibilityChange$.pipe(
                       filter(() => document.visibilityState === 'visible'), 
                       distinctUntilChanged()); // just a precautionary step

Next, proceed with the following:

const lettersStream$ = this.isVisible$.pipe(
        switchMap((isVisible) => (isVisible)
          ? zip( // introducing a delay for each letter
              from(['w', 'o', 'r', 'd']),
              interval(1000))
            .pipe(map(([letter, delayTime]) => letter))
          : NEVER
        )
      ).subscribe(console.log);

Essentially, the switchMap function should be triggered every time the visibility changes - if visible, subscribe to the source, otherwise do nothing.

In this example context, the outcome might not be entirely accurate because the from() function will consistently emit the same sequence. However, in a real-world situation with a non-static source, it should perform as expected.

Answer 4

Feeling a bit unsure about how to tackle this scenario, but here is a possible solution:

Firstly, start by implementing the following:

private isVisible$ = this.visibilityChange$.pipe(
                       filter(() => document.visibilityState === 'visible'), 
                       distinctUntilChanged()); // just a precautionary step

Next, proceed with the following:

const lettersStream$ = this.isVisible$.pipe(
        switchMap((isVisible) => (isVisible)
          ? zip( // introducing a delay for each letter
              from(['w', 'o', 'r', 'd']),
              interval(1000))
            .pipe(map(([letter, delayTime]) => letter))
          : NEVER
        )
      ).subscribe(console.log);

Essentially, the switchMap function should be triggered every time the visibility changes - if visible, subscribe to the source, otherwise do nothing.

In this example context, the outcome might not be entirely accurate because the from() function will consistently emit the same sequence. However, in a real-world situation with a non-static source, it should perform as expected.

Pausing or buffering an RxJS 6 observable when the page is inactive

Answer №1

Answer №2

Similar questions

The parameter 'prev: todoType[] => todoType[]' cannot be assigned to the type 'todoType[]'.ts(2345)

Encountered an issue while trying to install ngrx store with Angular 13 - unable to resolve the dependency

Error occurs when using JSON.stringify with a Typescript array map

Unable to download essential dependencies using NPM

"Learn how to dynamically update a value based on the selected option in a drop-down menu in Angular

Sending properties of an element to a function within Angular version 4 or 5

Using Typescript generics to create parameter and argument flexibility for both classes and

"Endless loop conundrum in ngrx router

Angular - Loading images on the fly

How do I implement branch code using TypeScript types in Svelte?

The method to create a global generic class in TypeScript

Visualize complex JSON data within an Angular Material Table

Exploring the functionality of the scan operator within switchMap/mergeMap in RxJS

Encountering issues when passing a string as query parameters

How can I make angular material data table cells expand to the full width of content that is set to nowrap?

Creating HTML code using an array of objects

Receiving real-time updates every second from the API

Prevent the element attribute from being enabled before the onclick function is triggered

Dynamically created HTML elements have no events attached to them in Angular and jQuery

When utilizing the package, an error occurs stating that Chart__default.default is not a constructor in chart.js