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/httpsEventSource 不走独立协议头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 配置。客户端侧把日志留全断连时间点配合时间戳回查比口头描述大概跑了两分钟断了高效得多。选哪个一张表 三步上手协议通信方向典型场景注意点WebSocket全双工聊天、协同编辑需要ws/wss协议头可协商子协议SSE服务器→客户端通知、进度推送依赖text/event-stream用 Event Type 过滤上手清单点 Realtime用默认 echo 端点连一次 WebSocket确认收发日志都出来切 SSE 页签把 Event Type 改成你服务的事件名Start 后核对推送内容跨域就开 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考