Websocket 是一种基于 TCP 的协议，相较于传统的 HTTP 协议，它的实时性更好，可以避免 HTTP 的请求/响应模式所带来的延迟。在 Angular4/5 中，使用 Websocket 技术可以实现前端与后端之间的实时通信，例如在线聊天、数据推送等场景。
前置知识
在学习 Angular 中 Websocket 的使用之前，需要掌握以下知识：
- Angular 基础知识，包括组件、模块、服务、依赖注入等；
- TypeScript 基础知识，包括类型、接口、类等；
- Websocket 的基本原理和使用方法。
创建 Websocket 服务
在 Angular 中，可以通过创建一个服务来封装 Websocket 的连接和事件处理，并在需要的组件中注入该服务进行使用。
首先，需要执行 npm install --save ws 命令来安装 ws 模块。该模块是 Node.js 中的 Websocket 实现库，可以直接在 Angular 中使用。
然后，在 app.module.ts 文件中添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ---------------- - ---- -------------------------------
-----------
-------- -
-- ---
--
------------- -
-- ---
--
---------- -
---------------- -- -- --------- --
--
---------- --------------
--
------ ----- --------- - -在 services 目录下创建 websocket.service.ts 文件，添加以下代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- ------------------
------ - -- --------- ---- -----
-------------
------ ----- ---------------- -
------- --- ----------
------------- - -
---
- -- --------- --
- ------ --- --------- -----
- -------- -------------------- -- --------- ---
--
----------- -------- ------------------ -
------- - --- ---------------
------ --- ------------------- -- -
-------------- - ------- -- -
----------------------
--
----------------- - ------- -- -
-------------------------
--
--------------- - ------- -- -
----------------------
--
--------------- - ------- -- -
--------------------
--
---
-
---
- --------- ----
- ------ ------- ----
--
------------- -------- ---- -
-- ------------------- --- --------------- -
----------------------
-
-
---
- --------- ----
--
-------- ---- -
----------------
-
-以上代码中，create() 方法负责创建 Websocket 连接，并返回一个 Observable 对象，用于订阅 Websocket 事件流。send() 方法和 close() 方法分别用于发送消息和断开连接。
在组件中使用 Websocket 服务
在需要使用 Websocket 服务的组件中，可以在构造函数中注入该服务，并调用 create() 方法来创建连接。可以通过订阅 Observable 对象来监听 Websocket 事件流，例如接收消息、错误处理、断开连接等事件。
下面是一个示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- --------------------------------
------------
--------- -----------
--------- -
------- -------------------------------
------- ------------------------------
------- -------------------------------
-
--
------ ----- ------------ -
------------------- ---------- ----------------- - -
---------- ---- -
--------------------------------------------
------------------ ------- -- -
------ ------- -
---- -------
---------------------
------
---- ----------
---------------------
------
---- --------
---------------------
------
-
-- ------- -- -
---------------------
---
-
------- ---- -
-------------------------- ---------
-
-------- ---- -
-----------------------
-
-以上代码中，当用户点击“连接”按钮时，会调用 create() 方法创建连接，并通过 switch 语句监听事件流。用户点击“发送消息”按钮时，会调用 send() 方法发送消息，用户点击“断开连接”按钮时，会调用 close() 方法断开连接。
总结
在 Angular4/5 中使用 Websocket 技术可以实现前端与后端之间的实时通信。通过创建一个服务来封装 Websocket 的连接和事件处理，并在需要的组件中注入该服务进行使用，可以大幅简化开发流程。需要注意的是，在使用 Websocket 技术时，也需要考虑安全性和性能等方面的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64faa392f6b2d6eab318378e