本文介绍如何使用 npm 包 websocketjs 实现前端与后端的 WebSocket 通信。
WebSocket 简介
WebSocket 是一种全双工协议，支持服务器和客户端之间的实时通信。相较于传统的 HTTP 协议，WebSocket 具有以下优势：
- 单一 TCP 连接，减少传输开支；
- 连接时延低，响应更及时；
- 实现实时双向通信，更有利于推送和即时通讯场景。
websocketjs 简介
websocketjs 是一款符合 WebSocket 标准的 JavaScript 库，支持在浏览器上使用。
安装
在项目根目录下执行以下命令安装 websocketjs：
--- ------- -----------
使用方法
1. 建立 WebSocket 连接
在 JavaScript 中，我们可以通过以下代码建立 WebSocket 连接：
----- --------- - ----------------------- ----- -- - --- ---------------------------------
这里需要注意的是，为了方便大家测试，我使用本地的 WebSocket 服务器作为后端示例，启动命令如下：
--- - -- ---- ---------
server.js 的代码如下：
----- --------- - --------------
----- ------ - --- ------------------ ----- ---- ---
----------------------- -------- -- -
-------------------------
-------------------- --------- -- -
---------------------- -------------
--------------------
---
---在建立 WebSocket 连接时，需要传入一个 URL 字符串，如果后端服务是 HTTPS 服务，协议需要使用 wss。
2. 发送消息
当我们建立了 WebSocket 连接后，就可以通过 send 方法发送消息。send 方法支持任何类型的数据，包括字符串、ArrayBuffer、Blob 等等。
----------------
需要注意的是，处于性能和安全的考虑，Web 应用程序所发送的数据应当进行加密，不应该以明文传输。
3. 接收消息
当后端服务器向我们发送消息时，我们可以通过监听 WebSocket 的 message 事件来处理这些消息：
---------------- -------- ------- -
--------------------- -------- ----------------
---需要注意的是，如果我们需要在客户端发送消息后，后端直接回复消息，需要把接收回复消息的监听方法提前写好，否则会因为异步问题导致数据丢失。
4. 关闭连接
当我们不需要 WebSocket 连接时，可以使用以下方法关闭连接：
-----------
需要注意的是，在关闭连接之前应该先清理所有的消息监听器，释放资源，以防止内存泄漏的问题。
示例代码
下面是一个完整的客户端的示例代码：
----- --------- - -----------------------
----- -- - --- ---------------------------------
------------- -------- -- -
----------------------- ----------
----------------
---
---------------- -------- ------- -
--------------------- -------- ----------------
---
-------------- -------- -- -
----------------------- ----------
---总结
使用 websocketjs 实现前端与后端的 WebSocket 通信非常简单，只需要传入 URL 地址，即可建立 WebSocket 连接，并进行消息的收发。WebSocket 技术目前已经成为了实时通讯和数据推送的首选方案。我们希望本文能够对您理解 WebSocket 技术有所帮助，并希望您能够在实际项目中灵活运用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671068dd3466f61ffde0c