简介
在前端应用的开发中，我们通常需要实现一些消息通讯的功能，例如实时聊天，广播等。传统的实现方式往往会涉及到 Socket 等底层通讯协议的处理，而 Angular 和 RxJS 这两个库提供了一种更优雅的实现方式。
在本文中，我们将介绍 Angular 和 RxJS 如何实现一个简单的通讯功能。
环境搭建
在开始项目之前，请确保已经安装了最新版本的 Angular CLI。我们将使用 ng 命令行工具来创建一个新的 Angular 项目：
ng new communication-app
进入项目目录并启动开发服务器：
cd communication-app ng serve
你也可以使用以下命令来开启生产模式下的服务器：
ng serve --prod
Angular 服务
在这个示例应用程序中，我们将使用 Angular 服务（Service）来处理通讯逻辑和数据。服务是一个普通的 TypeScript 类，其中包含我们需要实现的功能。在我们的应用程序中，我们需要三个服务：
- MessageService：一个用于处理消息通讯的服务，用于发起和接收新消息。
- AuthenticationService：一个用于处理用户认证的服务，用于验证用户凭证和管理用户相关信息。
- UserService：一个用于管理用户状态的服务，用于记录当前登录用户的信息。
我们可以使用 Angular CLI 来生成这些服务。 在我们的项目目录下，使用以下命令：
ng generate service message ng generate service auth ng generate service user
这将创建三个 TypeScript 文件，并导出一个对应的服务类，我们可以在这些类中添加我们自己的实现。
RxJS
虽然 Angular 服务可以在不使用第三方库的情况下处理异步操作，但引入 RxJS 可以使我们的代码更加优雅和模块化。
在使用 RxJS 之前，我们需要先安装 RxJS 库：
npm install rxjs --save
接下来，使用以下代码初始化一个可观察对象：
import { Observable } from 'rxjs';
const observable = new Observable(observer => {
observer.next('Hello!');
observer.complete();
});在上面的示例中，我们定义了一个可观察对象，并向其注册了一个观察者。在这个场景中，我们首先向观察者发送了一条消息 'Hello!'，随后我们调用了 observer.complete() 方法，表示不再需要发送任何消息。
通过调用 observable.subscribe() 方法，我们可以将观察者添加到这个可观察对象中。当被观察的对象有新的消息或者状态改变时，观察者将会被回调。这样我们便可以通过 RxJS 轻松地实现异步事件的处理。
通讯功能实现
现在我们已经准备好使用 Angular 和 RxJS 来实现我们的通讯功能了。
在 MessageService 中，我们将创建一个可观察对象来处理消息的传输，代码如下：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ----------- ------- - ---- -------
-------------
----------- ------
--
------ ----- -------------- -
------- ------- ----------
------- -------- -------------
------------- - -
------ ------------- --------------- -
----------- - --- ---------------
------------ - --- ----------
--------------------- - ----- -- ------------------------------
------------------- - ----- -- --------------------------
------------------- - -- -- ------------------------
------ ----------------------------
-
------ -------------------- ------- -
--------------------------
-
------ ------- -
--------------------
-
-在上述代码中，我们创建了一个 WebSocket 对象，并在其上注册了消息回调、错误回调和关闭回调。接下来，我们将这些回调封装到 Subject 对象中，并通过 asObservable() 方法对外暴露可观察对象。这样我们就能通过 subscribe() 函数在组件中监听消息的到来了。
组件实现
接下来，我们将在组件中使用 MessageService，监听新消息的到来。在 AppComponent 中添加客户端代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- --------------------
------ - ---------- - ---- -------
------------
--------- -----------
--------- -
----------------- --------
------
------ ----------- ----------------------
------- -------------------------------------
-------
----
--- ----------- ------- -- ------------ ------- -------
-----
-
--
------ ----- ------------ -
------ --------- ------------- - ---
------ -------- -------
------------------- --------------- --------------- -
----------------------------------------------------------------------
------- -- ----------------------------
--- -- -------------------
-- -- ------------------- ----------
-
------ ------------- -
----------------------------------------------
------------ - ---
-
-在上面的代码中，我们创建了一个文本框和按钮，用于向服务器发送新的消息，同时使用 *ngFor 指令展示所有的消息。在组件的构造函数中，我们使用 messageService.connect() 函数连接到服务器，并在每当新消息到来时更新 messages 变量。同时监控了连接的错误和关闭事件，以便我们及时处理相关逻辑。
总结
在这篇介绍中，我们学习了如何使用 Angular 和 RxJS 实现一个简单的通讯功能，同时引入了如何创建 WebSocket 对象和使用可观察对象进行异步处理的知识。
Angular 和 RxJS 的使用不仅可以使我们的代码更加优雅和模块化，也能提升项目的整体表现力。我们建议尝试在更多的项目中使用这些工具，以便更好地构建出高效、可靠的前端应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649fb97648841e9894c1592a