如何重新建立关闭的 RxJS WebSocket

当 RxJS WebSocket 断开连接时，我们需要重新建立连接并保持通讯。下面是一些步骤可以帮助你实现这个功能：

1. 在 Angular 应用中引入 WebSocket 引用

引入以下代码，以使用 RxJS WebSocket：

import { WebSocketSubject } from 'rxjs/observable/dom/WebSocketSubject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/retryWhen';
import 'rxjs/add/operator/delay';

@Injectable()
export class WebSocketService {
  private socket$: WebSocketSubject<any>;

  public constructor() {}

  public connect(url: string): WebSocketSubject<any> | null {
    if (!this.socket$ || this.socket$.closed) {
      this.socket$ = new WebSocketSubject(url);
      this.socket$
        .subscribe(
          (message) => {
            this.handleMessage(message);
          },
          (error) => {
            this.handleError(error);
          },
          () => {
            this.handleClose();
          }
        );
      return this.socket$;
    }
    return null;
  }

  public handleMessage(message: any): void {
    // handle incoming message
  }

  public handleError(error: any): void {
    // handle error
  }

  public handleClose(): void {
    // handle close
  }
}

2. 在页面组件中使用。

在你想要建立连接的组件中，需要导入 WebSocketService 并实例化该服务。你也可以将 WebSocketService 注入到你的应用程序中，以便应用程序可以在任何页面使用它。

import { Component } from '@angular/core';
import { WebSocketService } from '../../../web-socket.service';

@Component({
  selector: 'app-websocket',
  templateUrl: './websocket.component.html',
  styleUrls: ['./websocket.component.scss']
})
export class WebSocketComponent {
  constructor(private webSocketService: WebSocketService) {}

  public connect(): void {
    this.webSocketService.connect('ws://localhost:8080').subscribe();
  }
}

3. 处理关闭并重新建立连接

在 WebSocketService 中的 handleClose() 方法中，你可以重新建立连接。你需要决定何时需要重新建立连接，例如，如果由于网络问题或服务器发生错误，连接被关闭。

import { WebSocketSubject } from 'rxjs/observable/dom/WebSocketSubject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/retryWhen';
import 'rxjs/add/operator/delay';

@Injectable()
export class WebSocketService {
  private socket$: WebSocketSubject<any>;

  public constructor() {}

  public connect(url: string): WebSocketSubject<any> | null {
    if (!this.socket$ || this.socket$.closed) {
      this.socket$ = new WebSocketSubject(url);
      this.socket$
        .subscribe(
          (message) => {
            this.handleMessage(message);
          },
          (error) => {
            this.handleError(error);
          },
          () => {
            this.handleClose();
          }
        );
      return this.socket$;
    }
    return null;
  }

  public handleMessage(message: any): void {
    // handle incoming message
  }

  public handleError(error: any): void {
    // handle error
  }

  public handleClose(): void {
    if (this.socket$) {
      this.socket$.unsubscribe();
    }
    setTimeout(() => {
      this.connect('ws://localhost:8080');
    }, 5000);
  }
}

在上面的代码片段中，如果连接被关闭，我们将在 5 秒后重新建立连接。你可以根据自己的需求调整延迟时间。

结论

以上是如何重新建立关闭的 RxJS WebSocket 的步骤。使用上述方法，你可以解决任何与 RxJS WebSocket 断开连接的问题。