WebSocket 是 HTML5 中新提出的协议，它实现了客户端和服务器之间全双工通信，使得 Web 应用程序能够实时地进行数据交换和通信。在前端开发中，WebSocket 很常用。而 @zhuangya/universal-websocket-client 这个 npm 包就提供了一种简单的方法来创建和管理 WebSocket 连接。
安装
使用 @zhuangya/universal-websocket-client 的前提是首先要安装它。你可以在项目根目录下使用以下命令安装：
npm install @zhuangya/universal-websocket-client
快速开始
基本上使用 @zhuangya/universal-websocket-client 的流程分为这样几个步骤：
- 创建 WebSocket 对象。
- 连接到服务器。
- 监听服务器发送的消息。
- 发送消息给服务器。
下面我们来一步步完成上述步骤。
创建 WebSocket 对象
使用 @zhuangya/universal-websocket-client 创建 WebSocket 对象非常简单。我们只需要导入它，并使用它的构造函数就可以了：
import WebSocketClient from '@zhuangya/universal-websocket-client';
const ws = new WebSocketClient('ws://localhost:8080'); // 服务器地址连接到服务器
创建完 WebSocket 对象后，我们需要将它连接到服务器。WebSocket 对象连接到服务器的方法是 connect。可以把 connect 方法作为 WebSocketClient 对象的一个异步方法来调用，也可以使用 await 等待方法调用的结果。
ws.connect(); // 使用异步方式连接
监听服务器发送的消息
一旦连接到服务器，我们可以使用 onMessage 方法监听服务器发送的消息。这个方法的回调函数参数是接收到的消息。下面是一个例子：
ws.onMessage((message) => {
console.log(`Receive message: ${message}`);
});发送消息给服务器
要发送消息给服务器，我们可以使用 send 方法。下面是一个例子：
ws.send('Hello Server!');深入了解
如果你想深入了解 @zhuangya/universal-websocket-client 的更多详细内容，我们可以看下它的源码。它的工作原理非常简单明了，代码不多，也易于理解。
源码中主要包括下面这些内容：
- WebSocketClient 构造函数。
- connect 方法。
- onMessage 方法。
- send 方法。
这些都是基本的使用方法，你可以从中学到许多 WebSocket 开发的知识。
结语
总的来说，@zhuangya/universal-websocket-client 是一个非常简单实用的 npm 包，能够让你轻松地建立和管理 WebSocket 连接。在实际项目中使用也非常方便，值得一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730781e8991b448e9301