企业官网建设流程全解析

Hoppscotch 实时通信测试完整指南：四步连通 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

联调推送接口时，服务端说"已经发出去了"，客户端却没收到，问题到底出在哪？比起打开抓包工具逐帧排查，有个更轻的验证方式：用实时测试工具直接连上同一个端点，看推送是否真的到达客户端。

Hoppscotch 的 Realtime 模块做的就是这件事。一个入口，两种协议（WebSocket 与 SSE（Server-Sent Events，服务器发送事件）），发消息、看响应、翻日志，都在同一个界面里完成。

本文只讲一条统一工作流：怎么连上、怎么看到第一帧数据、子协议和事件过滤怎么配、卡住时逐条核对哪三种情况。

一句话说清 Hoppscotch

Hoppscotch 是一个开源、轻量的 API 开发生态系统。除了常规的 HTTP 请求，它内置实时通信测试功能，打开浏览器就能验证 WebSocket 和 SSE 的数据推送，不需要额外安装任何工具。

从连接到第一帧数据：连接配置步骤

两种协议共用同一条操作路径，按四步走：

1. 进入 Realtime 入口，填入端点打开 Hoppscotch，在左侧栏点击 Realtime（实时通信），协议选择器里选 WebSocket 或 SSE。端点输入框会预填默认测试服务：WebSocket 默认 echo 端点是wss://echo-websocket.hoppscotch.io，SSE 默认示例端点是https://express-eventsource.herokuapp.com/events。替换成你自己的服务地址，点击连接。

2. 发出第一条消息并看到响应连接建立后，在底部输入框输入内容，按 Send。echo 服务会把收到的内容原样返回，消息立刻出现在日志区——这就是第一帧数据。结构化数据可以直接发一条 JSON 消息：

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

注意两者的差别：WebSocket 是双向通道，双方都能主动发消息；SSE 是服务器到客户端的单向推送，客户端侧只能观察服务器推下来的内容。

3. 进阶设置：子协议与事件过滤

• WebSocket 子协议：服务端要求协商协议时（例如graphql-ws），点击 Add Protocol，填入协议名，勾选 Active 使其生效；可以添加多个，不需要的可随时删除。管理逻辑见 WebSocket 会话管理源码。
• SSE 事件类型过滤：服务器可能推送多种事件类型，在 Event Type 输入框填入指定类型，只显示匹配的事件；默认值是data，清空后恢复显示全部类型。实现见 SSE 会话管理源码。

4. 查看推送日志日志区按时间顺序记录每一条消息，每条都带毫秒级时间戳和方向标识（发送 / 接收），不同方向用不同颜色区分。单条日志或整段日志都能一键复制。日志的数据结构定义在 HoppRealtimeLog。

卡住时的三种情况 💡

该选谁：WebSocket 还是 SSE

三步测试建议：

1. 先跑公共测试端点：前文两个默认端点开箱即用，先熟悉操作手感。
2. 换成真实端点，把完整工作流再走一遍。
3. 测异常场景：主动断线、观察重连、发送无效数据，核对日志分别怎么记录。

想继续深入了解或参与贡献 Hoppscotch，可以参考官方文档 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