如何在 Angular 中实现 WebSocket？

WebSocket 改变了连续 Web 通信的格局，通过促进服务器和客户端之间的双向数据传输。Angular，一个广泛用于 Web 应用程序开发的 JavaScript 框架，提供了一种强大的方式来集成 WebSockets，以实现聊天、通知或实时更新等实时功能。在本文中，我们将采取一种系统的方法，指导您完成将 WebSockets 集成到 Angular 应用程序的过程。

前提条件

Node.js 和 npm：确保已安装 npm Node.js。

Angular CLI：安装 Angular CLI

WebSocket 服务器：您需要一个 WebSocket 服务器来与您的 Angular 应用程序建立连接。您可以使用兼容 WebSocket 的后端框架，如带有 Express 的 Node.js，或像 socket.io 和 WebSocket 这样的库。

WebSocket 服务

性质

Subject（主题）：AnonymousSubject 类的实例，带有一个 MessageEvent 属性。AnonymousSubject 类允许通过定义源和目标可观察对象来扩展 Subject。

Message（消息）：Subject 类的实例。每个 Subject 既是 Observable 也是 Observer。订阅此 Subject 允许我们调用 next 来馈送值，以及处理错误和完成。

方法

Connect（连接）：此方法验证 subject 属性是否存在，然后调用 create 方法来创建 subject。

Create（创建）：此方法创建将用于订阅的 AnonymousSubject。

接口

Message（消息）：一个字典，定义了一个对象的行为，但未指定其内容。它包含属性 source 和 content，两者均为 string 类型。

代码

AppComponent.html

我们将设计一个带有文本区域、用于发送消息的按钮以及用于发送和接收消息的两个列表的组件。最终的组件如下所示。

代码

AppComponent.ts

代码

输出

控制台标签页

网络标签页

优点

实时通信：它在客户端和服务器之间提供实时的双向通信。这允许即时数据交换，而无需连续轮询或频繁的 HTTP 请求，从而显著降低延迟。

低延迟：低延迟通信是 WebSocket 的目标。因此，它们非常适合需要快速更新的实时体育比分跟踪、聊天程序和在线游戏。

减少的开销：与每次请求/响应都包含标头和其他信息的传统 HTTP 请求不同，WebSocket 的开销极小。因此，数据传输更有效，尤其是在频繁提供简短更新时。

效率：使用 WebSocket，无需为每次交互创建新连接，因为客户端和服务器始终保持连接。对于具有许多用户或频繁数据交换的应用程序来说，这种效率至关重要。

全双工通信：使用 WebSocket，客户端和服务器都可以独立发送消息。这种双向通信允许更具交互性和响应性的应用程序。

跨域通信：通过 WebSocket 跨域工作的能力，您可以使用 WebSocket Secure (WSS) 等协议安全地创建跨源实时应用程序。

可伸缩性：由于它们可以分布在不同的服务器上，因此 WebSocket 非常适合水平可伸缩设计，这使得管理越来越多的并发连接变得更加容易。

缺点

复杂性：实现 WebSocket 可能比标准的 HTTP 查询更困难。它需要一个能够管理有状态连接并处理 WebSocket 连接的服务器，这可能难以设置和维护。

服务器资源使用：只要 WebSocket 连接保持活动状态，它们就会占用服务器资源。这可能导致服务器资源使用量增加，尤其是在有许多打开连接的应用程序中。

防火墙和代理问题：某些网络环境可能会因安全原因阻止 WebSocket 连接。WebSocket 流量可能在通过某些防火墙或代理服务器时遇到挑战，需要额外的配置。

状态管理：控制 WebSocket 连接的状态可能很困难，包括如何处理断开连接和重新连接。考虑在连接丢失后需要重新建立连接的情况。

兼容性：许多服务器环境和浏览器（但并非全部）都支持 WebSocket。您可能需要开发回退方法，以防 WebSocket 连接失败或对于不支持它们的浏览器。

安全注意事项：如果未正确保护，WebSocket 会打开一个持久连接，这可能会使您的服务器面临安全风险。为了防范威胁，集成身份验证和加密等安全措施至关重要。

有限用例：尽管实时应用程序受益于 WebSocket，但并非所有 Web 应用程序都应该使用它们。对于传统的请求-响应场景或静态内容交付，HTTP 可能更合适。

结论

WebSocket 为 Web 应用程序中的实时通信提供了显著的优势，但它们也带来了开发者应该考虑的复杂性和潜在挑战。评估项目的具体需求并确定 WebSocket 是否合适，或者像 HTTP 长轮询或服务器发送事件这样的替代技术是否可能更合适，这一点至关重要。