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要么走 SSEServer-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.ioecho 回显服务SSE 用https://express-eventsource.herokuapp.com/events。如果你的服务需要鉴权或走内网确认当前网络能访问到目标地址。任务一跑通第一次 WebSocket 收发这一节帮你从选协议到收到第一条回显完成一次完整的 WebSocket 测试。在 Realtime 页面的协议选择器里选WebSocket。在端点输入框填入地址默认就是wss://echo-websocket.hoppscotch.io测试自己的服务时替换为wss://开头的地址。点击Connect建立连接连接状态变为已连接后再操作下一步。在消息输入框填入内容并发送。发一段 JSON 是常见场景{ action: subscribe, channel: news-updates }echo 服务会把消息原样发回来日志区随即多出一条接收记录第一次收发就通了。之后把端点换成你的真实地址即可。进阶配置如果服务端在握手时要求指定子协议比如graphql-ws在连接配置区点Add Protocol输入协议名勾选 Active 使其生效不需要时删除或取消勾选。发送消息前还可以在内容类型里切 JSON / RawJSON 模式下编辑器会做语法校验长消息可开自动换行便于阅读。任务二接收并过滤 SSE 事件这一节帮你连上一个 SSE 接口并只盯住你想要的那一类事件。在协议选择器里选SSE填入端点地址默认示例是https://express-eventsource.herokuapp.com/events。点击Connect。SSE 建立在 HTTP 之上服务器会持续向浏览器推送事件Hoppscotch 自动接收并在日志区按时间顺序展示无需你再发送任何请求。注意Event Type输入框它默认是data。事件类型填什么日志里就只显示那一类事件服务器没显式指定类型的推送按规范属于message如果什么都看不到先把框里的值改成message或直接清空观察全量事件。过滤规则就一句话在 Event Type 框输入目标类型只看该类事件清空则恢复显示全部。多类型混发的事件流里这个框就是你的事件监听过滤器。用日志定位问题这一节讲怎么用日志区快速找到那条不对的消息。WebSocket 和 SSE 共用同一套日志数据结构每条日志行包含方向前缀发送/接收、消息内容、来源、时间戳不同方向用不同颜色区分。日志结构定义见 src/helpers/types/HoppRealtimeLog.ts。排错时这样做先按时间戳锁定出问题时刻再看那条记录的方向——你自己发的内容错了还是服务器回的结构不对。定位到之后单条复制发给后端同学或者整段日志复制出来当联调依据比口头描述大概几点几分发的高效得多。避坑速查这一节把实时 API 测试里最常见的几种翻车场景压缩成一张表按现象对号入座。现象处理连接时报 CORS / 跨域错误打开设置Settings开启代理模式使用官方代理或自定义代理 URL 转发请求SSE 一直收不到事件核对 Event Type默认data可能与服务端不符改为message或清空后观察全量事件长连接频繁断开优先查网络与防火墙再确认服务端空闲超时与心跳设置长测试保持网络稳定消息内容乱码或格式异常检查发送端 Content-Type 与服务器约定是否一致JSON 消息先在编辑器里通过校验再发WebSocket 会话状态与消息收发由 src/newstore/WebSocketSession.ts 维护SSE 一侧对应 src/newstore/SSESession.ts需要确认某条状态或日志是前端存了什么值时可以直接读这两个文件。WebSocket 与 SSE 怎么选这一节帮你联调前先确认该用哪种协议测避免拿错工具。WebSocketSSE场景双向实时通信聊天、协作编辑、行情推送服务器单向推送通知、进度、数据更新优势全双工、低延迟基于 HTTP轻量、实现简单局限服务端资源消耗较高只能服务器到客户端单向推送今天就能做的 3 件事打开 Hoppscotch 的 Realtime 页面用默认 echo 端点完成一次 WebSocket 收发确认工具链没问题。把端点换成你的真实服务用 SSE 的 Event Type 过滤出一类目标事件验证推送内容。复制日志区的关键记录按避坑速查的口径和后端对齐一次异常场景。【免费下载链接】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），仅供参考