WebSocket 是一种基于 HTTP 协议的双向通讯协议，它实现了真正的实时通讯，可以大大降低服务器和客户端之间的通信延迟， 让用户更快得到服务响应。在 Angular 12 中，我们可以使用 HttpClient 来实现 WebSocket 连接。本文将介绍如何使用 HttpClient 在 Angular 12 中实现 WebSocket 连接。
WebSocket 连接简介
WebSocket 协议是 HTML5 开始推出的一种网络协议，它是基于 HTTP 协议进行通信的，采用初始的 HTTP 协议建立连接，通过转换协议进行信息传输。相比传统的 HTTP 协议，WebSocket 协议建立连接后，客户端和服务器端之间可以随时发送数据。 并且它支持服务器端主动发送消息，让客户端实时获取服务器端的变化，从而实现真正的实时通讯。
准备工作
在开始实现之前，我们需要进行一些准备工作。首先，我们需要在 Angular 12 项目中安装 rxjs 库和 @types/websocket 库。我们可以通过以下命令来进行安装：
npm install --save rxjs @types/websocket
rxjs 库是利用现有的异步代码来组合和编排未来的异步代码，以及支持将回调压成非常简单的数字来管理复杂应用的库。而 @types/websocket 库则可以为我们的 TypeScript 代码提供 WebSocket 的类型定义。
创建 WebSocket 服务
为了实现 WebSocket 连接，我们需要创建一个 WebSocket 服务。在我们的服务中，我们将使用 websocket 库来创建 WebSocket 客户端，并利用 Angular 的 HttpClient 处理我们发出的 HTTP 请求。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- ---------------- - ---- -----------------
-------------
----------- ------
--
------ ----- ---------------- -
------- -------- ----------------------
------------------- ----- ----------- --
------ ---------- --------------------- -
----- --- - --------------------- -- --------- -----
------------ - ---------------
------ -------------
-
-在上述代码中，我们首先引入了 Angular 中的 HttpClient 和 rxjs/webSocket 库。 在 WebSocketService 类中，我们创建了 socket$ 变量以保存 WebSocket 对象，我们也可以通过 socket$ 来发送实时消息。在 connect() 方法中，我们创建了 url 变量来保存 WebSocket 服务端的地址。我们可以通过 webSocket() 函数来创建 WebSocket 客户端，然后将其保存在 socket$ 变量中，最后返回 socket$ 对象。
实现 WebSocket 的通讯
在 WebSocketService 类中，我们已经创建了 WebSocket 客户端，我们还需要实现 WebSocket 的通讯。为了实现 WebSocket 的通讯，我们可以通过 socket$ 变量来发送和接收消息。我们可以通过以下代码来实现：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- ---------------- - ---- -----------------
-------------
----------- ------
--
------ ----- ---------------- -
------- -------- ----------------------
------------------- ----- ----------- --
------ ---------- --------------------- -
----- --- - --------------------- -- --------- -----
------------ - ---------------
-----------------------
--------- -- --------------------- ---------- ---------
----- -- ----------------------- -----
-- -- ---------------------- --- ---- --------
--
------ -------------
-
------ -------------------- ----- ---- -
---------------------------
-
-在上述代码中，我们定义了 connect() 方法和 sendMessage() 方法来实现 WebSocket 的通讯。 在 connect() 方法中，我们通过 subscribe() 函数来处理我们收到的 WebSocket 消息和错误消息。 在 sendMessage() 方法中，我们使用 next() 函数来发送消息。 我们可以通过传递一个 message 参数来发送实时消息。
使用 WebSocket
现在我们已经创建了 WebSocket 服务并实现了 WebSocket 的通讯，接下来我们将介绍如何在 Angular 12 应用程序中使用它。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------------- - ---- -----------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
----- - ---------------------
------------------- ----------------- ----------------- --
----------- ---- -
----- ------ - --------------------------------
-----------------
--------- ---- -- -
--------------------- ---------- ---------
--
----- ---- -- ----------------------- -----
-- -- ---------------------- --- ---- --------
--
-
-------------------- ----- ---- -
-------------------------------------------
-
-在上述代码中，我们在根组件 AppComponent 中引入了 WebSocketService 并使用 connect() 方法来创建 WebSocket 连接。 在 ngOnInit() 方法中，我们使用 subscribe() 函数来处理我们收到的 WebSocket 消息 和错误消息。 在 sendMessage() 方法中，我们使用 sendMessage() 函数来发送消息。我们可以在模板中使用 sendMessage() 函数来发送消息。
总结
Angular 12 可以使用 HttpClient 来实现 WebSocket 连接。在本文中，我们详细介绍了如何使用 HttpClient 在 Angular 12 中实现 WebSocket 连接，并展示了用于连接与通讯的完整代码示例。希望本文能够帮助读者更好地理解 Angular 12 中 WebSocket 连接的工作方式并在自己的项目中应用这些技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65addbebadd4f0e0ff754135