add connection monitoring

client/lib/source/poll-source.ts

@@ -1,6 +1,6 @@
 import { BehaviorSubject, concat, from, Observable, of } from 'rxjs'
 import { catchError, concatMap, delay, skip, switchMap, take, tap } from 'rxjs/operators'
-import { Http, Update } from '../types'
+import { ConnectionStatus, Http, Update } from '../types'
 import { Source } from './source'
 
 export type PollConfig = {
@@ -8,6 +8,7 @@ export type PollConfig = {
 }
 
 export class PollSource<T> implements Source<T> {
+  connectionStatus$ = new BehaviorSubject(ConnectionStatus.Initializing)
 
   constructor (
     private readonly pollConfig: PollConfig,
@@ -15,26 +16,22 @@ export class PollSource<T> implements Source<T> {
   ) { }
 
   watch$ (sequence$: Observable<number>): Observable<Update<T>> {
-    console.log('POLL_SOURCE - watch$()')
-
     const polling$ = new BehaviorSubject('')
 
     const updates$ = of('').pipe(
       concatMap(_ => sequence$),
       take(1),
-      tap(_ => console.log('making request')),
       concatMap(seq => this.http.getRevisions(seq)),
+      tap(_ => this.connectionStatus$.next(ConnectionStatus.Connected)),
       catchError(e => {
         console.error(e)
+        this.connectionStatus$.next(ConnectionStatus.Disconnected)
         return of([])
       }),
-      tap(_ => console.log('request complete')),
     )
 
     const delay$ = of([]).pipe(
-      tap(_ => console.log('starting cooldown')),
       delay(this.pollConfig.cooldown),
-      tap(_ => console.log('cooldown finished')),
       tap(_ => polling$.next('')),
       skip(1),
     )

client/lib/source/source.ts

@@ -1,6 +1,7 @@
-import { Observable } from 'rxjs'
-import { Update } from '../types'
+import { BehaviorSubject, Observable } from 'rxjs'
+import { ConnectionStatus, Update } from '../types'
 
 export interface Source<T> {
+  connectionStatus$: BehaviorSubject<ConnectionStatus>
   watch$ (sequence$?: Observable<number>): Observable<Update<T>>
 }

client/lib/source/ws-source.ts

@@ -1,34 +1,40 @@
-import { Observable } from 'rxjs'
+import { BehaviorSubject, Observable } from 'rxjs'
 import { webSocket, WebSocketSubject, WebSocketSubjectConfig } from 'rxjs/webSocket'
-import { Update } from '../types'
+import { ConnectionStatus, Update } from '../types'
 import { Source } from './source'
 
 export class WebsocketSource<T> implements Source<T> {
-  private websocket$: WebSocketSubject<Update<T>>
+  connectionStatus$ = new BehaviorSubject(ConnectionStatus.Initializing)
+  private websocket$: WebSocketSubject<Update<T>> | undefined
 
   constructor (
-    readonly url: string,
+    private readonly url: string,
   ) {
+  }
+
+  watch$ (): Observable<Update<T>> {
     const fullConfig: WebSocketSubjectConfig<Update<T>> = {
-      url,
+      url: this.url,
       openObserver: {
         next: () => {
           console.log('WebSocket connection open')
-          this.websocket$.next('open message' as any)
+          this.connectionStatus$.next(ConnectionStatus.Connected)
+          this.websocket$!.next('open message' as any)
         },
       },
       closeObserver: {
         next: () => {
+          this.connectionStatus$.next(ConnectionStatus.Disconnected)
           console.log('WebSocket connection closed')
-          // @TODO re-open websocket on retry loop
         },
       },
       closingObserver: {
-        next: () => console.log('Websocket subscription cancelled, websocket closing'),
+        next: () => {
+          console.log('Websocket subscription cancelled, websocket closing')
+        },
       },
     }
     this.websocket$ = webSocket(fullConfig)
+    return this.websocket$
   }
-
-  watch$ (): Observable<Update<T>> { return this.websocket$.asObservable() }
 }