Hoppscotch WebSocket测试：30秒建连并验证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 WebSocket测试，30 秒就能建连、看回执，还能顺手把 SSE 事件监听过滤一遍。
一、30秒建立第一条WebSocket连接
打开实时通信面板
📡 点左侧导航的 Realtime，整个工作区会切换到实时通信面板。协议下拉里选 WebSocket，端点输入框自带一个 echo 测试服务wss://echo-websocket.hoppscotch.io，不用自己找服务器。
注意左栏的 Realtime 图标，HTTP、GraphQL、实时通信共用同一套标签页体系，切过去再切回来，请求草稿都还在。点右上角的 Connect 按钮，你这时候应该看到：状态标识变成已连接，底部输入框解锁。
发送第一条消息并看回执
在输入框敲hello，点 Send。你这时候应该看到：日志区几乎同时冒出两条记录——一条是你发出去的 hello，另一条是服务端原样弹回的副本，逐字不差，说明链路已经通了。
这条会话的连接、消息、关闭逻辑都写在 WebSocketSession.ts 里，想跟状态机较劲的时候直接翻它。
二、WebSocket深度配置
多子协议管理
你的服务端如果要求携带特定子协议（比如graphql-ws）才肯放行，就要用 WebSocket子协议配置区了：点 Add Protocol 填协议名，再勾上 Active 让它生效。
一次加多个也允许，握手时只会带上被勾选的那几个，不用的协议直接 Delete 清掉。配置成功后重新连接，你这时候应该看到：日志里没有子协议协商失败的报错，连接保持在线。
协议勾选与请求头的组装逻辑在 ConnectionConfig.vue，排查"我明明加了为什么没生效"时很有用。
结构化消息调试技巧
别上来就丢大 JSON。先用一句纯文本确认往返正常，再切换到结构化载荷：
{ "action": "subscribe", "channel": "news-updates", "user": 42 }测试消息控制在三五个字段以内，回来之后才好肉眼比对。发送完逐条对照日志里的回执内容，服务端经常会在回包里附加自己的状态码，对不上的问题多半就藏在这里。
连接生命周期也别忽略：调试完点断开，标签页保留；需要复测时再连一次，端点不用重填。但要记住会话只活在内存里，刷新浏览器就得从头再来。
三、SSE单向推送：配置与事件流解析
建立SSE监听
把协议选择器切到 SSE。默认端点是https://express-eventsource.herokuapp.com/events，Event Type 一栏默认填data，也就是只监听最通用的 message 事件。
点 Connect 之后，你这时候应该看到：日志区开始自己往外蹦事件——注意，你一条消息都没发，全是服务端主动推过来的，这正是 SSE 的定位。会话参数定义在 SSESession.ts。
按事件类型过滤与日志阅读
服务端如果混着推多种事件，就在 Event Type 输入框里填指定类型，日志只显示匹配的那一类；清空输入框，全部事件恢复展示。
每一条日志都带四样东西：事件类型、数据内容、事件 ID（服务端提供时才有）和时间戳。做 API实时推送测试时，把 ID 记下来，和后端对"我到底推了没有"这类问题时非常省事。
四、日志面板：你的实时通信"行车记录仪"
WebSocket 和 SSE 共用同一套日志面板，底层结构统一在 HoppRealtimeLog.ts：方向、内容、毫秒级时间戳，一个不少。
发送和接收用不同颜色区分，滚动起来一眼分得清谁在说话。支持复制单条，也支持一键拷走全部日志——把问题甩给后端同事时，整段贴过去就行，省掉一大轮"你当时发了什么"。
五、排障清单（CORS / 断连 / 超时）
| 现象 | 可能原因 | 先查这里 |
|---|---|---|
| 浏览器控制台报 CORS 错误 | 跨域请求被浏览器拦下 | 设置里打开 Proxy 代理，或让服务端补跨域响应头 |
| 建连几秒后自动断开 | 防火墙或网关掐掉空闲长连接 | 核对服务端空闲超时，调低心跳间隔 |
| 长时间收不到数据 | 事件类型不匹配，或流本就空闲 | 重查 Event Type 输入框，换公共测试端点跑通一遍再上生产端点 |
| 自建实例连不上 | 后端未正确暴露，或混合内容拦截 | ⚡ 切到 On-prem 实例，或本地部署后用同域访问 |
左上角的实例切换菜单可以把工作区从云端切到自部署后端，联调内网服务时基本都要用到这一步。
六、WebSocket vs SSE：一张表做选型
| 对比项 | WebSocket | SSE |
|---|---|---|
| 通信方向 | 双向全双工 | 仅服务端 → 客户端单向 |
| 实现基础 | HTTP 握手升级的独立协议 | 标准 HTTP 长连接 |
| 典型场景 | 聊天、协作编辑、多人在线 | 通知中心、行情与进度推送 |
| 服务端成本 | 需维护双向会话，开销较大 | 实现简单，天然容易横向扩展 |
简单说：需要客户端高频回话就选 WebSocket，只要服务端单向播报就上 SSE，轻量还省事。
熟悉了这套流程之后，建议接着翻 CONTRIBUTING.md，里面讲了项目怎么跑起来、issue 往哪提。翻 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），仅供参考
