angular - 如何处理 RxJs websocket 连接关闭?在服务器关闭时重试,在客户端关闭时不执行任何操作
问题描述
我最近为我的 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 小时的最大会话持续时间。我可以从客户端发送心跳请求以保持连接每 9 分钟 50 秒打开一次,但我仍然可能会遇到 2 小时的硬套接字连接限制。我注意到我的订阅关闭 console.log 在 AWS 关闭连接时运行。当服务器关闭连接时,自动重新连接 websocket 的优雅方法是什么?我不想阻止客户端关闭连接。如果可能的话,我还想处理服务中的重新连接,因此我不必在要使用 websocket 服务的每个组件中复制/粘贴重新连接策略。
解决方案
一些想法:
- 如果套接字断开连接,请将重复与重试结合使用以自动重新连接
- 如果你想检查连接是否被用户关闭,引入一个服务属性,如果你调用它会标记
closeConnection
- 检查此变量作为
repeat
or的输入retry
(也许repeatWhen
retryWhen
在这里更合适,例如repeatWhen(() => of(!this.userTerminated))
推荐阅读
- android - Android Studio 构建:失败未知类型 T
- c - WSL VS 代码问题 - 无法打开“vfprint.c”
- c++ - QPushButton 在点击时不执行连接的功能
- javascript - 尝试过滤产品列表时反应“TypeError:product.name.includes(...).map is not a function”
- node.js - 无法使用 Node.js 验证 google 服务帐户
- ruby-on-rails - 如果 ERB 中的条件为真,如何不显示 HTML 和 CSS
- ios - App Store Connect 指标:什么是“活跃设备”和“过去 30 天活跃”?
- python - 如何将对象传递给单独的函数 - Python
- css - Material UI - React - 将网格项目放在一列中
- azure - 在 Azure AD 多租户环境中是否始终需要管理员同意?