WebSocket 是实现了真正的双向通信的协议。在传统的 HTTP 协议中,客户端向服务器发送请求,服务器返回响应,一旦响应完成,连接就会被关闭。但是在 WebSocket 中,一旦客户端连接上服务器,连接就一直存在,客户端和服务器均可任意时刻向对方发送数据,且数据的发送不需要依赖请求和响应。

WebSocket 基于 HTTP 协议,通过在 HTTP 协议中添加 Upgrade 头信息,告知服务器进行协议升级,将其协议从 HTTP 升级为 WebSocket。随后,WebSocket 使用了一个长期有效的 TCP 连接通道,通过该通道进行两端的数据传输,并使用自定义的数据格式进行消息的交互。想要更详细了解的小伙伴可以前往:WebSocket协议:从入门到精通
Nodejs 实现 WebSocket 服务
安装 ws 包
我们需要使用到 ws 这个包来起一个 WebSocket 服务。
npm i ws
代码实现(仅供参考)
用 Node.js 来创建一个 WebSocket 服务器和客户端的更具体方式可参考这篇文章:【Node.js 中怎么使用 WebSocket】
// 引入WebSocket模块
const WebSocket = require('ws');
// 创建WebSocket服务器,监听端口3001
const server = new WebSocket.Server({ port: 3001 });
// 当有客户端连接时触发
server.on('connection', (socket) => {
console.log('Client connected');
// 处理收到的消息
socket.on('message', (data) => {
console.log(`Received: ${data}`);
// 广播消息给所有连接的客户端
server.clients.forEach((client) => {
if (client !== socket && client.readyState === WebSocket.OPEN) {
client.send(data);
}
});
});
// 处理连接关闭
socket.on('close', () => {
console.log('Client disconnected');
});
});
调试 WebSocket 接口
当我们写完一个 WebSocket 接口之后,我们需要去调试它,确保它的正确性,包括 接口能否连通、接口返回数据是否准确、接口性能是否合格等指标。
所以今天给大家介绍两款 WebSocket 在线调试工具:Apifox 和 Postman
Apifox 调试 WebSocket 服务

Apifox 有一个点很吸引我,那就是 Apifox 自带中文语言系统,这大大降低了使用门槛!
WebSocket 请求创建
如果你想要用 Apifox 连接 WebSocket,你需要先创建一个 WebSocket 请求,填入各种参数,包括 URL、消息、参数。在 Apifox 中新建一个 HTTP 项目,然后在项目中新建一条 WebSocket 接口即可。

新建完 Websocket 接口后,你可以填入服务端连接地址,然后进行连接。

发送消息
连接成功之后,可以发送消息到服务端。在 Message 中,你可以填写要传递到服务端的消息,发送之后,服务端将接收你发送的信息。

传递参数
在传输过程中,你也可以携带参数,可以通过在地址上添加查询参数完成,可以携带的数据类型包括 string、integer、number、array,传递过去之后,服务端可以接收到。

保存
写完之后,可以点击保存,进行请求的保存。

WebSocket 请求的运行
连接服务
先点击 连接 按钮,进行 WebSocket 的连接。连接成功之后,Apifox 有成功的提示。

服务端那边也会因为连接成功,而做出响应。

发送 WebSocket 请求
接着我们就可以跟服务端进行 WebSocket 通信了。
我们可以使用 Apifox 点击发送按钮向服务端进行发送 Message、Params。

与 WebSocket 服务通信
发送之后,服务端也可以向客户端发送信息,例如我这里,我设置服务端每秒向客户端发送当时的时间戳。这就是 Apifox 的 WebSocket 功能,非常方便。你可以点击连接消息,以查看详情。

与 WebSocket 断开连接
如何不想连接了,可以点击断开按钮。

请注意!!!
Apifox 有 Web端 和 客户端,如果你使用的是 Web端,想要调试本地服务,需要安装 Apifox 的 谷歌插件(我们更推荐使用 Apifox 客户端)。下载地址:Apifox 谷歌浏览器插件

使用 Postman 调试 WebSocket
创建一个 WebSocket 请求
点击 NEW 按钮,创建一个请求。

选择 WebSocket Request。

Message、Params
在 WebSocket 请求中,可以传递 Message、Params。

Query Params 会被带在 URL 上。

连接 WebSocket 服务
客户端与服务端想要进行 WebSocket 通信,就需要进行第一次的连接,我们点击 Connect。连接成功后, Postman 会提醒你连接成功。

发送 Message
接着我们可以发送 Message 了,可以看到,客户端这边可以拿到服务端那边每秒给我们发送的消息。

服务端那边也可以接收到我们传过去的 Message、Params。

断开 WebSocket 连接
如果你想断开连接,可以点击 Disconnect。

为啥我选 Apifox 不选 Postman
如果你正在使用 Postman 作为 API 测试和探索工具,你可能会遇到一些限制和挑战。在这种情况下,你可能应该考虑使用 Apifox 作为替代方案。
Apifox 与 Postman 的对比
Apifox | Postman |
---|---|
Apifox 是一个基于云的平台,允许开发人员从任何位置访问并测试其 API,无需在计算机上安装任何软件。当然 Apifox 也为主流操作系统提供了客户端版本。 | Postman 是一个必须安装在计算机上的独立应用程序,这可能限制了要从多个位置工作的开发人员的可访问性。 |
Apifox 提供了一个视觉上吸引人且易于使用的界面,使开发人员能够轻松调试接口和生成文档。 | Postman 具有更复杂的界面,需要以代码为重点,这可能提高了部分开发者的使用门槛。 |
Apifox 还提供了协作功能和团队管理,允许开发人员和他人共享测试和接口文档,并共同处理项目。 | Postman 可能会消耗大量资源,尤其是在处理大量数据集时可能会减慢计算机的速度,这可能会对需要运行多个测试或者使用大型 API 集合的开发人员造成挑战。 |
Apifox 提供了无限的自定义选项配置,并且更加灵活。 | Postman 提供了比较有限的自定义选项,例如自定义外部变量,响应头 Header 以及脚本。 |
Apifox 支持在线文档分享,还支持设置密码和自定义样式域名。 | Postman 不支持在线文档。 |
Apifox 支持自动 Mock 人性化数据,帮助用户更好地进行调试。 | Postman 不支持自动 Mock 人性化数据,且 Mock 服务是收费项目。 |
与只支持有限自定义配置项的 Postman 对比,Apifox 提供了无限的自定义选项配置,更加灵活。对于那些想要使用新工具去提升开发水平的团队来说,Apifox 一定是个明智之选。
如果你正在为汉化 Postman 而烦恼,或者尝试接触新的好用的 API 接口调试工具,我强烈推荐你试用 Apifox。它还提供 IDEA 插件 Apifox Helper,支持同步接口代码到文档哦~

知识扩展: