AngularでRxJSを使いこなそう

前置き

このイベントが目に入ったので、参加してみたいと思いました。
フロントエンド強化月間

Angular

Angularは、Googleが関わっているフロントエンドフレームワーク。
Microsoftが提供しているTypeScriptをベースにしている。

RxJS

RxJSは、Reactive Extensions for JavaScriptの略称で、非同期またはコールバックベースのコードを容易にします。

テクニック

• WebScoketを常時接続してみよう

WebSocketをSubscribeした時に、接続が成功するとsuccessへ、接続が失敗するとerrorへ行く。
WebSocketは、仕様上10分間でタイムアウトし、切断してしまう。
このタイムアウトによる切断は、実行したところerrorではなくcompleteに流れてしまった。

そこで、RxJSにはRetryというオペレーターがある。これを用いればいいじゃないと考えたが、ここでトラップが存在。

エラーをハンドリングすれば良いと最初は思っていたが、エラーになるのは前述通り接続が失敗した時のみ。今回のWebSocketタイムアウトを回避するためには使えない。

「WebSocket RxJS Retry 」で調べると下記のサイトが出てくる。

参照サイト:Reconnecting a websocket in Angular and rxjs?

上記参照サイトのretry()を試してみたが呼び出せなかった。

そこで色々と検索したところ、下記に記しているコードに行き着いた。
どこのサイトを見たのか失念してしまった。
使う場合は、メモリリークとかの動作確認は必ず行ってくださいな。
(個人的には、もっとシンプルに出来る気がしています)

sample-websocket.ts

import { OnInit } from "@angular/core";
import { webSocket } from "rxjs/webSocket";
import { repeat, takeUntil } from "rxjs/operators";
import { Subject } from "rxjs";
import "rxjs-compat/add/operator/retry"
// import { retry } from "rxjs/operators"; <= こっちでは無い


export class WebsocketComponent implements OnInit {

unsubscribe = new Subject<any>();
socket = webSocket('wss://hogehoge.com').pipe(takeUntil(this.unsubscribe), repeat());

ngOnInit(): void {
  this.socket.retry().subscribe(
    mess => console.log(mess),
    error => console.log(error),
    complete => console.log('complete')
 );
}

}