引言
现代 Web 应用的用户体验不能仅仅依赖于用户端与服务器端简单的 HTTP 请求和响应。相反，常常涉及到近实时的数据传输，例如聊天室、在线课堂和实时数据监视等。为实现这些需求，我们需要一种高效、轻量、即时的网络通信协议。
WebSocket 正是为此而生的协议，它提供了真正的双向数据传输，使数据在客户端和服务器之间的交流变得非常容易。本文将介绍 WebSocket 协议的基础知识，并使用 Angular 框架构建一个具有实时数据更新功能的 Web 应用。
WebSocket 协议
WebSocket 协议是一种支持在单个 TCP 连接上进行全双工通信的协议。它通过在客户端和服务器之间建立一个持久连接来实现相互通信，将 HTTP 消息头包装成 WebSocket 消息头。WebSocket 协议与 HTTP 协议兼容，使用标准的 HTTP 端口 80 和 443。
WebSocket 协议的起源还要追溯到 Web 2.0 时代。在那个时代，我们使用 AJAX（Asynchronous JavaScript and XML）技术来实现数据的异步请求和响应，但它依然不能完全满足实时数据传输的需求。要解决这个问题，HTML5 标准中提出了 WebSocket 标准。
WebSocket 几乎完全在后台进行协商，而不涉及应用程序或用户界面。在前端，我们只需要创建 WebSocket 实例，向服务器发出连接请求，然后通过 WebSocket 实例从服务器接收或发送数据即可。
WebSocket 的优点
与传统的 HTTP 协议相比，WebSocket 协议有以下几个优点：
- 低延迟：传统的 HTTP 请求和响应需要在每个请求和响应中开关一个 TCP 连接，而 WebSocket 使用一个持久连接，减少了延迟。
- 服务器可以主动推送消息给客户端：不需要由客户端来轮询服务器消息。
- 二进制支持：通过 WebSocket 协议，可以传递二进制数据，而不只是文本。
- 可扩展性：WebSocket 协议可以让客户端和服务器定义自己的协议，以满足需要。
WebSocket 的缺点
WebSocket 协议也有其自身的缺点：
- 由于 WebSocket 报文中包含了额外的信息，WebSocket 报文比明文数据要大。这可能会增加网络传输的负担。
- Wormhole 攻击：WebSocket 连接可以在网关和负载平衡的后面工作。温和的攻击者可以通过这条路线注入 WebSocket 报文，而受害者无法识别这些报文，这个缺陷可能导致加强或二次注入攻击。
Angular 中使用 WebSocket 的实现
关于 WebSocket 最常见的使用情况是与实时数据更新相关的应用。当服务器端数据更新时，WebSocket 就可以通知客户端数据已经发生改变，则客户端可以实时地将数据更新到 UI 中。
下面是如何在 Angular 中使用 WebSocket 实现此功能：
我们首先需要在 Angular 项目中添加 WebSocket 模块：
npm install --save ngx-websocket
WebSocketService 的实现如下：
-- -------------------- ---- -------
------ ------------ ---- ----------------
------ ----------- ----------------- ---- -----------------
-------------
----------- ------
--
------ ----- ---------------- -
------- -------- ----------------------
------------- -
-
------ ---------- --------------------- -
-- -------------- -- -------------------- -
------------ - ---------------------------------
-
------ -------------
-
------ ------------ -
-- ------------- -- --------------------- -
------------------------
-
-
-我们使用 WebSocketSubject 类来管理 WebSocket 连接。在 connect() 中，我们判断当前 WebSocket 连接是否已存在。如果不存在或已关闭，则使用 webSocket() 方法创建一个新的连接。disconnect() 方法则负责关闭已存在且未关闭的连接。
最后，我们需要在组件中调用 WebSocketService。下面是一个页面组件，它用来实时更新从服务器接收到的数据。
-- -------------------- ---- -------
------ ----------- ------- ---- ----------------
------ ------------------ ---- ----------------------
------ -------------- ---- -------
------------
--------- -----------
------------ ------------------------
---------- -------------------------
--
------ ----- ------------- ---------- ------ -
------ --------- -------- - ---
------- ------------- -------------
------------------- ---------- ----------------- -
-
---------- -
----------------- - -------------------------------------------- -- -
----------------------------
---
-
------------- -
-------------------------------
---------------------------
-
-在组件的 ngOnInit() 生命周期方法中我们调用 WebSocketService.connect()。当 WebSocket 连接成功后，我们将 WebSocketSubject 对象的订阅与消息传递绑定在组件的 Subscription 上，使我们能够在组件销毁时取消订阅以及关闭连接。
总结
WebSocket 协议在现代 Web 应用程序中变得越来越重要，特别是在实时数据传输方面。本文介绍了 WebSocket 协议的基础知识，以及如何在 Angular 项目中使用 WebSocket 实现实时数据更新功能。我们希望本文能够帮助读者理解 WebSocket 协议在 Web 应用程序中的优缺点，并能够在其项目中成功应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aea18e48841e9894ad06db