Question

我已经创建了一个服务来处理WebSocket连接以发送和接收消息，在这里我处理了几种可能发生断开连接以及如何从断开连接中恢复的情况，但是我缺少浏览器的情况本身（可以说）脱机，当navigator.onLine再次发出true值时，它将自动重试。

到目前为止，通过使用retryWhen运算符，我可以创建一个新会话并重新启动它（如果服务器端出现问题），直到达到最大重试次数为止。但是，通过使用navigator.onLine（我知道它虽然不可靠，但它适用于我们正在使用的浏览器），当客户端脱机时，我可以重新启动重新连接过程。

我可以看到此在线检查器：

private onlineCheck: Observable<boolean>;

this.onlineCheck = merge(
      of(navigator.onLine),
      fromEvent(window, 'online').pipe(mapTo(true)),
      fromEvent(window, 'offline').pipe(mapTo(false)));

这就是我创建WebSocket的方式（并在需要时处理重新连接）：

public connect(): void {
  // no more than one connection simultaneously
  if (!(this.socket == null)) {
    this.socket.complete();
  }

  this.socket = new WebSocketSubject(this.config);
  this.socket
    .pipe(
      retryWhen((errors) => {
        return errors.pipe(
          tap((error) => { console.log('Error: ', error); }),
          concatMap((e, i) =>
            iif(
              () => i < this.reconnectAttempts,
              of(e).pipe(delay(this.reconnectInterval)),
              throwError('Max amount of retries reached')
            )));
      }))
    .subscribe(
      (message: MessageEvent) => { this.onMessage(message); },
      (error: Event) => { this.onError(error); },
      () => { console.log('completed'); });
  }

如果客户端脱机（并且达到最大连接重试次数）并且现在又回来了，我如何将onlineCheck订阅与retryWhen运算符组合以便重试？如果这不是最好的方法，您能否建议另一种方法？

这是一个完整的StackBlitz示例（请查看控制台日志以获得更好的反馈）：https://stackblitz.com/edit/angular-f4oa3y

Answer 1

在您的iif真实情况下，使用此可观察值代替of(e).pipe(delay(this.reconnectInterval))：

timer(this.reconnectInterval) // wait for reconnect interval
  .pipe(
    concatMap(() => onlineCheck),
    first(Boolean) // now wait for online to be true
  )

这将发出一个可观察到的东西，在reconnectInterval 和 onlineCheck为true之后，该值将生成单个值

RxJS：WebSocket重新连接处理

1 个答案: