はじめに
Angularでwebアプリを開発を行なっております。
フロント側からサーバにリクエストを投げるポーリング処理の実装を行なったので記事にまとめたいと思います。
対象
・ポーリング処理のイメージを掴みたい方
・AnuglarでRxJSを利用してポーリング処理を実装したい方
記事の目的
・Angular側からAPIに対してポーリング処理を行いリクエストを投げる事ができる様になる事が目的です。
環境
・Angular 11
事前準備
ポーリングとは、、、
IT用語辞典で検索すると、「ポーリングとは、複数の機器やソフトウェアを円滑に連携させる制御方式の一つで、主となるシステムが他のシステムに対して一定間隔で順繰りに要求がないか尋ねる方式。」とのこと。
今回の場合で言うと、フロント側からサーバーに対して一定間隔にhttpリクエストを投げる処理です。
サーバから新しい情報を取得する目的で利用します。
実装
まずポーリング処理を実装するサービスクラスを実装していきます。
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { interval, Observable, Subject, Subscription } from 'rxjs';
import { mergeMap, takeWhile } from 'rxjs/operators';
@Injectable({
providedIn: 'root',
})
export class listPollingService {
subject = new Subject<any>();
dataList$ = this.subject.asObservable();
constructor(private http: HttpClient) {
this.getListPolling().subscribe((response) => {
this.subject.next(response);
});
}
getListPolling(): Observable<any> {
return interval(2000).pipe(
mergeMap(() => this.http.get('http://~~~~~')), ← サーバのエンドポイント
takeWhile(() => true),
);
}
}
interval
setIntervalのように指定された間隔ごとに値を流す Observable を生成します。
今回の実装では、2秒毎にリクエストが実行されます。
mergeMap
引数の値を使って新たなObservableを生成します。
takeWile
callbackが返す真偽値が偽になるまで値を次に流します。
サンプルでは直接trueを指定している為リクエストは流れ続けます。
こちらを変数で定義し、必要なタイミングでfalseを入れてやることで任意のタイミングでポーリング処理を停止させる事が可能です。
最後にTSファイル側でdataList$をsubscribeしてあげるとポーリング処理が開始されます。
まとめ
Anuglarを触るようになってからRxJSを使うようになりましたが、http client利用時になんとなく使っている事がほとんでどでまだまだ理解が追いついていないと実感しました。
よりよい方法などありましたらご教授いただけますと幸いです。
