如何处理 RxJs websocket 连接关闭？在服务器关闭时重试，在客户端关闭时不执行任何操作答案

【问题标题】：How can I handle RxJs websocket connection closings? Retry on server close, do nothing on client close如何处理 RxJs websocket 连接关闭？在服务器关闭时重试，在客户端关闭时不执行任何操作
【发布时间】：2021-09-02 17:51:31
【问题描述】：

我最近为我的 Angular 应用程序制作了一个简单的 websocket 服务。它工作得很好，但我无法弄清楚如何处理服务器/客户端关闭 websocket 连接。这是我的服务：

import { Injectable } from '@angular/core';
import { webSocket, WebSocketSubject} from 'rxjs/webSocket';
import {environment} from '../../../environments/environment';

export const WS_ENDPOINT = environment.backendWebsocketEndpoint;
@Injectable({
  providedIn: 'root'
})
export class SimpleWebsocketService {

  private socket$  = webSocket({
    url: WS_ENDPOINT,
    deserializer: msg => {
      // If for some reason you want the whole response from AWS (you'll have to parse .data yourself)
      // return msg;

      // try to parse message as json. If we can't, just return whatever it is (usually bare string)
      try {
        return JSON.parse(msg.data);
      } catch (e) {
        console.warn('Websocket response could not be parsed as JSON. Returning raw value.')
        return msg.data;
      }
    }
  });
  public messages$ = this.socket$.asObservable();

  constructor() { }

  public sendMessage(msg: { action: string; message: string | object; }) {
    this.socket$.next(msg);
  }

  public closeConnection() {
    this.socket$.complete();
  }

}

这是我在其中实现的一个简单组件：

import { Component, OnInit } from '@angular/core';
import { SimpleWebsocketService } from '../services/simpleWebsocket/simple-websocket.service'


@Component({
  selector: 'app-websocket',
  templateUrl: './websocket.component.html',
  styleUrls: ['./websocket.component.scss']
})
export class WebsocketComponent implements OnInit {

  messages: any[] = []; // array we will fill with messages from SimpleWebsocketService
  // Model for chat box form
  model = {
    newMessage: ''
  }

  constructor(public service: SimpleWebsocketService) { }

  ngOnInit(): void {
    // Sub to the messages observable
    this.service.messages$.subscribe(
      msg => {
        console.log('Message from server:', msg)
        this.messages.unshift(msg) // Push messages to local array so this component can reference and display them
      },
      error => {
        console.log('Error on socket connection:', error)
      },
      () => {
        console.log('Socket connection closed. By server or client?')
      }
    )
  }

  submit(formData: any) {
    this.service.sendMessage({"action": "whatever", "message": formData.value.message})
  }

}

如果您仔细阅读服务代码，您可能已经注意到我通过 api 网关使用 AWS websockets。此后端 AWS 服务有一个 10 minute idle timeout and a max session duration of 2 hours。我可以从客户端发送心跳请求以保持连接每 9 分 50 秒打开一次，但我仍然可能会遇到 2 小时的硬套接字连接限制。我注意到我的订阅关闭 console.log 在 AWS 关闭连接时运行。当服务器关闭连接时，自动重新连接 websocket 的优雅方法是什么？我不想阻止客户端关闭连接。如果可能的话，我还想处理服务中的重新连接，因此我不必在要使用 websocket 服务的每个组件中复制/粘贴重新连接策略。

【问题讨论】：

标签： angular websocket rxjs aws-api-gateway angular12

【解决方案1】：

一些想法：

将repeat 与retry 结合使用可在套接字断开连接时自动重新连接
如果你想检查连接是否被用户关闭，引入一个服务属性，如果你调用closeConnection
检查这个变量作为repeat或retry的输入（也许repeatWhenretryWhen更适合这里如repeatWhen(() => of(!this.userTerminated))

【讨论】：

【解决方案2】：

您可以使用retryWhen 和delayWhen 运算符在服务器关闭连接后使用重新连接。

const source = interval(1000);

const example = source.pipe(
   retryWhen(errors =>
      errors.pipe(
      // restart in 5 seconds
     delayWhen(val => timer(5000))
    )
   )
).subsribe();

并且，如果客户端关闭连接，则使用 takeUntil() 运算符管理该情况。

const clicks = fromEvent(document, 'click')

const result = source.pipe(takeUntil(clicks)).subsribe();

【讨论】：