介绍
WebSockets 是一种在浏览器和服务器之间实现双向通信的技术。在前端应用程序中使用 WebSockets 可以实现实时通信和数据更新，提高用户体验。Angular 是一种流行的前端框架，本文将介绍如何在 Angular 应用程序中使用 WebSockets。
WebSocket API
在使用 WebSockets 之前，我们需要了解 WebSocket API。WebSocket API 提供了一组用于创建和管理 WebSocket 连接的接口。在 Angular 应用程序中，我们可以使用 WebSocket API 的 WebSocket 对象来创建和管理 WebSocket 连接。
WebSocket 对象
WebSocket 对象是 WebSocket API 的核心对象，它提供了一组用于创建和管理 WebSocket 连接的方法和属性。在 Angular 应用程序中，我们可以使用 WebSocket 对象来创建和管理 WebSocket 连接。
创建 WebSocket 对象
创建 WebSocket 对象的语法如下：
var ws = new WebSocket(url, protocols);
其中，url 是 WebSocket 服务器的 URL，protocols 是一个可选参数，用于指定 WebSocket 子协议。
WebSocket 对象的方法和属性
WebSocket 对象提供了以下方法和属性：
send(data)：向服务器发送数据。close(code, reason)：关闭 WebSocket 连接。readyState：WebSocket 连接的状态。onopen：WebSocket 连接建立时触发的事件。onmessage：接收到服务器发送的消息时触发的事件。onclose：WebSocket 连接关闭时触发的事件。onerror：WebSocket 连接出错时触发的事件。
在 Angular 应用程序中使用 WebSockets
在 Angular 应用程序中使用 WebSockets 的过程分为两个步骤：创建 WebSocket 连接和发送和接收消息。
创建 WebSocket 连接
在 Angular 应用程序中创建 WebSocket 连接的方法如下：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-------------
----------- ------
--
------ ----- ---------------- -
------- --- ----------
------------- - -
------ ------------ -------- ---- -
------- - --- ---------------
-
-在上面的代码中，我们定义了一个 WebSocketService，它包含了一个 connect 方法用于创建 WebSocket 连接。在 connect 方法中，我们创建了一个 WebSocket 对象，并将其赋值给 ws 属性。
发送和接收消息
在 Angular 应用程序中发送和接收消息的方法如下：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- ---------------- -
------- --- ----------
------------- - -
------ ------------ -------- --------------- -
------- - --- ---------------
------ --- ------------------- -- -
----------------- - ----- -- --------------------------
--------------- - ----- -- ----------------------
--------------- - ----- -- --------------------
---
-
------ -------------------- ----- ---- -
--------------------------------------
-
-在上面的代码中，我们定义了一个 WebSocketService，它包含了一个 connect 方法和一个 sendMessage 方法。在 connect 方法中，我们创建了一个 WebSocket 对象，并返回一个 Observable，用于接收服务器发送的消息。在 sendMessage 方法中，我们将消息转换为 JSON 格式，并发送给服务器。
示例代码
下面是一个完整的示例代码，演示了如何在 Angular 应用程序中使用 WebSockets：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- -----------------------
------------
--------- -----------
--------- -
-----
------------- ---------
----
--- ----------- ------- -- ------------ ------- -------
-----
------ --------------------- ------------------ ---------
------- ---------------------------- ----------------
------
--
--
------ ----- ------------ -
------ --------- -------- - ---
------ -------- -------
------------------- ----------------- ----------------- --
---------- -
---------------------------------------------------------------
------- -- -
----------------------------
--
--- -- -------------------
-- -- ---------------------- ---------- --------
--
-
------------- -
----------------------------------- -------- ------------ ---
------------ - ---
-
-在上面的示例代码中，我们创建了一个 AppComponent，它包含了一个输入框和一个按钮，用于发送消息。在 ngOnInit 方法中，我们调用了 WebSocketService 的 connect 方法，并订阅了服务器发送的消息。在 sendMessage 方法中，我们调用了 WebSocketService 的 sendMessage 方法，将消息发送给服务器。
结论
在本文中，我们介绍了如何在 Angular 应用程序中使用 WebSockets。我们了解了 WebSocket API 的基本用法，并演示了如何在 Angular 应用程序中创建 WebSocket 连接和发送和接收消息。希望本文能够帮助大家更好地使用 WebSockets。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6760260903c3aa6a56fcf55a