WebSocket 是现代 web 开发中最常用的通信协议之一，很多服务端框架都提供了非常友好的 WebSocket 实现，前端开发者在使用 WebSocket 时也可以使用现成的 npm 包，比如 easy-websocket 。在本篇文章中，我们将会介绍 easy-websocket 的使用方法以及注意事项。
安装
我们可以使用 npm 命令进行 easy-websocket 的安装：
npm i easy-websocket
除此之外，我们也可以在浏览器端直接使用 easy-websocket，只需要将 easy-websocket.js 引入即可：
<script src="./path/to/easy-websocket.js"></script>
使用
easy-websocket 提供了一系列的配置项，让我们可以对 WebSocket 连接进行灵活的设置。在下面的示例代码中，我们演示了如何创建一个 WebSocket 连接，并发送一条消息。在本示例中，我们创建了一个与 ws://localhost:3000/path 相连接的 WebSocket 连接，并向服务端发送了一条 hello 的消息。
-- -------------------- ---- -------
------ ------------- ---- -----------------
----- ------ - --- ---------------
---- ---------------------------
------- ------- -- -
---------------------
--
---------- ------- -- -
------------------------
--
---
除了 url、onOpen 和 onMessage 以外，我们还可以配置以下选项：
autoReconnect: 是否自动重连，默认为 truereconnectInterval: 自动重连的间隔时间，默认为 3000msencoder: 消息编码器，可以自定义对发送的消息进行编码的方法decoder: 消息解码器，可以自定义对接收的消息进行解码的方法timeout: 发送超时时间，默认为 10000msprotocols: WebSocket 协议列表，可以传入一个数组，当连接被建立时，会从中选择一个可以使用的协议
-- -------------------- ---- -------
----- ------ - --- ---------------
---- ---------------------------
---------- ------ ------
------- ------- -- -
----------------------- ---------
--
---------- ------- -- -
--------------------- ---------- ------------
--
-------- ------- -- -
----------------------- ---------
--
-------- ------- -- -
----------------------- --------
--
-------- -----
-------------- ------
------------------ -----
-------- ------ -- ---------------------
-------- ------ -- -----------------
---注意事项
需要注意的是，easy-websocket 并不支持在多个地方同时对同一个 EasyWebSocket 实例进行操作。比如，我们在页面上创建了一个 EasyWebSocket 实例，并设置了 onMessage 回调，然后在另一个组件中再次对这个实例进行了创建或者 send 操作，则会出现意料之外的行为。
除此之外，由于 WebSocket 的特性以及网络环境的不可靠性，我们需要合理地设置超时时间，避免耗时过长的操作给客户端带来不好的用户体验。
结语
easy-websocket 是一个使用简单的 WebSocket 库，它提供了一系列的可配置项，也支持自定义编码解码器。使用 easy-websocket，我们可以快速地构建出符合需求的 WebSocket 通信模块。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066dad7108f76aa73eca76