WebSockets 是一种双向通信协议，可以在浏览器和服务器之间实现实时通信。在许多现代 Web 应用程序中，包括聊天应用程序、即时通讯应用程序和多人游戏应用程序中，WebSockets 是必不可少的。在本文中，我们将学习如何在 Angular 中使用 WebSockets，以实现实时数据传输。
WebSocket 的工作原理
WebSockets 是一种 HTTP 升级协议，它可以创建持久连接，在客户端和服务器之间实现双向通信。在一个典型的 WebSockets 连接中，客户端首先发送一个 HTTP 请求，请求通过特定的协议来更新为 WebSockets 连接。一旦建立了 WebSockets 连接，客户端和服务器可以在此连接上发送消息，从而实现实时通信。
安装 WebSocket 库
在 Angular 中使用 WebSockets，我们需要使用一个 WebSocket 库。在本文中，我们将使用 Angular WebSockets 库。为了安装这个库，我们需要使用 npm 命令。在命令行中输入以下命令：
npm install ngx-socket-io socket.io-client --save
这个命令将安装 ngx-socket-io 和 socket.io-client 两个库，用于在 Angular 中使用 WebSockets。
创建 WebSocket 服务
我们将使用 Angular CLI 命令行工具创建一个 WebSocket 服务。在命令行中输入以下命令：
ng generate service websocket
这个命令将创建一个名为 websocket 的服务。打开 websocket.service.ts 文件，我们将添加以下代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------ - ---- ----------------
-------------
----------- ------
--
------ ----- ---------------- -
------------------- ------- ------- - -
---------------- ------- -
--------------------------- -----
-
------------- -
------ -----------
---------------------
------
-------- -- ---------
--
-
-在这个服务中，我们创建了一个名为 WebsocketService 的类，并声明了一些方法：
sendMessage(): 用于发送消息到服务端。getMessages(): 用于接收从服务端发送过来的消息。
在组件中使用 WebSocket 服务
现在我们已经创建了 WebSocket 服务，我们需要在组件中使用它。在需要使用 WebSocket 服务的组件中，我们需要导入 WebsocketService，并注入它。
在组件中，我们可以使用以下代码调用 WebsocketService 的方法：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------- - ---
--------- -------- - ---
------------------- ----------------- ----------------- - -
---------- -
---------------------
--------------
-------------------- ------- -- -
----------------------------
---
-
------------- -
------------------------------------------------
------------ - ---
-
-在这个组件中，我们声明了一个名为 AppComponent 的类，用于处理组件的逻辑。在 ngOnInit() 方法中，我们订阅了 WebsocketService 中的 getMessages() 方法，并在 subscribe() 方法中将收到的消息添加到 messages 数组中。在 sendMessage() 方法中，我们使用 WebsocketService 的 sendMessage() 方法发送消息到服务器端。
示例代码
以下是完整的示例代码：
-- -------------------- ---- -------
-- -------------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - --------------- -------------- - ---- ----------------
----- ------- -------------- - - ---- ------------------------ -------- -- --
-----------
-------- --------------- --------------------------------
------------- ---------------
---------- --------------
--
------ ----- --------- - -
-- --------------------
------ - ---------- - ---- ----------------
------ - ------ - ---- ----------------
------ - --- - ---- -----------------
-------------
----------- ------
--
------ ----- ---------------- -
------------------- ------- ------- - -
---------------- ------- -
--------------------------- -----
-
------------- -
------ -----------
---------------------
------
-------- -- ---------
--
-
-
-- ----------------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------- - ---
--------- -------- - ---
------------------- ----------------- ----------------- - -
---------- -
---------------------
--------------
-------------------- ------- -- -
----------------------------
---
-
------------- -
------------------------------------------------
------------ - ---
-
-
-- ------------------
-----
---- ----------- ------- -- ------------ ------- --------
------ --------------------- ----------------- - ------------
------- -------------------------------------
------结论
在本文中，我们学习了如何在 Angular 中使用 WebSockets 进行实时通信。我们安装了 ngx-socket-io 库，并创建了一个 WebSocket 服务。我们还学习了如何在组件中使用这个服务。这个例子可以用于创建实时通信的应用程序，如聊天应用、即时通讯应用、在线游戏和多人协作应用。通过学习这些技能，我们可以提高 Web 开发的能力，创建更好的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f5135ec5c563ced56be9c7