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

Question

我最近为我的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分钟的空闲超时时间，最大会话持续时间为2小时。我可以从客户端发送心跳请求，以保持连接每9m50打开一次，但我仍然可能遇到2小时的套接字连接限制。我注意到我的订阅关闭console.log在AWS关闭连接时运行。当SERVER关闭连接时，有什么优雅的方法可以自动重新连接websocket？我不想阻止客户端关闭连接。如果可能的话，我还想在服务中处理重新连接，这样我就不必在每个我想在中使用websocket服务的组件中复制/粘贴重新连接策略。

Answer 1

一些想法：

• 如果套接字断开连接，请将repeat与retry结合使用以自动重新连接
• 如果您想检查用户是否关闭了连接，请引入一个服务属性，如果您调用closeConnection，该属性将被标记
• 检查此变量作为repeat或retry的输入(可能repeatWhenretryWhen在此处更适合，例如repeatWhen(() => of(!this.userTerminated))

Answer 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();