WebSocket 是一种网络通信协议，它可以在客户端和服务器之间提供双向实时通信。websocket-lib 是一个基于 TypeScript 开发的 npm 包，提供了 WebSocket 连接的封装，使得使用 WebSocket 更加方便。
本篇文章将介绍如何使用 npm 包 websocket-lib，并提供详细的使用教程，及代码示例。
安装
在使用 websocket-lib 前，需要安装 npm 包，可以通过以下命令进行安装：
npm install websocket-lib
基本用法
创建 WebSocket 对象
使用 websocket-lib，需要先创建一个 WebSocket 对象，可以通过以下代码创建：
import { WebSocketClient } from "websocket-lib";
const ws = new WebSocketClient("ws://localhost:8080");以上代码创建了一个 WebSocketClient 对象，指定了要连接的 WebSocket 服务端地址。如果服务端使用的是 wss 协议，则需要将地址改为 wss://localhost:8080。
连接 WebSocket
创建 WebSocket 对象之后，需要连接 WebSocket 服务端，使用 websocket-lib，可以通过以下代码进行连接：
await ws.connect();
以上代码在 WebSocket 对象上调用 connect 方法，连接服务端，该方法返回一个 Promise，如果连接成功，Promise 将 resolve，否则将 reject。
发送数据
连接成功后，可以通过 WebSocket 对象的 send 方法，向服务端发送数据，使用 websocket-lib，可以通过以下代码发送数据：
ws.send("hello");以上代码向服务端发送了一个字符串 "hello"，可以将任何 JavaScript 对象作为参数传递给 send 方法，websocket-lib 会自动将其转换为字符串发送给服务端。
接收数据
当服务端发送消息时，WebSocket 对象会触发 message 事件，使用 websocket-lib，可以通过以下代码监听 message 事件：
ws.on("message", (data) => {
console.log(data);
});以上代码监听 WebSocket 对象的 message 事件，当服务端发送消息时，会将消息数据作为参数传递给回调函数，可以在回调函数中对消息数据进行处理。
断开连接
使用完 WebSocket 后需要关闭连接以释放资源，使用 websocket-lib，可以通过以下代码进行连接：
await ws.close();
以上代码在 WebSocket 对象上调用 close 方法，关闭连接，该方法返回一个 Promise，如果关闭成功，Promise 将 resolve，否则将 reject。
高级用法
自定义 Header
使用 websocket-lib，可以在连接 WebSocket 服务端时添加自定义 Header，可以通过以下代码进行添加：
const headers = {
"Authorization": "Bearer xxx",
"X-Client-Id": "123",
};
const ws = new WebSocketClient("ws://localhost:8080", { headers });以上代码创建了一个 WebSocketClient 对象，并指定了自定义 Header，将 Authorization 和 X-Client-Id 添加到了 Header 中。
自定义心跳包
WebSocket 连接有时会因网络原因中断，在没有及时关闭连接的情况下，WebSocket 对象仍然会保持着连接状态，但实际上已经不能传输数据。为了避免这种情况，可以使用心跳包来维持连接状态。
使用 websocket-lib，可以自定义心跳包，可以通过以下代码进行设置：
const heartBeat = {
interval: 30000,
message: "ping",
timeout: 10000,
};
const ws = new WebSocketClient("ws://localhost:8080", { heartBeat });以上代码创建了一个 WebSocketClient 对象，并指定了心跳包的相关参数，interval 表示心跳包的发送间隔，message 表示心跳包的内容，timeout 表示连接超时时间。
自定义解码器
服务端发送的消息通常是二进制数据，在接收到消息后需要将其解码为 JavaScript 对象。使用 websocket-lib，可以自定义解码器，可以通过以下代码进行设置：
const decoder = new TextDecoder("utf-8");
ws.setDecoder((data) => {
return JSON.parse(decoder.decode(data));
});以上代码创建了一个 TextDecoder 对象，并将其传递给 WebSocket 对象的 setDecoder 方法，这样当接收到消息时，websocket-lib 会先使用 TextDecoder 解码为字符串，再将字符串解析为 JavaScript 对象。
示例代码
下面的示例代码演示了如何使用 websocket-lib 连接 WebSocket 服务端，并发送和接收消息：
-- -------------------- ---- -------
------ - --------------- - ---- ----------------
----- -- - --- ---------------------------------------
------------- ----- -- -- -
-- ---------
-----------------
-- -- - -------
-------------- -- -
----------------
-- ------
---
---------------- ------ -- -
-- -----------
------------------
---
-------------- -- -- -
-- -------
---------------------- ---------- ---------
---
-------------总结
websocket-lib 封装了 WebSocket 连接，使得使用 WebSocket 更加方便。本篇文章介绍了 npm 包 websocket-lib 的基本用法和高级用法，并提供了详细的代码示例。使用 websocket-lib 可以轻松实现 WebSocket 连接，提高网络通信的效率和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671068dd3466f61ffdddd