WebSocket 是一种基于 TCP 协议的通信协议，它可以在客户端和服务器之间建立持久性的连接，实现实时通信的效果。在前端开发中，通常可以用 WebSocket 实现在线聊天、实时推送等功能。本文将介绍如何在 Angular 中使用 WebSocket 实现即时通信。
简介
在 Angular 中，可以通过 Angular 的 HttpClient API 发送 HTTP 请求和接受响应。但是，HTTP 协议是无状态协议，每次请求都需要重新建立连接，不适合实时通信。而 WebSocket 协议可以实现全双工通信，不需要重新建立连接，对实时通信非常有帮助。
本文将使用 Angular 中的 angular-websocket 模块，它是一个让 Angular 支持 WebSocket 的模块。
安装
首先，需要安装 angular-websocket 模块：
npm install angular-websocket --save
使用
安装完成后，需要在使用前导入 WebSocket 模块，把要监听的事件写在构造函数里，例如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- --------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
--- -----------
------------- -
------- - --- ----------------------------------
--------------------------- ------------- -- -
--------------------------
---
-
-以上代码中，$WebSocket 是 angular-websocket 模块提供的 WebSocket 类，通过 this.ws.onMessage() 监听接收到的消息。
实际项目中，可以把监听事件封装到一个服务中，方便复用。
在打开页面后，连接会自动建立。我们可以通过 this.ws.send() 方法发送消息，例如：
this.ws.send('Hello, WebSocket!');在接收到消息后，可以调用 $scope.$apply() 来更新视图，例如：
this.ws.onMessage((message) => {
this.messageList.push(message.data);
this.$scope.$apply();
});完整的示例代码如下：
-- -------------------- ---- -------
------ - ---------- ------- --------- - ---- ----------------
------ - ---------- - ---- --------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------- ----------
--- -----------
------------ -------- - ---
-------- ------ - ---
------------- - -
---------- -
------- - --- ----------------------------------
--------------------------- ------------- -- -
------------------------------------
------------ - ---
---------------------
---
-
------------- - -
------------- -
---------------------------
-
-总结
本文介绍了如何在 Angular 中使用 WebSocket 实现即时通信。通过使用 angular-websocket 模块，可以方便地与服务器进行双向通信。实际应用中，需要注意数据传输的安全性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6492541248841e989401fc70