Hoppscotch 实时通信测试指南：3 步完成 WebSocket 与 SSE 接口联调

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

前后端联调时，你的后端说"接口已经能推消息了"，但你只能打开浏览器 DevTools 手写一段脚本验证——连接状态、时间戳、消息方向全靠肉眼对。Hoppscotch 把 WebSocket 和 SSE 测试做成了可视化面板：点 Realtime 标签，填 URL，消息实时进日志，联调时不用再写胶水代码。

读完这篇，你能做到三件事：用 Hoppscotch 完成一次 WebSocket 双向消息验证；用 SSE 面板捕获服务器主动推送的事件流；用日志和代理设置解决跨域、断连等常见翻车点。

项目速览

Hoppscotch 是一个开源的 API 开发生态系统，定位是 Postman / Insomnia 的开源替代。除了常规的 REST 请求，它内置 Realtime（实时通信）模块，一个入口覆盖 WebSocket、SSE、Socket.IO、MQTT 四种协议。

进入实时测试界面：左侧导航栏点Realtime，顶部会出现四个协议页签，本文聚焦 WebSocket 和 SSE。

打通 WebSocket 双向通信

WebSocket 是双向通道，适合聊天、协同编辑这类双方都要发消息的场景。验证思路：先连一个 echo 服务确认工具好用，再换成你自己的端点。

打开 Realtime 页，默认就在WebSocket页签。地址栏预填了官方 echo 测试地址wss://echo-websocket.hoppscotch.io，先别改，直接点Connect。

连接成功后，下方日志区会出现状态记录。这时在底部消息输入框里发一条报文：

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

点 Send，如果服务是 echo 类型的，你会立刻看到同一条 JSON 从"接收"方向回来——日志里每行带毫秒级时间戳，发送和接收用不同颜色区分。到这里，收发双向都验证通了。

把地址换成你的端点（注意是ws://或wss://协议头，不是http）。如果服务端要求特定子协议，点连接配置区的Add Protocol，填协议名（如graphql-ws），勾选 Active 让它生效；不用的协议可以直接删除。子协议协商失败通常表现为连接直接拒绝，检查协议名拼写即可。

连接配置项的完整定义（endpoint + 子协议列表）见 WebSocketSession.ts，想确认哪些字段能存可以直接看。

捕获 SSE 服务器推送

SSE 是单向的：服务器基于 HTTP 主动推，客户端只收。适合通知、进度更新这类"服务端说了算"的场景。

切到SSE页签。和 WebSocket 不同，这里多一个Event Type输入框——SSE 流里可以带多种事件类型，这个框就是过滤器。默认示例端点是https://express-eventsource.herokuapp.com/events，事件类型默认data。点 Start 后，服务器推来的每条事件都会按时间顺序进日志。

对接自己的服务时填两步：

• URL 换成你的 SSE 端点（必须是http/https，EventSource 不走独立协议头）
• Event Type 填你服务端event:字段对应的名字；如果你的服务从不声明事件类型，浏览器会把它归到message，填message或直接看默认行为

只想看某一种事件时，把 Event Type 改成目标类型；清空则恢复全量显示。日志区的行为和 WebSocket 页一致：时间戳、方向配色、单条复制，前文已经讲过，这里不再重复。

SSE 连接的监听逻辑（含事件过滤实现）在 SSESession.ts。

排错：三个高频翻车点

现象：连接请求直接失败，日志出现 CORS 报错

原因：浏览器对跨域的 WebSocket/SSE 有同源策略约束，本地自测工具连公司内网服务时最容易撞上。处理：打开设置（Settings）找到 Proxy 项，启用代理并填一个代理 URL，请求会先经过代理转发再到达你的服务，绕开浏览器端的跨域检查。

现象：SSE 连接瞬间建立又立刻断开，日志只有 STARTING 没有数据

原因：EventSource 对响应要求严格——Content-Type必须是text/event-stream，且连接出错会自动关闭而不重试。先确认服务端响应头和格式，再检查中间有没有网关把长连接超时掐断。

现象：长连接测试跑一会儿就掉线

原因：多为服务器端 idle 超时或防火墙对长连接的清理。处理：网络不稳定时先换到更近的环境复现；服务端确认心跳/keep-alive 配置。客户端侧把日志留全，断连时间点配合时间戳回查，比口头描述"大概跑了两分钟断了"高效得多。

选哪个？一张表 + 三步上手

上手清单：

1. 点 Realtime，用默认 echo 端点连一次 WebSocket，确认收发日志都出来
2. 切 SSE 页签，把 Event Type 改成你服务的事件名，Start 后核对推送内容
3. 跨域就开 Proxy，断连就看时间戳回查服务端超时配置

界面交互细节如果想翻源码，实时面板组件都集中在 realtime 组件目录，四个页面入口在pages/realtime/下，照着页签名找文件即可。

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