简介
随着越来越多的应用程序需要支持实时通信，Websockets 技术也变得越来越受欢迎。Websockets 的优点是能够建立双向通信，不需要频繁地发送 HTTP 请求，从而提高了应用程序的效率和可扩展性。在此技术文章中，我们将介绍如何在 Angular 应用程序中使用 Websockets 实现实时通信。
前置知识
在本篇文章中，我们假设您已经具备 Angular 的基础知识，包括组件、服务、依赖注入、路由等。
步骤
第一步：安装 socket.io
Angular 自带的 Http 模块仅支持基于 HTTP 和 HTTPS 的通信，无法直接使用 Websockets 实现实时通信。因此，我们需要使用第三方 Websockets 库来实现实时通信。本篇文章将使用 socket.io 库。
首先，我们需要在 Angular 项目中安装 socket.io。打开终端，进入项目根目录，然后运行以下命令：
--- ------- ---------------- ------
第二步：创建服务
接下来，我们需要创建一个服务来处理 Websockets。在 Angular 中，服务是用来提供数据或共享逻辑的单例对象。服务可以通过依赖注入在整个应用程序中共享。
在 src/app 目录下，创建一个新的文件夹 named service，然后在该文件夹下创建一个新的文件 named socket.service.ts。然后，将以下代码添加到socket.service.ts 中：
------ - ---------- - ---- ----------------
------ - -- -- ---- -------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- ------------- -
------- ------- ----
------- --- - ------------------------ ----------------
------------- --
-- --- --------- ---
------ ---------- ---- -
----------- - -------------
-
-- -- --------- --
------ ------------- ---- -
-- ------------- -
-------------------------
-
-
-- -- --------- --
------ -------------------- ----- ---- -
--------------------------- ---------
-
-- -- --------- --
------ ----------------- --------------- -
------ --- ------------------------ -- -
------------------------- ------ ---- -- -
--------------------
---
---
-
-在这个服务中，我们使用 socket.io-client 库来连接到 Websocket 服务器。在 connect() 方法中，我们创建了一个新的 socket.io 客户端，并将其连接到了 url 指定的服务器上。disconnect() 方法使用socket.io自带的api断开与服务器的连接。sendMessage() 方法用于向服务器发送消息，receiveMessage() 方法用于订阅从服务器接收的消息。
第三步：使用服务
在 Angular 组件中使用服务非常简单。我们只需要在组件构造函数中注入该服务即可。在本例中，我们将创建一个简单的聊天室应用程序，该应用程序将允许用户输入他们的用户名和消息。
------ - --------- - ---- ----------------
------ - ------------- - ---- ------------------------------------
------------
--------- -----------
------------ -----------------------
--
------ ----- ------------- -
------- -------- ------ - ---
------- --------- -------- - ---
------- --------- ------ - ---
------------------- -------------- -------------- -
-----------------------------
-
-- ----
------ -------------- ---- -
-------------------------------- -------- ------------- ----- ------------- ---
-
-- ----
------ ----------------- ---- -
---------------------------------------------------- ---- -- -
-------------------------
---
-
-- ----
------ ------------- ---- -
--------------------------------
-
-在该组件中，我们注入了 SocketService，并在构造函数中调用 connect() 方法。sendMessage() 和 receiveMessage() 方法分别用于向服务器发送消息和从服务器接收消息。disconnect() 方法用于断开与服务器的连接。
第四步：创建模板
我们还需要创建一个模板，根据用户输入，显示消息并提供发送消息的功能。
------------- --------- ------- ----------------------- ------- ----------- ------ - ---- ----------- ------- ---------------------------- ------- ------------------------ ------- -------------------------------- --------- ------ ----------- --------------------- ----------------- ---- ------- ----- -- ------- ------------------------------------- --- -- ---- ----------- ------- -- ---------- -- ------- -- ------ ------- ------------------------------------------
该模板使用了 Angular 的数据绑定功能，以便在用户输入用户名和消息时更新组件的属性。
第五步：启动 Websocket 服务器
最后，我们需要启动一个 Websocket 服务器，以便 Angular 应用程序可以连接。在本例中，我们将使用 Node.js 和 Express 框架来创建服务器。
在终端中进入项目根目录，运行以下命令安装 Express 和 socket.io：
--- ------- ------- --------- ------
然后创建一个新的文件 named server.js，在该文件中添加以下代码：
----- ------- - -------------------
----- ---- - ----------------
----- -------- - ---------------------
----- --- - ----------
----- ------ - -----------------------
----- -- - -----------------
------------------- -------- -- -
-------------- ---- --- ------------
-------------------- ------ -- -
--------------------- - ------- ---- ------------- ------------------
------------------ -------------- ------------------
---
----------------------- -- -- -
-------------- ---- --- ---------------
---
---
------------------- -- -- -
------------------- -- ------- -- ---- -------
---在该服务器代码中，我们使用 Express 创建了一个 HTTP 服务器，并将其与 socket.io 库绑定。当客户端连接到服务器时，调用连接回调函数，并在该函数中定义了 message 和 disconnect 事件的处理程序。当客户端发送消息时，服务器将该消息广播给所有连接的客户端。
现在，我们需要运行以下命令来启动 Websocket 服务器：
---- ---------
结论
在本篇技术文章中，我们已经了解了如何在 Angular 应用程序中使用 Websockets 实现实时通信。我们使用了 socket.io 库来连接 Websocket 服务器，并创建了一个服务来处理 Websockets。我们还创建了一个简单的聊天应用程序来演示如何使用 Websockets。最后，我们使用 Node.js 和 Express 框架创建了一个简单的 Websocket 服务器。
Websockets 技术为实时通信提供了一种高效、可扩展和可靠的方式，使得我们能够构建更加强大、更加响应的 Web 应用程序。我们希望这篇技术文章能够对您帮助，如果您有任何疑问或建议，请在下方留言区给我们留言。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66f7cfbbc5c563ced5ac28bf