什么是 WebSocket
WebSocket 是一种协议，它允许客户端和服务器之间进行实时双向通信。这种通信是基于 TCP 协议的，这意味着它具有低延迟和高效的数据交换。WebSocket 在实时聊天和数据推送等场景下非常有用。
为什么要使用 WebSocket
在传统的 Web 应用程序中，客户端向服务器发送请求，服务器处理请求并返回响应，然后客户端再接收响应。这种请求 - 响应模型存在一些限制：
- 客户端需要不停地向服务器发起请求，这会导致很多无效的请求。
- 服务器需要始终保持连接，即使没有客户端请求，也需要一直处于运行状态，这样会浪费资源。
使用 WebSocket 可以解决这些问题，它可以保持一条持久的连接，使得服务器可以主动向客户端推送数据。这意味着在应用程序内部的数据更新时，可以立即将这些变化反映到客户端上，无需频繁地向服务器发送请求。
Angular 中使用 WebSocket
Angular 提供了一个名为 WebSocketSubject 的类，可以用于和 WebSocket 通信。它是 RxJS 的一个 Subject，因此你需要先安装 RxJS 并导入 WebSocketSubject 类。
import { WebSocketSubject } from 'rxjs/webSocket';
// 创建一个 WebSocketSubject 实例
const ws = new WebSocketSubject('ws://localhost:8080');创建 WebSocketSubject 实例时，需要传入一个字符串参数，表示要连接的 WebSocket 服务器的 URL。需要注意的是，WebSocket 服务器的 URL 必须以 ws:// 或 wss:// 开头。
接下来，你可以使用 ws.next() 方法向服务器发送消息，使用 ws.subscribe() 方法接收来自服务器的消息。例如，下面的代码演示了如何在 Angular 中使用 WebSocket 实现一个简单的聊天室应用程序。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------------- - ---- -----------------
------------
--------- ----------------
--------- -
-------- ---------
---- ----------- ------- -- ------------ ------- --------
------ ----------------------- ------------------------------
-
--
------ ----- ----------------- ---------- ------ -
--------- -------- - ---
---------- -------
------- --- -------------------------
---------- -
------- - --- ------------------------------------------------
-- ----
------------------
------- -- ----------------------------
-- -- ---------------------- ---------- ----------
-- -- ---------------------- ---------- ------------
--
-
------------- -
-- ----
-- ----------------------- -
-----------------------------
-------------- - ---
-
-
-在上面的代码中，我们创建了一个 WebSocketSubject 实例，并使用 subscribe() 方法接收来自服务器的消息。我们还创建了一个输入框，使用户可以向服务器发送消息。
使用 WebSocket 和 Angular 实现双向绑定
除了实时聊天，WebSocket 还可以用于实现双向数据绑定。在 Angular 中，与双向绑定相关的概念是 Reactive Forms。下面的示例代码展示了如何使用 Reactive Forms 和 WebSocket 实现双向数据绑定。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------ --------- - ---- -----------------
------ - ---------------- - ---- -----------------
------------
--------- --------------
--------- -
----------------
----- --------------------------
------ -----------------------
------ ------------------------
-------
-
--
------ ----- ---------------- ---------- ------ -
------------ ----------
------- --- -------------------------
------------------- --- ------------ - -
---------- -
---------------- - ---------------
----- ---
------ --
---
------- - --- ------------------------------------------------
-- ---------
------------------
------ ---- -- ----------------------------------
-- -- ---------------------- ---------- ----------
-- -- ---------------------- ---------- ------------
--
-- -----------
-----------------------------
---------------- -- ---------------------
-
-在上面的代码中，我们创建了一个 Reactive Forms 表单，并使用 patchValue() 更新表单数据。我们还订阅了表单的 valueChanges 事件，当表单数据发生变化时向服务器发送消息。
总结
WebSocket 提供了一种实时双向通信的机制，可以用于实现实时聊天、数据推送和双向数据绑定等功能。Angular 提供了一个名为 WebSocketSubject 的类，可以用于和 WebSocket 通信。在使用 WebSocket 和 Angular 实现双向通信时，你需要关注数据的发送、接收和更新。本文提供了一些示例代码，希望能对你理解和实现 WebSocket 通信有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d274e9b5eee0b5259d6c4f