在 Angular 中使用 WebSocket 进行实时通信
Web 开发的一个重要需求是实现实时通信。传统的 HTTP 只能实现客户端向服务器的请求和服务器向客户端的响应。而 WebSocket 可以在客户端和服务器之间启建立一个持久化连接，实现全双工的通信。
Angular 是一套完整的前端开发框架，提供了很多提高开发效率的工具。在 Angular 中使用 WebSocket 实现实时通信相对比较简单，本文将为大家详细介绍如何使用 WebSocket 实现实时通信。
一、什么是 WebSocket
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它是一种基于 TCP 协议通信的新协议，利用 HTTP 协议进行握手，然后在握手阶段协商使用更快的协议 WebSocket 建立相应的网络通道。
WebSocket 的特点：
1.支持全双工通信，服务器可以主动向客户端推送消息。
2.相对于 HTTP 协议，WebSocket 协议的通信效率更高。
3.在通信的数据帧中可以添加自定义的二进制数据，与传统的文本数据一起传输。
4.WebSocket 基于标准的 TCP 协议，服务端和客户端均可以使用。
二、Angular 开发环境搭建
在本文中，我们使用 Angular CLI 工具来快速完成 Angular 程序的创建。如果你尚未安装 Angular CLI 工具，请使用如下命令进行安装：npm install -g @angular/cli
创建一个 Angular 程序，要用到如下命令：ng new webSocketDemo。
该命令运行后，会自动创建 webSocketDemo 目录，在该目录下会自动生成一个完整的 Angular 程序。使用如下命令进入 webSocketDemo 目录，并启动 Angular 程序：cd webSocketDemo，ng serve。运行后，Angular 程序就已经启动了。
三、使用 WebSocket 进行实时通信的代码实现
- 创建 WebSocket 连接
在 Angular 中创建 WebSocket 连接，我们使用 WebSocket 对象，代码如下：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-------------
----------- ------
--
------ ----- ---------------- -
--- ----------
------------- - -
--------------------------- -------- --------------- -
------- - --- ---------------
------ --- ------------------- -- -
----------------- - ------- -- --------------------------
--------------- - ------- -- ----------------------
--------------- - ------- -- --------------------
--
-
-通过 TypeScript 类编写的 WebSocketService，使用注入器 @Injectable 装饰该类，并使用 providers 属性注册。在该类中，我们定义了一个属性 ws，该属性是 WebSocket 类型，用来创建 WebSocket 连接。之后，我们定义了一个 createObservableSocket() 方法，该方法接受一个参数 url，表示创建 WebSocket 连接的 URL 地址。
在方法中，我们使用 new WebSocket(url) 建立一个 WebSocket 连接，并返回一个 Observable 对象。我们在该 Observable 中设置了三个回调函数，分别是 onmessage、onerror、onclose。
1）onmessage 是严格的 WebSocket 特性，当在 Websocket 对象中有消息过来的时候会触发事件。
2）onerror 可以在任何时候被 WebSocket 坚持调用，当网络中出现错误，比如无法建立连接，或者连接断掉时。当一个错误被发现的时候，触发 error 事件，并把相关的错误信息传递到事件处理程序中。
3）onclose 在关闭任何这种类型的 WebSocket 的时候都被触发。这是告诉程序停止处理打开的连接以及与之相关的对象实例。当程序发现这个事件的时候，程序会把相关信息传递到此事件的处理程序中。
- 在 Angular 应用中使用 WebSocket
在 Angular 应用中，我们可以使用上一步中定义的 WebSocketService 进行 WebSocket 连接的创建，并将连接创建在 ngOnInit 生命周期里进行。创建完成后，我们就可以通过 websocket 对象发送和接收 WebSocket 消息了，代码如下：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------------- - ---- -----------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ ---------- ------ -
-------- ----
------------------- --- ----------------- --
---------- -
----------------------------------------------------------
--------------- -- ------------ - ------
-
------------- -
--------------------------------------- ----------
-
-在该组件中，我们使用了我们上一步中定义的 WebSocketService，用于创建 WebSocket 连接。在 ngOnInit 生命周期中，我们调用 createObservableSocket 方法，创建 WebSocket 连接，该连接打开后，observable.subscribe() 中的代码就开始正常执行，具体来说就是将 onmessage、onerror、onclose 回调函数中的数据流转换为订阅流，并进行订阅。 所以，每次有消息从服务器传回来时，AppComponent 中使用订阅流的代码数据就会变化。这样我们就可以在 HTML 中声明和绑定了变化的数据。
在代码中，我们用 input 标签和 button 标签来绑定 WebSocket 数据。并且当点击按钮时，我们用 ws.ws.send() 方法来发送数据。最后，我们在 ngOnInit 中使用 createObservableSocket() 方法创建了一个 WebSocket 连接，时间间隔为 5 秒。
示例代码如下：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------------- - ---- -----------------------
------ - ------------- ----------- -------- - ---- -------
------ - --------- - ---- -----------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ ---------- ------ -
-------- ----
------------------- --- ----------------- --
---------- -
----------------------------------------------------------
--------------- -- ------------ - ------
----- --------- - ---------------
---------------
------------ -- -----------------------------------------------------------
---------------- -- ------------ - ------
-
------------- -
--------------------------------------- ----------
-
-四. 总结
以上就是在 Angular 中使用 WebSocket 进行实时通信的完整实现流程。WebSocket 的开发非常适合于逑离异步通信的需求，也比较适合聊天、直播等实时交互的场景。本文以 Angular 为蓝本，介绍了如何使用 WebSocket 实现实时通信，并且希望本文能对大家有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645ee9bf968c7c53b0112eee