WebSocket 是一种全双工通信协议，可以在客户端和服务器之间建立持久性的连接，实现实时通信。在 Angular 中，我们可以使用 WebSocket 来实现即时通讯功能，本文将介绍如何在 Angular 中使用 WebSocket。
WebSocket 的基本概念
在使用 WebSocket 之前，我们需要了解一些 WebSocket 的基本概念：
WebSocket URL：WebSocket 协议使用的 URL 格式为
ws://host:port/path，其中ws表示使用的是 WebSocket 协议，host表示服务器地址，port表示端口号，path表示 WebSocket 服务器的路径。WebSocket 连接：WebSocket 连接是在客户端和服务器之间建立的持久性连接，可以实现双向通信。
WebSocket 消息：WebSocket 消息是通过 WebSocket 连接发送和接收的数据，可以是文本或二进制数据。
在 Angular 中使用 WebSocket
在 Angular 中使用 WebSocket，我们需要使用 WebSocket 类。首先，我们需要在组件中引入 WebSocket 类：
import { Component } from '@angular/core';
import { WebSocket } from 'rxjs/webSocket';然后，我们可以在组件中创建一个 WebSocket 实例：
export class AppComponent {
private socket$: WebSocket;
constructor() {
this.socket$ = new WebSocket('ws://localhost:8080');
}
}在上面的代码中，我们创建了一个名为 socket$ 的 WebSocket 实例，指定了 WebSocket 服务器的 URL。
接下来，我们可以使用 socket$ 实例的 asObservable() 方法来订阅 WebSocket 消息：
-- -------------------- ---- -------
------ ----- ------------ -
------- -------- ----------
------------- -
------------ - --- ---------------------------------
--------------------------------------
--------- ------------- -- -
--------------------- -------- -- --------------
--
----- ------ -- -
------------------------ ------ -- -----
--
-- -- -
---------------------- -----------
-
--
-
-在上面的代码中，我们使用 asObservable() 方法将 socket$ 实例转换为 Observable，然后使用 subscribe() 方法订阅 WebSocket 消息。当收到 WebSocket 消息时，subscribe() 方法的第一个回调函数会被调用，当 WebSocket 出现错误时，第二个回调函数会被调用，当 WebSocket 关闭时，第三个回调函数会被调用。
最后，我们可以使用 socket$ 实例的 next() 方法来发送 WebSocket 消息：
-- -------------------- ---- -------
------ ----- ------------ -
------- -------- ----------
------------- -
------------ - --- ---------------------------------
--------------------------------------
--------- ------------- -- -
--------------------- -------- -- --------------
--
----- ------ -- -
------------------------ ------ -- -----
--
-- -- -
---------------------- -----------
-
--
------------------------- -------------
-
-在上面的代码中，我们使用 next() 方法发送了一条文本消息。
示例代码
下面是一个完整的示例代码，它演示了如何在 Angular 中使用 WebSocket 实现即时通讯：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- -----------------
------------
--------- -----------
--------- -
------------- ------------
---- ----------- ------- -- ------------ ------- --------
--
--
------ ----- ------------ -
------- -------- ----------
------ --------- -------- - ---
------------- -
------------ - --- ---------------------------------
--------------------------------------
--------- ------------- -- -
---------------------------------
--
----- ------ -- -
------------------------ ------ -- -----
--
-- -- -
---------------------- -----------
-
--
------------------------- -------------
-
-在上面的代码中，我们创建了一个名为 AppComponent 的组件，它使用 WebSocket 接收并显示消息。在组件的构造函数中，我们创建了一个 WebSocket 实例，并使用 asObservable() 方法订阅 WebSocket 消息。当收到 WebSocket 消息时，我们将消息添加到 messages 数组中，然后使用 ngFor 指令在模板中显示消息。最后，我们使用 next() 方法发送了一条文本消息。
总结
本文介绍了如何在 Angular 中使用 WebSocket 实现即时通讯功能。我们学习了 WebSocket 的基本概念，以及如何使用 WebSocket 类创建 WebSocket 实例，订阅 WebSocket 消息，发送 WebSocket 消息。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6611b122d10417a22223906a