当现代 Web 应用程序需要实时通信时，WebSockets 成为了首选的技术。Angular 是一个流行的前端框架，它提供了一个强大的 WebSockets 模块，使得实时通信变得容易。在这篇文章中，我们将会介绍 Angular 中 WebSockets 的具体实现方法。
WebSocket API
WebSockets 在浏览器和服务器之间创建了一个持久化的连接，允许双向数据传输，而不需要浏览器不停地发送请求。JavaScript 有一个原生的 WebSocket API，可用于建立和维护 WebSockets 连接。在 Angular 中，我们可以使用这个 API 来管理 WebSockets 连接。
Angular WebSockets 模块
Angular 提供了一个名为 @angular/websocket 的模块，可用于处理 WebSockets。这个模块提供了一个 WebSocketService，它可以被注入到组件中，从而使开发者可以方便地使用 WebSockets 进行双向通信。
下面是使用 Angular WebSockets 模块建立连接的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ---------------------
------------
--------- --------------------------
--------- -
------- ------- --------
-
--
------ ----- ------------------ -
------ -------- -------
------------------- ----------------- ----------------- -
---------------------------------------------------------------
--------- -- -
------------ - --------
-
--
-
-在上面的例子中，我们首先引入了 Angular WebSockets 模块，并注入了一个 WebSocketService。然后我们使用 connect() 函数创建一个指向 WebSockets 服务器的连接。当从服务器收到消息时，我们将它分配给 message。这个变量随后可用于在模板中显示消息。
将 WebSocketService 注册为 provide
如果您想在整个应用程序中共享 WebSocketService 的实例，您需要将其注册为 provide。这可以通过在 AppModule 中使用 @NgModule() 装饰器来完成。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ---------------- - ---- ---------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
----------------
--
---------- --------------
--
------ ----- --------- - -在上面的例子中，我们通过将 WebSocketService 添加到 imports 数组中来注册它。这将使其成为整个应用程序的共享实例。
结论
Angular WebSockets 模块提供了一个易于使用的 API，使得与 WebSockets 进行双向通信变得轻松。在此示例中，我们介绍了如何使用 WebSocketService 连接 WebSockets 服务器以及如何共享它。
通过以上介绍，我们希望能够帮助读者了解 Angular 中 WebSockets 的管理。无论是构建实时的聊天应用程序，还是实时监控系统，Angular WebSockets 都是一个可靠的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677640d46d66e0f9aa18edf2