WebSocketSubject 是 RxJS 提供的一种与浏览器内置的 WebSocket 对象无缝集成的可观察对象，使开发者可以轻松地将 WebSocket 与 RxJS 进行集成。本篇文章将介绍如何在 Angular 中使用 RxJS 中的 WebSocketSubject。
WebSocketSubject 简介
WebSocketSubject 是 RxJS 提供的一种特殊可观察对象，用于在浏览器中建立 WebSocket 连接时轻松地使用 RxJS。通常，开发人员需要编写一些低级代码，例如使用 WebSocket 对象的 onmessage、onopen、onclose 和 onerror 事件来捕获 WebSocket 发送和接收的消息。使用 WebSocketSubject，无需编写这些低级代码，可以在 RxJS 流的上下文中处理连接的消息。
WebSocketSubject 有以下特点：
- 内置了连接管理，WebSocket 对象的创建和销毁都在内部自动处理。
- WebSocketSubject 实现了 Observable 接口和 Observer 接口，具备了发送和接收操作的能力，可以通过 Observable 对象进行消息订阅并通过 Observer 对象进行发送。
- WebSocketSubject 可以通过 retry 和 reconnect 等方法来实现连接自动重试和断线自动重连的功能。
RxJS 在 Angular 中的使用
RxJS 是 Angular 开发中的重要组成部分，广泛应用于处理异步事件。我们可以通过 npm 包管理工具安装 RxJS：
npm install rxjs --save
要使用 WebSocketSubject，我们还需要额外引用 rxjs/webSocket 模块：
import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
使用 WebSocketSubject
在 Angular 中使用 WebSocketSubject 非常简单，我们只需要实例化一个 WebSocketSubject 对象，就可以在 RxJS 流的上下文中处理 WebSocket 消息了。调用 webSocket() 方法，并将 WebSocket 服务器的 URL 作为参数即可：
const socketUrl = 'ws://localhost:3000'; const socket$ = webSocket(socketUrl);
通过使用 webSocket() 函数，我们可以创建一个与目标服务器的 WebSocket 连接。此时，我们可以通过 Observable 接口和 Observer 接口来实现发送和接收操作：
socket$.next('Hello'); socket$.subscribe( msg => console.log(msg), err => console.error(err), () => console.log('WebSocket connection closed') );
以上代码演示了如何通过 WebSocketSubject 发送消息和订阅消息。我们将 sent 的消息发送到服务器，并通过订阅方法来监听服务器响应的消息。
WebSocketSubject 的重试和重连功能
在使用 WebSocket 时，连接可能会中断或接收到错误信息。这时，我们需要在 RxJS 程序中处理这些异常。对于这种情况，WebSocketSubject 提供了 retry 和 reconnect 方法，可以自动重试连接并自动重连断开的连接。以下示例代码演示了如何实现自动重连：
-- -------------------- ---- ------- ----- --------- - ---------------------- ----- ------- - ----------- ---- ---------- ------------- - ----- -- -- ---------------------- ---------- ------------- -- -------------- - ----- -- -- ---------------------- ---------- ------- --- -- ----------- - ----------------- ------------- ----------- -- --------- ---- ----展开代码
在此示例中，我们使用的是 shareReplay() 方法，在断开连接后可以保存之前接收到的消息，
通过 retry(3) 方法，我们尝试重连三次，如果三次尝试后仍然连不上，我们就放弃这次连接。除了重连、重试之外，WebSocketSubject 还提供了很多实用的方法供使用，用户可以根据实际需要自行选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b7d394306f20b3a650abbc
