在现代 Web 应用程序中，实时性已经成为了一个必要的功能，而 WebSocket 是实现实时通信的一种非常好的方式。Angular 是现代 Web 应用程序的前端框架之一，它提供了许多功能和工具，使我们可以更轻松地构建复杂的应用程序。在本文中，我们将介绍如何使用 Angular 和 WebSocket 构建一个实时聊天应用程序。
WebSocket 简介
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它允许客户端和服务器之间进行实时通信，而不需要使用轮询或长轮询技术。WebSocket 通信是基于事件的，这意味着当有新数据可用时，服务器会主动推送数据到客户端，而客户端也可以发送数据到服务器。
Angular 简介
Angular 是一个开源的前端框架，由 Google 开发。它提供了一种组件化的方法来构建 Web 应用程序，使开发人员可以更轻松地管理应用程序的复杂性。Angular 还提供了许多工具和库，使开发人员可以更轻松地构建和测试应用程序。
实时聊天应用程序架构
在本文中，我们将使用 Angular 和 WebSocket 构建一个实时聊天应用程序。该应用程序将由两个部分组成：客户端和服务器。客户端将使用 Angular 构建，而服务器将使用 Node.js 构建。客户端将使用 WebSocket 与服务器进行通信，以便实现实时通信。
以下是实时聊天应用程序的架构图：
实现步骤
1. 创建 Angular 应用程序
首先，我们需要创建一个 Angular 应用程序。可以使用 Angular CLI 快速创建应用程序：
ng new chat-app
2. 安装 WebSocket 库
接下来，我们需要安装一个 WebSocket 库，以便在 Angular 应用程序中使用 WebSocket。我们将使用 ngx-socket-io 库，这是一个 Angular 版本的 Socket.IO 客户端。
npm install ngx-socket-io --save
3. 创建 WebSocket 服务
现在，我们需要创建一个 WebSocket 服务，以便在客户端和服务器之间建立连接。我们将使用 Socket.IO 库来实现 WebSocket 服务。在 Angular 应用程序中，我们可以创建一个服务来管理 WebSocket 连接。
首先，我们需要导入 ngx-socket-io 库和 Injectable、Observable 等必要的类：
import { Injectable } from '@angular/core';
import { Socket } from 'ngx-socket-io';
import { Observable } from 'rxjs';然后，我们可以创建一个 WebSocket 服务类，并注入 Socket 类：
@Injectable({
providedIn: 'root'
})
export class WebsocketService {
constructor(private socket: Socket) { }
}接下来，我们可以添加一个方法来建立 WebSocket 连接：
connect(): void {
this.socket.connect();
}我们还可以添加一个方法来断开 WebSocket 连接：
disconnect(): void {
this.socket.disconnect();
}现在，我们已经创建了一个 WebSocket 服务，可以在客户端和服务器之间建立连接。
4. 创建聊天组件
接下来，我们需要创建一个聊天组件，以便用户可以输入消息并查看聊天记录。我们可以使用 Angular CLI 快速创建组件：
ng generate component chat
然后，我们可以在组件的 HTML 模板中添加一个输入框和一个按钮，以便用户可以输入消息并发送给服务器：
<input type="text" [(ngModel)]="message" placeholder="Enter message" /> <button (click)="sendMessage()">Send</button>
在组件的 TypeScript 代码中，我们可以注入 WebSocket 服务，并添加一个方法来发送消息：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------------- - ---- -----------------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- ---------- ------ -
-------- -------
------------------- ----------------- ----------------- - -
----------- ---- -
--------------------------------
-
-------------- ---- -
-----------------------------------
-
-------------- ---- -
-------------------------------------------- --------------
------------ - ---
-
-在这个方法中，我们使用 WebSocket 服务的 socket 对象来发送一个名为 "message" 的事件和用户输入的消息。然后，我们清空输入框的内容，以便用户可以输入下一条消息。
5. 接收消息并显示聊天记录
现在，我们已经可以发送消息给服务器了，但我们还需要接收服务器发送的消息，并将其显示在用户界面上。我们可以使用 Observable 对象来监听服务器发送的消息，并在组件的 HTML 模板中显示聊天记录。
首先，我们需要在 WebSocket 服务中添加一个方法来监听 "message" 事件：
listen(): Observable<any> {
return this.socket.fromEvent('message');
}然后，在聊天组件中，我们可以使用这个方法来订阅服务器发送的消息，并将它们添加到聊天记录中：
-- -------------------- ---- -------
------ - ---------- ------- --------- - ---- ----------------
------ - ---------------- - ---- -----------------------
------ - ---------- - ---- -------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- ---------- ------- --------- -
-------- -------
--------- -------- - ---
------------------- ----------------- ----------------- - -
----------- ---- -
--------------------------------
-------------------------------------------------- ------- -- -
----------------------------
---
-
-------------- ---- -
-----------------------------------
-
-------------- ---- -
-------------------------------------------- --------------
------------ - ---
-
-在这个代码中，我们使用 WebSocket 服务的 listen 方法来订阅服务器发送的 "message" 事件。当有新消息到达时，我们将其添加到 messages 数组中，并在 HTML 模板中使用 ngFor 指令来显示所有聊天记录：
<div *ngFor="let message of messages">
{{ message }}
</div>6. 创建服务器
现在，我们已经可以在客户端和服务器之间建立 WebSocket 连接，并发送和接收消息了。但我们还需要一个服务器来处理 WebSocket 连接和消息。
我们将使用 Node.js 和 Socket.IO 库来创建服务器。首先，我们需要安装 Socket.IO 库：
npm install socket.io --save
然后，我们可以创建一个 Node.js 服务器并使用 Socket.IO 库来处理 WebSocket 连接和消息：
-- -------------------- ---- -------
----- --- - -------------------------------
----- -- - --------------------------
------------------- -------- -- -
-------------- ---- ------------
-------------------- --------- -- -
----------------------- ---------
------------------ ---------
---
----------------------- -- -- -
----------------- ---------------
---
---
---------------- -- -- -
---------------------- -- ---------
---在这个代码中，我们创建了一个 Node.js 服务器，并使用 Socket.IO 库来处理 WebSocket 连接和消息。当有新用户连接时，服务器会打印 "a user connected"。当用户发送消息时，服务器会打印消息并将其发送给所有连接的客户端。当用户断开连接时，服务器会打印 "user disconnected"。
7. 运行应用程序
现在，我们已经完成了 Angular 应用程序和 Node.js 服务器的代码。我们可以使用以下命令来启动应用程序：
ng serve
node server.js
然后，我们可以在浏览器中访问 http://localhost:4200，即可看到聊天应用程序。在多个浏览器窗口中打开该应用程序，并尝试发送消息，即可看到实时聊天效果。
总结
在本文中，我们介绍了如何使用 Angular 和 WebSocket 构建一个实时聊天应用程序。我们从 WebSocket 的简介开始，然后介绍了 Angular 和 Socket.IO 库的基本概念。然后，我们详细介绍了如何在 Angular 应用程序中使用 WebSocket 和 Socket.IO 库来实现实时通信，并使用 Node.js 和 Socket.IO 库创建了一个 WebSocket 服务器。最后，我们演示了如何将客户端和服务器组合在一起，以实现实时聊天应用程序。
这个例子非常适合初学者，因为我们详细地介绍了每个步骤，并提供了示例代码。希望本文能够帮助您更好地理解 Angular 和 WebSocket，以及如何使用它们来构建实时应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660a7943d10417a222a11e73