WebSocket 是一种在 Web 应用程序中实现双向通信的技术。它允许客户端和服务器之间的实时通信，而无需通过 HTTP 请求和响应进行通信。在 Angular 中，我们可以使用 WebSocket 来建立实时连接并进行数据传输。
安装 WebSocket
在 Angular 中使用 WebSocket，我们首先需要安装一个 WebSocket 库。可以使用以下命令来安装最流行的 WebSocket 库：socket.io。
npm install socket.io-client --save
安装完成后，我们可以在项目中使用 Socket.io 库。
建立 WebSocket 连接
在 Angular 中，我们可以使用 Socket.io 提供的 io() 方法来建立 WebSocket 连接。首先，在需要使用 WebSocket 的组件中引入 Socket.io：
import * as io from 'socket.io-client';
然后在组件中声明一个 Socket 对象，使用 io() 方法建立 WebSocket 连接：
export class MyComponent implements OnInit {
private socket: any;
ngOnInit() {
this.socket = io('http://localhost:3000');
}
}在这个例子中，我们将 localhost:3000 设置为 WebSocket 服务器的地址。根据实际需要，可以将服务器地址和端口号更改。当我们调用 io() 方法时，它将返回一个 WebSocket 对象。该对象将保持与服务器的实时连接，并允许我们使用各种 WebSocket 方法与服务器通信。
发送和接收消息
当 WebSocket 连接成功后，我们可以使用 emit() 方法发送消息到服务器。在服务器上，我们可以使用 on() 方法监听这些消息并进行处理。以下是一个简单的 WebSocket 通信示例：
-- -------------------- ---- -------
------ ----- ----------- ---------- ------ -
------- ------- ----
------ -------- -------
---------- -
----------- - ----------------------------
------------------------- --------- ------- -- -
--------------------- ------- ---- ------- -------------
------------ - --------
---
-
------ -------------- ---- -
--------------------------- ------- ----------
-
-在这个例子中，我们定义了一个名为 sendMessage() 的方法，它将使用 emit() 方法发送一条消息到服务器，消息内容为 Hello, server!。客户端还定义了一个名为 message 的属性，用于在组件模板中显示来自服务器的消息。在组件的 ngOnInit() 生命周期钩子中，我们使用 on() 方法来监听来自服务器的消息。当消息到达时，我们将在控制台中打印一条消息，并将消息存储在组件的 message 属性中。
总结
WebSocket 是一种用于实时通信的强大技术，在 Angular 应用程序中使用 WebSocket 可以帮助我们构建更加实时和响应的应用程序。在本文中，我们讨论了如何在 Angular 中使用 Socket.io 库来建立 WebSocket 连接，并发送和接收数据。希望这篇文章对你学习 WebSocket 和 Angular 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647fe69748841e9894f67b8e