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 请求上，服务器顺着这条连接持续向客户端推事件。数据只朝一个方向流，因此更适合通知中心、实时榜单这类"服务器单方说话"的场景。
| 协议 | 数据流向 | 底层协议 | 典型用途 | 主要局限 |
|---|---|---|---|---|
| WebSocket | 双向 | 独立长连接 | 聊天、协同编辑、游戏同步 | 服务器需保持连接，资源消耗较高 |
| SSE | 仅服务器→客户端 | 普通 HTTP | 通知中心、行情/实时推送 | 客户端无法向服务器回发数据 |
🔌 5分钟连上 WebSocket 端点
打开 Realtime 页面，连上默认回声地址
- 左侧导航栏选择 "Realtime"；
- 协议下拉框选 WebSocket（打开页面时即为默认协议）；
- 端点地址填
wss://echo-websocket.hoppscotch.io，这是项目自带的回声（echo）测试服务； - （可选）配置子协议，做法见下文。
点击连接，状态变为已连接后即可开始收发。
发出第一条消息，看懂日志区
在底部输入框敲入文本或 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
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
