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

Prepare fixtures for commands in Cypress before executing the hook

Issue with Angular 4: Radio button defaults not being set

Issue encountered with Vue.js build configuration not being loaded while running on the build test server

When attempting to access http://localhost:3000/traceur in Angular 2 with the angular-in-memory-web-api, a 404 (Not Found) error

Identifying the origin of the error (whether it's from the client or the server) within

Search input in real-time

Working with arrow functions in TypeScript syntax

When additional lines are drawn elsewhere on the HTML5 Canvas, the diagonal lines will gradually appear thicker and more pronounced

Iterating through a for loop in Angular2 to send multiple GET requests to a Django backend

Switching from HttpModule to HttpClientModule

Establish a table containing rows derived from an object

What is the best way to implement an asynchronous function using a for loop and APIs in Typescript?

Error: The program encountered a type error while trying to access the '0' property of an undefined or null reference

Specifying the data structure of a complex nested Map in TypeScript

Angular project service file experiencing issues with TypeScript string interpolation functionality

Utilizing getServerSideProps and getInitialProps in Next.js to optimize page loading times

PhantomJS version 2.1.1 encountered an error on a Windows 7 system, displaying "ReferenceError: Map variable not found."

Troubles encountered while attempting to properly mock a module in Jest

Guide on Implementing Link href in Next.js v12

The TypeScript compiler encounters difficulties in locating type definitions when utilizing an inherited tsconfig file