Hoppscotch 实时 API 测试指南：WebSocket 与 SSE 连接、日志与排错速查

Hoppscotch 实时 API 测试指南：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

前后端联调时，你大概率会遇到这么个需求：接口本身没问题，但消息是"推"过来的——要么走 WebSocket，要么走 SSE（Server-Sent Events，服务器发送事件）。这类实时 API 测试用普通 HTTP 工具没法验证，需要一个能建立长连接、实时看回包的界面。Hoppscotch 是开源的 API 开发生态系统，内置了这类实时 API 测试能力，本文按任务带你把它跑通。

开始之前

这一节把跑通两个测试任务所需的前置条件一次说清，避免中途卡壳。

• 在浏览器打开 Hoppscotch（官方在线版，或 clone 仓库后本地部署git clone https://gitcode.com/GitHub_Trending/ho/hoppscotch）。
• 从左侧导航栏进入 Realtime（实时通信）页面，页面内可切换 WebSocket、SSE、MQTT、Socket.IO 等协议，本文前两个任务分别用前两种。
• 准备两个测试端点。没有自己的服务端时，用内置示例：WebSocket 用wss://echo-websocket.hoppscotch.io（echo 回显服务），SSE 用https://express-eventsource.herokuapp.com/events。
• 如果你的服务需要鉴权或走内网，确认当前网络能访问到目标地址。

任务一：跑通第一次 WebSocket 收发

这一节帮你从选协议到收到第一条回显，完成一次完整的 WebSocket 测试。

1. 在 Realtime 页面的协议选择器里选WebSocket。
2. 在端点输入框填入地址，默认就是wss://echo-websocket.hoppscotch.io；测试自己的服务时替换为wss://开头的地址。
3. 点击Connect建立连接，连接状态变为已连接后再操作下一步。
4. 在消息输入框填入内容并发送。发一段 JSON 是常见场景：

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

echo 服务会把消息原样发回来，日志区随即多出一条接收记录，第一次收发就通了。之后把端点换成你的真实地址即可。

进阶配置：如果服务端在握手时要求指定子协议（比如graphql-ws），在连接配置区点Add Protocol输入协议名，勾选 Active 使其生效；不需要时删除或取消勾选。发送消息前还可以在内容类型里切 JSON / Raw，JSON 模式下编辑器会做语法校验，长消息可开自动换行便于阅读。

任务二：接收并过滤 SSE 事件

这一节帮你连上一个 SSE 接口，并只盯住你想要的那一类事件。

1. 在协议选择器里选SSE，填入端点地址，默认示例是https://express-eventsource.herokuapp.com/events。
2. 点击Connect。SSE 建立在 HTTP 之上，服务器会持续向浏览器推送事件，Hoppscotch 自动接收并在日志区按时间顺序展示，无需你再发送任何请求。
3. 注意Event Type输入框：它默认是data。事件类型填什么，日志里就只显示那一类事件；服务器没显式指定类型的推送按规范属于message，如果什么都看不到，先把框里的值改成message或直接清空观察全量事件。

过滤规则就一句话：在 Event Type 框输入目标类型只看该类事件，清空则恢复显示全部。多类型混发的事件流里，这个框就是你的事件监听过滤器。

用日志定位问题

这一节讲怎么用日志区快速找到那条"不对"的消息。

WebSocket 和 SSE 共用同一套日志数据结构，每条日志行包含：方向前缀（发送/接收）、消息内容、来源、时间戳，不同方向用不同颜色区分。日志结构定义见 src/helpers/types/HoppRealtimeLog.ts。

排错时这样做：先按时间戳锁定出问题时刻，再看那条记录的方向——你自己发的内容错了，还是服务器回的结构不对。定位到之后，单条复制发给后端同学，或者整段日志复制出来当联调依据，比口头描述"大概几点几分发的"高效得多。

避坑速查

这一节把实时 API 测试里最常见的几种翻车场景压缩成一张表，按现象对号入座。

WebSocket 会话状态与消息收发由 src/newstore/WebSocketSession.ts 维护，SSE 一侧对应 src/newstore/SSESession.ts，需要确认某条状态或日志是前端存了什么值时，可以直接读这两个文件。

WebSocket 与 SSE 怎么选

这一节帮你联调前先确认该用哪种协议测，避免拿错工具。

今天就能做的 3 件事

1. 打开 Hoppscotch 的 Realtime 页面，用默认 echo 端点完成一次 WebSocket 收发，确认工具链没问题。
2. 把端点换成你的真实服务，用 SSE 的 Event Type 过滤出一类目标事件，验证推送内容。
3. 复制日志区的关键记录，按"避坑速查"的口径和后端对齐一次异常场景。

【免费下载链接】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