rxjs share with interval causes issue when waiting for next interval iteration

Question

I'm new to RxJs and need help/understanding for the following.

I have page that displays current covid cases. I have it setup to poll every 60 seconds. What I'm trying to understand is, if I subscribe to this observable via another new component, I have wait until the next iteration of 60 seconds is complete to get the data. My question is, if I want to share, is there any way to force to send the data and restart the timer?

I don't want 2 different 60 second intervals calling the API. I just want one, and the interval to restart if a new subscriber is initialized. Hope that makes sense.

this.covidCases$ = timer(1, 60000).pipe(
      switchMap(() =>
        this.covidService.getCovidCases().pipe(

          map(data => {
            return data.cases;
          }),
        ),
      ),
      retry(),
      share(),
    );

Answer 1

I think this should work:

const newSubscription = new Subject();

const covidCases$ = interval(60 * 1000).pipe(
  takeUntil(newSubscription),
  repeat(),
  switchMap(() =>
    this.covidService.getCovidCases().pipe(
      /* ... */
    ),
  ),
  takeUntil(this.stopPolling),
  shareReplay(1),
  src$ => defer(() => (newSubscription.next(), src$))
);

I replaced timer(1, 60 * 1000) + retry() with interval(60 * 1000).

My reasoning was that in order to restart the timer(the interval()), we must re-subscribe to it. But before re-subscribing, we should first unsubscribed from it.

So this is what these lines do:

interval(60 * 1000).pipe(
  takeUntil(newSubscription),
  repeat(),
  /* ... */
)

We have a timer going on, until newSubscription emits. When that happens, takeUntil will emit a complete notification, then it will unsubscribe from its source(the source produced by interval in this case).

repeat will intercept that complete notification, and will re-subscribe to the source observable(source = interval().pipe(takeUntil())), meaning that the timer will restart.

shareReplay(1) makes sure that a new subscriber will receive the latest emitted value.

Then, placing src$ => defer(() => (newSubscription.next(), src$)) after shareReplay is very important. By using defer(), we are able to determine the moment when a new subscriber arrives.

If you were to put src$ => defer(() => (console.log('sub'), src$)) above shareReplay(1), you should see sub executed logged only once, after the first subscriber is created. By putting it below shareReplay(1), you should see that message logged every time a subscriber is created.

Back to our example, when a new subscriber is registered, newSubscription will emit, meaning that the timer will be restarted, but because we're also using repeat, the complete notification won't be passed along to shareReplay, unless stopPolling emits.

StackBlitz demo.

Answer 2

This code creates an observable onject. I think what you should do is to add a Replaysubject instead of the Observable.

Replaysubjects gives the possibility to emit the same event when a new subscription occurs.

timer(1, 60000).pipe(
  switchMap(() =>
    this.covidService.getCovidCases().pipe(
      tap(result => {
        if (!result.page.totalElements) {
          this.stopPolling.next();
        }
      }),

      map(data => {
        return data.cases;
      }),
      tap(results =>
        results.sort(
          (a, b) =>
            new Date(b.covidDateTime).getTime() -
            new Date(a.covidDateTime).getTime(),
        ),
      ),
    ),
  ),
  retry(),
  share(),
  takeUntil(this.stopPolling),
).subscribe((val)=>{this.covidcases.next(val)});

This modification results in creating the timer once so when you subscribe to the subject it will emit the latest value immediately

Answer 3

You can write an operator that pushes the number of newly added subscriber to an given subject:

const { Subject, timer, Observable } = rxjs;
const { takeUntil, repeat, map, share } = rxjs.operators;

// Operator
function subscriberAdded (subscriberAdded$) {
  let subscriberAddedCounter = 0;
  return function (source$) {
    return new Observable(subscriber => {
      source$.subscribe(subscriber)
      subscriberAddedCounter += 1;
      subscriberAdded$.next(subscriberAddedCounter)
    });
  }
}

// Usage
const subscriberAdded$ = new Subject();

const covidCases$ = timer(1, 4000).pipe(
  takeUntil(subscriberAdded$),
  repeat(),
  map(() => 'testValue'),
  share(),
  subscriberAdded(subscriberAdded$)
)

covidCases$.subscribe(v => console.info('subscribe 1: ', v));
setTimeout(() => covidCases$.subscribe(v => console.info('subscribe 2: ', v)), 5000);
subscriberAdded$.subscribe(v => console.warn('subscriber added: ', v));

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.min.js"></script>

Future possibilities:

• You can update the operator easily to decrease the number in case you want to react on unsubscribers

!important

The takeUnit + repeat has already been postet by @AndreiGătej. I only provided an alternative way for receiving an event when a subscriber is added.

Running stackblitz with typescript

If the subscriberAdded operator needs some adjustements, please let me know and I will update