什么是 Websockets？
Websockets 是一种 HTML5 技术，它允许客户端和服务器之间建立一个持久性的连接，并且在连接建立后可以双向通信。Websockets 使得实时通信变得非常容易，因为它们允许服务器向客户端推送数据而不需要客户端发起请求。
为什么要使用 Websockets？
使用 Websockets 可以让我们实现实时通信，这在许多应用程序中非常有用。例如，如果你正在构建一个聊天应用程序，那么使用 Websockets 可以让你实现实时聊天，而不需要让客户端不停地轮询服务器来检查是否有新消息。
如何在 Angular 中使用 Websockets？
在 Angular 中使用 Websockets 很简单。我们可以使用 WebSocket 对象来创建一个 Websocket 连接，然后使用 RxJS 来处理从服务器接收到的数据。
首先，让我们创建一个服务来管理我们的 Websocket 连接：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----------- -------- - ---- -------
-------------
----------- ------
--
------ ----- ---------------- -
------- ------- ----------
------- -------- --- - ----------------------
------ ---------- --------------- -
----------- - --- --------------------
------ --- --------------------- -------------- -- -
--------------------- - ------- -- -
--------------------------
--
------------------- - ------- -- -
----------------------
--
------------------- - -- -- -
--------------------
--
---
-
------ -------------------- -------- ---- -
--------------------------
-
-在上面的代码中，我们创建了一个 WebsocketService 服务来管理我们的 Websocket 连接。在 connect() 方法中，我们创建了一个 Observable 对象来处理从服务器接收到的数据。在 sendMessage() 方法中，我们可以向服务器发送消息。
现在，让我们看一下如何在组件中使用这个服务：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
--------- -
------ ----------- ----------------------
------- -------------------------------------
----
--- ----------- ------- -- ------------ ------- -------
-----
-
--
------ ----- ------------ ---------- ------ -
------ -------- -------
------ --------- -------- - ---
------------------- ----------------- ----------------- --
------ ----------- ---- -
--------------------------------------------------- ------- -- -
----------------------------
---
-
------ -------------- ---- -
------------------------------------------------
------------ - ---
-
-在上面的代码中，我们注入了 WebsocketService 服务，并在 ngOnInit() 方法中订阅了从服务器接收到的数据。在 sendMessage() 方法中，我们向服务器发送消息，并清空输入框中的文本。
总结
使用 Websockets 可以让我们实现实时通信，这在许多应用程序中非常有用。在 Angular 中使用 Websockets 很简单，我们只需要创建一个 WebSocket 对象来创建一个 Websocket 连接，然后使用 RxJS 来处理从服务器接收到的数据。在组件中使用这个服务也很容易，我们只需要注入 WebsocketService 服务，并在 ngOnInit() 方法中订阅从服务器接收到的数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656be178d2f5e1655d43c168