Using Long Polling with Angular 4

Question

Using Long Polling with Angular 4

I am looking for a way to monitor the progress of a certain task using API calls.

To achieve this, I have developed a service that executes these API calls every 1.5 seconds

Main Component

private getProgress() {
        this.progressService.getExportProgress(this.type, this.details.RequestID);
    }

Services.ts

public getExportProgress(type: string, requestId: string) {
    Observable.interval(1500)
        .switchMap(() => this.http.get(this.apiEndpoint + "Definition/" + type + "/Progress/" + requestId))
        .map((data) => data.json().Data)
        .subscribe(
        (data) => {
            if (!data.InProgress)
                // Stop further API calls here
        },
        error => this.handleError(error));
}

Although the API call is functioning properly, it continues even after the progress is complete (if (!data.InProgress). I need help in figuring out how to unsubscribe from the observable when this condition is met.

Any suggestions on how I can implement an unsubscribe feature based on if (!data.InProgress)?

Appreciate any guidance

angular typescript long-polling

Answer 1

Answer №1

One possible solution is to utilize the takeWhile operator.

For more information, refer to the official documentation: http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-takeWhile

The main functionality of this operator is to emit values from the source Observable only when they satisfy a certain condition specified by the predicate function. It then completes as soon as one value does not meet this condition anymore.

Here's a basic example scenario showcasing how it can be used:

Rx.Observable
  .interval(100)
  .takeWhile(x => x < 10)
  .subscribe(x => { console.log(x); });

Below is an example implementation using your code:

public getExportProgress(type: string, requestId: string) {
    Observable.interval(1500)
        .switchMap(() => this.http.get(this.apiEndpoint + "Definition/" + type + "/Progress/" + requestId))
        .map((data) => data.json().Data)
        .takeWhile((data) => data.InProgress)
        .subscribe(
        (data) => {
            ...
        },
        error => this.handleError(error));
}

Answer 2

One possible solution is to utilize the takeWhile operator.

For more information, refer to the official documentation: http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-takeWhile

The main functionality of this operator is to emit values from the source Observable only when they satisfy a certain condition specified by the predicate function. It then completes as soon as one value does not meet this condition anymore.

Here's a basic example scenario showcasing how it can be used:

Rx.Observable
  .interval(100)
  .takeWhile(x => x < 10)
  .subscribe(x => { console.log(x); });

Below is an example implementation using your code:

public getExportProgress(type: string, requestId: string) {
    Observable.interval(1500)
        .switchMap(() => this.http.get(this.apiEndpoint + "Definition/" + type + "/Progress/" + requestId))
        .map((data) => data.json().Data)
        .takeWhile((data) => data.InProgress)
        .subscribe(
        (data) => {
            ...
        },
        error => this.handleError(error));
}

Answer 3

Answer №2

I found a solution by storing the service call in a variable and unsubscribing from it when finished.

Below is the updated code snippet:

public getExportProgress(type: string, requestId: string): any {
    let progress = Observable.interval(1500)
        .switchMap(() => this.http.get(this.apiEndpoint + "Definition/" + type + "/Progress/" + requestId))
        .map((data) => data.json().Data)
        .subscribe(
        (data) => {              
            if (!data.InProgress) {
                this.toastyCommunicationService.addSuccesResponseToast("done");
                progress.unsubscribe();
            }            
        },
        error => this.handleError(error));
}

Answer 4

I found a solution by storing the service call in a variable and unsubscribing from it when finished.

Below is the updated code snippet:

public getExportProgress(type: string, requestId: string): any {
    let progress = Observable.interval(1500)
        .switchMap(() => this.http.get(this.apiEndpoint + "Definition/" + type + "/Progress/" + requestId))
        .map((data) => data.json().Data)
        .subscribe(
        (data) => {              
            if (!data.InProgress) {
                this.toastyCommunicationService.addSuccesResponseToast("done");
                progress.unsubscribe();
            }            
        },
        error => this.handleError(error));
}

Using Long Polling with Angular 4

Answer №1

Answer №2

Similar questions

Updating non-data properties dynamically in a custom AG Grid cell renderer

Is it possible to navigate to a different section of a webpage while also jumping to a specific id within that section seamlessly?

Error: Platform core encountered a StaticInjectorError[t]: It is not possible to assign a value to the property '_injector', as it is undefined

Can you explain how to utilize the 'npm' command and its functions?

Isolating a service from a component based on conditions in Angular 5

is there a way to modify the background color of a div element by comparing values in javascript?

Obtain the last used row in column A of an Excel sheet using Javascript Excel API by mimicking the VBA function `Range("A104857

What is the capability of dynamically generating an index in Typescript?

Using an external variable within an internal function in TypeScript

How is babel-loader / tsc compiler able to distinguish between importing a package for its types only and for its functionalities?

How can I dynamically replace a specific element inside a .map() function with a custom component when the state updates, without replacing all elements at once?

When incorporating a JS React component in TypeScript, an error may occur stating that the JSX element type 'MyComponent' is not a valid constructor function for JSX elements

What is the process for integrating Angular files into an Express server?

Incorrect typings being output by rxjs map

What is the Angular lifecycle event that occurs after all child components have been initialized?

I am encountering a problem with my component as the Angular Directive is missing

Is there a way to prevent QtLinguist from opening every time Visual Studio tries to display a TypeScript file?

Exclude a select few rows in MatSort, rather than excluding entire columns

Limiting the height of a grid item in MaterialUI to be no taller than another grid item

Search timeout restriction