title: RXJS Reattach Listeners after Websocket Disconnect
body: <p>I'm using RXJS with Angular, and have a websocket service that is a simple wrapper over a RXJS WebSocketSubject. </p>
  
  <p>I also have some services that need to subscribe to this service for data. On the init of these services, they subscribe to the "base" websocket.</p>
  
  <p>This works fine until the base websocket loses connection to the server. It correctly re-establishes itself, and so I am able to push data to the server. However, the subscriptions that my other services had don't get re-applied, so I can't receive any data.</p>
  
  <p>What would be the recommended way to fix this? Thanks!</p>
  
  <p>Base websocket (simplified):</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  import { WebSocketSubject, WebSocketSubjectConfig } from 'rxjs/webSocket';
  import { AuthService } from './auth-service';
  import { UrlService } from './url-service';
  
  @Injectable({
      providedIn: 'root'
  })
  export class AppWsService {
  private socket!: WebSocketSubject&lt;any&gt;;
  
  constructor(private urlService: UrlService) {
      this.initialize();
  }
  
  private async initialize() {
      await this.fetchWebsocket();
  }
  
  private async send_message(message: any) {
      await this.fetchWebsocket();
      console.log('[BASE] Send message', message);
      this.socket.next(message);
  }
  
  public async fetchWebsocket(): Promise&lt;WebSocketSubject&lt;any&gt;&gt; {
      if (!this.socket) {
          let config: WebSocketSubjectConfig&lt;any&gt; = {
              url: this.urlService.get_ws_url(),
              openObserver: {
                  next: (_: any) =&gt; {
                      let msg = {
                          // Include auth stuff here
                      };
                      this.socket.next(msg as any);
                  },
                  error: (err: any) =&gt; {
                      console.log('[BASE][WS] Error connecting:', err);
                  }
              }
          };
          console.log('[BASE][WS]Making subject...')
          this.socket = new WebSocketSubject(config);
          this.socket.subscribe({
              next: (data) =&gt; {
                  console.debug('[BASE][WS] Got message:', data);
                  console.debug('[BASE][WS] Type:', data.constructor.name);
              },
              error: (msg) =&gt; {
                  console.error('[BASE][WS] Error:', msg);
              }
          });
      }
  
      console.log('[BASE][WS] Returning subject')
      return this.socket;
  }
  }
  </code></pre>
  
  <p>Example service that uses the base websocket (simplified):</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { WebSocketSubject } from 'rxjs/webSocket';
  import { Subject } from 'rxjs';
  
  import { AppWsService } from './app-ws-service';
  import { ChatInfo, isChatMessage, isChatInfo, isChatInfos } from './definitions/chat-messages';
  
  @Injectable({
  providedIn: 'root'
  })
  export class ChatService {
  private ws!: WebSocketSubject&lt;any&gt;;
  
  constructor(private appWsService: AppWsService) {
      this.initWebsocket();
  }
  
  private async initWebsocket() {
      this.ws = await this.appWsService.fetchWebsocket();
      this.ws.subscribe({
          next: (data) =&gt; {
              if (isChatMessage(data)) {
                  // Do stuff
              } else if (isChatInfo(data)) {
                  // Do stuff
              } else if (isChatInfos(data)) {
                  // Do stuff
              }
          }
      });
  }
  }
  </code></pre>