Angular 是一个很受欢迎的前端框架，而 WebSocket 是一种全双工通讯协议。如果能把它们结合起来，就可以实现实时的通讯。这时候，npm 包 angular-websocket-nows 就能派上用场了。这个包提供了 WebSocket 的 Angular 服务封装，在 Angular 项目中使用 WebSocket 非常方便。在本文中，我们将详细介绍此包的使用方法。
安装
在使用之前，首先需要安装这个包。通过 npm 命令进行安装：
npm install angular-websocket-nows
使用
在 Angular 项目中使用这个包有两种方法：通过 import 导入，或者使用 Angular Service。
方法一：通过 import 导入
在要使用 WebSocket 的组件中导入：
import { WebSocketService } from 'angular-websocket-nows';这里我们导入了 WebSocketService 这个服务。
通过 WebSocketService，我们可以实例化 WebSocket 链接。
const wsInstance = WebSocketService.Instance;
这里我们实例化了一个叫做 wsInstance 的 WebSocket 对象。
接下来，我们可以根据需要连接到一个 WebSocket 服务器。
wsInstance.connect('ws://localhost:3000');这里我们连接了一个本地的 WebSocket 服务器。你需要根据自己的服务器地址进行修改。
连接成功后，我们可以使用 wsInstance 对象来进行通信。
wsInstance.send('Hello Websocket!');这里我们向服务器发送了一个消息。
同时，我们还需要监听服务器端发送的消息。
wsInstance.onMessage().subscribe(message => {
console.log(message);
});这里我们通过 subscribe() 方法监听服务器端发送的消息。当服务器有消息发送时，onMessage() 方法就会返回一个 Observable 对象，我们可以对它进行订阅，从而监听服务器发来的消息。
以上就是通过导入使用这个包的方法。接下来，我们来看看另一个使用方法。
方法二：使用 Angular Service
直接在 app.module.ts 中导入：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - --------------- - ---- ------------------------- ------ - ------------ - ---- ------------------ ------ - ---------------- - ---- ------------------------- ----------- ------------- --------------- -------- --------------- ----------------- ---------- ------------------- -- -- ---------------- -- ---------- --------------- -- ------ ----- --------- --
在要使用 WebSocket 的组件中，在构造函数中注入 WebSocketService 服务：
-- -------------------- ---- ------- ------ - ---------------- - ---- ------------------------- ------------ --------- ----------- ------------ ----------------------- ---------- ------------------------ -- ------ ----- ------------ - ------------------- ---------- ----------------- -- -
接下来，就可以通过 webSocket 对象进行 WebSocket 操作了。
示例代码
下面是一个通过 import 导入使用 angular-websocket-nows 包的示例代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------------- - ---- -------------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ ---------- ------ -
------- ----------- ----------
------------------- ---------- ----------------- --
----------- ---- -
--------------- - --------------------------
-----------------------------------------------
--------------------------------------------- -- -
---------------------
---
--------------------------- -------------
-
-以上就是一个简单的使用 angular-websocket-nows 的示例。你可以在自己的项目中尝试使用这个包，实现实时通讯功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664b81e8991b448e2678