WebSocket 是一种在客户端和服务器之间建立实时通信的协议。在前端开发中，我们经常需要使用 WebSocket 来实现实时通信，比如聊天室、实时消息推送等功能。在 Angular 中，我们可以使用 @angular/websocket 库来实现 WebSocket 的使用。
安装 @angular/websocket 库
首先，我们需要安装 @angular/websocket 库。使用以下命令进行安装：
npm install --save @angular/websocket
创建 WebSocket 服务
在 Angular 中，我们可以使用服务来管理 WebSocket 的连接和通信。我们可以使用 WebSocketSubject 类来创建一个 WebSocket 服务。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- ---------------- - ---- -----------------
-------------
----------- ------
--
------ ----- ---------------- -
------- -------- ----------------------
------------- --
------ ------------ -------- ---- -
------------ - ---------------
-
------ ------------- ----- ---- -
---------------------------
-
------ ------------ --------------- -
------ ----------------------------
-
------ ------------- ---- -
------------------------
-
-在上面的代码中，我们创建了一个 WebSocketService 服务，它包括了 connect、send、onMessage 和 disconnect 四个方法。其中，connect 方法用来连接 WebSocket，send 方法用来发送消息，onMessage 方法用来监听消息，disconnect 方法用来断开 WebSocket 连接。
在组件中使用 WebSocket 服务
接下来，我们可以在组件中使用 WebSocketService 服务来实现 WebSocket 的使用。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------------- - ---- -----------------------
------------
--------- -----------------
------------ ------------------------------
---------- -------------------------------
--
------ ----- ------------------ ---------- ------ -
------ -------- -------
------------------- ----------------- ----------------- --
----------- ---- -
-----------------------------------------------------
----------------------------------------------------- -- -
------------ - --------
---
-
------ -------------- ---- -
---------------------------------- -------------
-
------ ------------- ---- -
-----------------------------------
-
-在上面的代码中，我们创建了一个 WebSocketComponent 组件，它包括了 message 属性、sendMessage 方法和 disconnect 方法。在 ngOnInit 生命周期钩子中，我们连接了 WebSocket，并使用 onMessage 方法来监听消息。在 sendMessage 方法中，我们发送了一条消息。在 disconnect 方法中，我们断开了 WebSocket 连接。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- ---------------- - ---- -----------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- ---------------- -
------- -------- ----------------------
------------- --
------ ------------ -------- ---- -
------------ - ---------------
-
------ ------------- ----- ---- -
---------------------------
-
------ ------------ --------------- -
------ ----------------------------
-
------ ------------- ---- -
------------------------
-
-
------------
--------- -----------------
------------ ------------------------------
---------- -------------------------------
--
------ ----- ------------------ ---------- ------ -
------ -------- -------
------------------- ----------------- ----------------- --
----------- ---- -
-----------------------------------------------------
----------------------------------------------------- -- -
------------ - --------
---
-
------ -------------- ---- -
---------------------------------- -------------
-
------ ------------- ---- -
-----------------------------------
-
-总结
在本文中，我们介绍了如何在 Angular 中使用 WebSocket。我们创建了一个 WebSocketService 服务来管理 WebSocket 的连接和通信，同时在组件中使用 WebSocketService 服务来实现 WebSocket 的使用。希望本文能够对大家学习和使用 Angular 中的 WebSocket 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6556c485d2f5e1655d122572