Hoppscotch 实时通信测试：5分钟连上 WebSocket 与 SSE

Hoppscotch 实时通信测试：5分钟连上 WebSocket 与 SSE

【免费下载链接】hoppscotchOpen-Source API Development Ecosystem • https://hoppscotch.io • Offline, On-Prem & Cloud • Web, Desktop & CLI • Open-Source Alternative to Postman, Insomnia项目地址: https://gitcode.com/GitHub_Trending/ho/hoppscotch

即时消息、行情推送、协同编辑……实时数据流一直是 API 联调里最难验证的部分。开源 API 开发生态系统 Hoppscotch 内置了实时通信入口，WebSocket 测试与 SSE 测试能在同一个页面完成：连上、发送、看日志。下面用两个默认公共端点演示 WebSocket 测试方法与 SSE 测试方法，看完即可换成自己项目的地址上手。

API 实时调试先选对协议：WebSocket 还是 SSE

WebSocket 在浏览器与服务器之间建立一条双向持久通道，握手完成之后，双方随时可以主动向对方发数据。凡是"对方也需要回话"的场景，比如聊天、协同编辑，它都是首选。

SSE（Server-Sent Events，服务器发送事件）走的是另一条路：它挂在一次普通的 HTTP 请求上，服务器顺着这条连接持续向客户端推事件。数据只朝一个方向流，因此更适合通知中心、实时榜单这类"服务器单方说话"的场景。

🔌 5分钟连上 WebSocket 端点

打开 Realtime 页面，连上默认回声地址

1. 左侧导航栏选择 "Realtime"；
2. 协议下拉框选 WebSocket（打开页面时即为默认协议）；
3. 端点地址填wss://echo-websocket.hoppscotch.io，这是项目自带的回声（echo）测试服务；
4. （可选）配置子协议，做法见下文。

点击连接，状态变为已连接后即可开始收发。

发出第一条消息，看懂日志区

在底部输入框敲入文本或 JSON，点 Send。服务器返回的内容会实时出现在日志区，每行都带毫秒级时间戳和发送/接收的方向标识，一眼能分清消息来自哪边。比如发一条订阅指令：

{ "action": "subscribe", "channel": "news-updates" }

回声服务会把这条消息原样退回。看到回显，说明连接和消息链路都通了。

子协议的添加、启用与删除

部分服务器靠子协议在握手阶段协商行为。点 Add Protocol 输入名称（例如graphql-ws），勾选 Active 使其生效；对不需要的项点 Delete 即可移除。可以加多个，但要留意哪些处于启用状态。

想深入实现可以看 WebSocketSession.ts。

📡 SSE 连接配置与事件类型过滤

连接 SSE 端点

在同一个 Realtime 页面把协议切换为 SSE，端点地址默认给了示例https://express-eventsource.herokuapp.com/events。事件类型过滤框默认为data，第一次连接保持默认即可。

查看服务器推送的事件

连接建立后，服务器推来的事件会自动按时间顺序显示在日志区，每条包含：

• 事件类型（服务器未指定时显示为 message）
• 数据内容
• 时间戳；服务器附带事件 ID 时也会一并记录

如果服务端同时推送多种事件类型，在 Event Type 输入框填入指定类型，日志就只剩这类事件；清空输入框则恢复显示全部。

想深入实现可以看 SSESession.ts。

统一日志能力：用日志快速定位问题

WebSocket 与 SSE 共用一套日志机制，排查问题时靠它：

• 所有发送与接收的消息自动记录，不用手动留档；
• 支持复制单条或全部日志，可直接贴给同事协助分析；
• 时间戳精确到毫秒，方便与服务端日志对齐；
• 不同方向的消息用不同颜色区分，收发走向一目了然。

想深入数据结构可以看 HoppRealtimeLog.ts。

实时通信测试的两个常见坑

CORS 跨域报错：打开代理

浏览器连接时若出现 CORS（跨域资源共享）相关错误，打开 Settings，找到 Proxy，启用 Use Proxy 开关；可以选官方代理，也可以填入自定义代理地址。请求先经代理中转，即可绕开浏览器同源限制。

连接频繁断开：排查网络与超时

• 先确认本地网络稳定，尤其测试远程服务器时；
• 检查服务端空闲超时设置，不少网关会在空闲一段时间后主动断连；
• 长时间跑测试时，可开启 Keep Alive 维持连接；
• 若仍频繁中断，排查防火墙是否拦截了长连接。

接下来可以这样做

Hoppscotch 把实时 API 的联调从"猜"变成了一条条可验证的记录。建议的节奏：先用公共回声地址跑通流程，再换成项目真实端点，最后补测断连、重连等异常场景。更多开发细节可参考 CONTRIBUTING.md。

【免费下载链接】hoppscotchOpen-Source API Development Ecosystem • https://hoppscotch.io • Offline, On-Prem & Cloud • Web, Desktop & CLI • Open-Source Alternative to Postman, Insomnia项目地址: https://gitcode.com/GitHub_Trending/ho/hoppscotch