WebSocket 是一种全双工、长连接（或者叫轮询）的协议，它可以在服务器与客户端之间实现实时通讯，而不像 HTTP 协议那样需要不断的发送请求和接收响应。在前端开发中，它被广泛应用于实现聊天室、在线游戏等应用中。
本文将介绍如何在 Angular 5 中使用 WebSocket 实现实时通讯，并提供一些示例代码和指导意义。
安装 WebSocket 库
在使用 WebSocket 之前，需要先安装 WebSocket 库。Angular 使用的是 rxjs 库，因此我们需要安装 rxjs-websockets 库，它是建立在 rxjs 之上的 WebSocket 库。
使用以下命令来安装 rxjs-websockets：
npm install rxjs-websockets
使用 WebSocket 发送和接收消息
首先，在你的组件中引入 WebSocketSubject 和 webSocket：
import {webSocket, WebSocketSubject} from 'rxjs/webSocket';然后，在 ngOnInit 生命周期中，创建一个 WebSocketSubject 实例：
private socket$: WebSocketSubject<string>;
ngOnInit(): void {
this.socket$ = webSocket('ws://localhost:8080');
}这里我们使用了 webSocket 方法来创建一个 WebSocketSubject 实例，指定了 WebSocket 服务器的地址。
接下来，我们可以使用 socket$ 对象来发送和接收消息。下面是一个例子，当你点击按钮时，它会向 WebSocket 服务器发送一个消息，并将服务器返回的消息打印到控制台上：
-- -------------------- ---- -------
---------- -
------------------------- -------------
-----------------------
--------- -- --------------------- ---------- ---------
----- -- -------------------
-- -- -----------------------
--
-这里使用 next 方法来发送数据到服务器。然后使用 subscribe 方法来订阅服务器返回的消息，同时也可以处理错误和完成事件。
WebSocket 的可观察对象
WebSocketSubject 是一个可观察对象，它是由 rxjs 库提供的一个数据类型。它用于异步编程，允许我们订阅数据流，以便在数据到达时立即响应。
WebSocketSubject 上的订阅被视为 WebSocket 的订阅，但它们还充当了 Subject（无限制的特殊 Observable，可以多播到多个观察者） 和 Subscriber（兼容 Observable，自己充当观察者） 的角色。从这个角度看，WebSocketSubject 可以看作是 WebSocket 和 Observable 的结合体。
WebSocket 服务器的搭建
除了前端的实现，我们还需要一个 WebSocket 服务器。这里我们使用 ws 库来搭建 WebSocket 服务器。使用以下命令来安装 ws：
npm install ws
然后，编写一个简单的 WebSocket 服务器：
-- -------------------- ---- -------
----- --------- - --------------
----- ------ - --- ------------------ ----- ---- ---
----------------------- -------- -- -
------------------- ------------
-------------------- --------- -- -
--------------------- ---------- --------------------
---------------- ----- -------------
---
------------------ -- -- -
------------------- ---------------
---
---这个服务器会监听 8080 端口的 WebSocket 连接。当客户端连接上来时，会打印一条日志，并监听客户端发送过来的消息。然后将接收到的消息返回给客户端。当客户端断开连接时，也会打印一条日志。
总结
通过本文，你可以学习到如何在 Angular 5 中使用 WebSocket 实现实时通讯，并了解到 rxjs-websockets 库的使用以及 WebSocket 可观察对象的概念。同时，你也了解到如何使用 ws 库来搭建一个简单的 WebSocket 服务器。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649e893248841e9894b0dfcb