在前端开发中，websocket 是一项必备的技术，它可以让前端应用与服务端实时通信，而 angular2-websocket 是一个 npm 包，它提供了一套简单易用的 WebSocket API，帮助我们在 Angular2+ 的项目中轻松实现 websocket 的功能。
安装
使用 npm 进行安装：
npm install angular2-websocket --save
基本使用
在 app.module.ts 导入 WebSocketModule，并在 imports 中声明：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - --------------- - ---- ---------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
---------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在组件中进行初始化：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- ----------------------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- --- ----------- -
----- --- - -------------------------
-- -- ---------
----- ------ - --------------------
-- ----
---------------------------------
--- -- -----------------
--- -- -------------------
-- -- -----------------------
--
-- ----
------------------ ------------
-
-在这个例子中，我们创建了一个 websocket 对象，并通过 getDataStream() 监听了从服务器发来的消息。在创建 websocket 对象时，我们传入了服务器的地址，并使用 send() 方法发送了一条消息。
需要注意的是，$WebSocket 对象的 create() 方法并不会自动连接 websocket，需要手动调用 connect() 方法才能开始通信。
细节说明
WebSocket（数据传输）
WebSocket 是浏览器提供的一种 API，用于实现基于 TCP 的双向通信。angular2-websocket 将原生的 WebSocket 封装成了 $WebSocket 对象，并提供了一些与 Angular2+ 集成的特性，如数据绑定。
$WebSocket（API 封装）
$WebSocket 是 angular2-websocket 提供的 API 封装，它将原生的 WebSocket API 进行了封装，并增强了一些功能，比如：
- 数据绑定
- 可观测的数据流
- 自动重连
WebSocketConfig（配置）
WebSocketConfig 是 angular2-websocket 中的一个配置类，用来配置 $WebSocket 对象的一些参数，比如自动重连的次数和时间间隔等。
示例代码
服务端代码（使用 spring-boot-starter-websocket 实现）：
-- -------------------- ---- -------
--------------
-----------------------------
------ ----- --------------- ---------- -------------------------------- -
---------
------ ---- -------------------------------------------- --------- -
----------------------------------------- -- -- --------- --
-
---------
------ ---- -------------------------------------------- --------- -
-------------------------------------- -- ---------
--------------------------------------------------- -- ---------
-
-客户端代码：
<!-- app.component.html -->
<div>{{ message }}</div>-- -------------------- ---- -------
-- ----------------
------ - --------- - ---- ----------------
------ - ---------- - ---- ----------------------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
-------- -------
------------------- --- ----------- -
----- --- - -------------------------
-- -- ---------
----- ------ - --------------------
-- ----
---------------------------------
--- -- ------------ - ---------
--- -- -------------------
-- -- -----------------------
--
-- ----
------------------ ------------
-
-结语
angular2-websocket 是一款非常有用的 npm 包，它可以让我们在 Angular2+ 的项目中轻松实现 websocket 通信功能，希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65729