3 步打通实时通信测试Hoppscotch 实战 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在 Hoppscotch 里贴上一行wss://地址三秒后 echo 回包就出现在日志区——实时通信调试可以这么直接。作为开源 API 开发生态Hoppscotch 在 REST 请求之外原生支持 WebSocket 双向通信与 SSEServer-Sent Events服务器发送事件单向推送两类通道一次会话内即可完成从连接、收发到日志复盘的全部验证。场景速查先选协议协议适用场景优势局限WebSocket聊天、协作编辑、游戏状态等同步收发全双工双向低延迟服务器端连接维持成本较高SSE通知推送、行情流等服务器主动更新基于 HTTP、轻量、自带重连仅服务器到客户端单向需要双向收发就选 WebSocket服务器只推、客户端只收则 SSE 更省开销。决策后按下面两条线操作即可二者互不依赖。 WebSocket 连接三步走连上、发送、配子协议在左侧导航选中 Realtime再于协议下拉里选 WebSocketURL 栏填入端点地址默认 echo 服务wss://echo-websocket.hoppscotch.io可直接用于首次连通性验证。连接建立后在底部消息框输入任意文本并发送服务器原样回显一来一回形成两条日志。校验结构化数据时直接粘贴如下 JSON 消息{ action: subscribe, channel: news-updates }后端要求子协议Subprotocol时——比如 GraphQL 场景的graphql-ws——通过 Add Protocol 录入协议名勾选 Active 使其生效Delete 可移除多条协议可共存仅已启用项参与连接握手。会话管理核心逻辑见 WebSocketSession.ts。接入 SSE三步接上事件流SSE 走 HTTP 单向推送操作比 WebSocket 更省事。在同一 Realtime 区域把协议切到 SSEURL 栏填入端点地址默认示例https://express-eventsource.herokuapp.com/events可直接使用。连上后无需任何动作服务器推送会自动按序流入日志区。每条记录含事件类型未指定时为message、数据内容与时间戳服务端下发事件 ID 时一并落账。频道混跑多种事件时在 Event Type 输入框填入目标类型日志只保留匹配事件——这就是最简单的 SSE 事件过滤清空输入框即恢复完整事件流。过滤与会话状态维护见 SSESession.ts。 日志面板每条记录意味着什么日志面板为 WebSocket 与 SSE 共用看懂三个细节就能用出效率时间戳精确到毫秒排查时序问题时可直接比对每条消息的先后顺序。发送、接收两个方向用颜色区分。看到红绿条目连续出现时重点核对二者数据内容是否一致确认服务端响应与预期相符。单条与批量复制都已内置提交问题单或归档测试记录时无需手动誊写。REST 请求与实时通道共用同一套数据展示区切换协议后布局一致日志条目结构定义参考 HoppRealtimeLog.ts。踩坑急救两类高频问题跨域CORS报错现象浏览器报 CORS 错误通道建立失败。原因同源策略拦截了对目标服务的跨域请求。急救在设置里打开 Proxy 开关选官方代理或填入自定义代理 URL请求改由代理中转后不再受同源限制。连接频繁断开现象会话间歇掉线需要反复重连。按三处排查服务端空闲超时是否过短、网络或防火墙是否掐断长连接、远端端点自身是否稳定。长时测试建议开启 Keep Alive 维持通道活跃。起步建议先用默认 echo 端点把连接、发送、日志三步完整跑通再替换成项目实际地址一轮会话即可完成实时通道的 API 测试。流程熟悉后补上断线、重连这类异常场景验证会更顺手。项目更多细节与贡献指引见 CONTRIBUTING.md。【免费下载链接】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），仅供参考
3 步打通实时通信测试Hoppscotch 实战 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在 Hoppscotch 里贴上一行wss://地址三秒后 echo 回包就出现在日志区——实时通信调试可以这么直接。作为开源 API 开发生态Hoppscotch 在 REST 请求之外原生支持 WebSocket 双向通信与 SSEServer-Sent Events服务器发送事件单向推送两类通道一次会话内即可完成从连接、收发到日志复盘的全部验证。场景速查先选协议协议适用场景优势局限WebSocket聊天、协作编辑、游戏状态等同步收发全双工双向低延迟服务器端连接维持成本较高SSE通知推送、行情流等服务器主动更新基于 HTTP、轻量、自带重连仅服务器到客户端单向需要双向收发就选 WebSocket服务器只推、客户端只收则 SSE 更省开销。决策后按下面两条线操作即可二者互不依赖。 WebSocket 连接三步走连上、发送、配子协议在左侧导航选中 Realtime再于协议下拉里选 WebSocketURL 栏填入端点地址默认 echo 服务wss://echo-websocket.hoppscotch.io可直接用于首次连通性验证。连接建立后在底部消息框输入任意文本并发送服务器原样回显一来一回形成两条日志。校验结构化数据时直接粘贴如下 JSON 消息{ action: subscribe, channel: news-updates }后端要求子协议Subprotocol时——比如 GraphQL 场景的graphql-ws——通过 Add Protocol 录入协议名勾选 Active 使其生效Delete 可移除多条协议可共存仅已启用项参与连接握手。会话管理核心逻辑见 WebSocketSession.ts。接入 SSE三步接上事件流SSE 走 HTTP 单向推送操作比 WebSocket 更省事。在同一 Realtime 区域把协议切到 SSEURL 栏填入端点地址默认示例https://express-eventsource.herokuapp.com/events可直接使用。连上后无需任何动作服务器推送会自动按序流入日志区。每条记录含事件类型未指定时为message、数据内容与时间戳服务端下发事件 ID 时一并落账。频道混跑多种事件时在 Event Type 输入框填入目标类型日志只保留匹配事件——这就是最简单的 SSE 事件过滤清空输入框即恢复完整事件流。过滤与会话状态维护见 SSESession.ts。 日志面板每条记录意味着什么日志面板为 WebSocket 与 SSE 共用看懂三个细节就能用出效率时间戳精确到毫秒排查时序问题时可直接比对每条消息的先后顺序。发送、接收两个方向用颜色区分。看到红绿条目连续出现时重点核对二者数据内容是否一致确认服务端响应与预期相符。单条与批量复制都已内置提交问题单或归档测试记录时无需手动誊写。REST 请求与实时通道共用同一套数据展示区切换协议后布局一致日志条目结构定义参考 HoppRealtimeLog.ts。踩坑急救两类高频问题跨域CORS报错现象浏览器报 CORS 错误通道建立失败。原因同源策略拦截了对目标服务的跨域请求。急救在设置里打开 Proxy 开关选官方代理或填入自定义代理 URL请求改由代理中转后不再受同源限制。连接频繁断开现象会话间歇掉线需要反复重连。按三处排查服务端空闲超时是否过短、网络或防火墙是否掐断长连接、远端端点自身是否稳定。长时测试建议开启 Keep Alive 维持通道活跃。起步建议先用默认 echo 端点把连接、发送、日志三步完整跑通再替换成项目实际地址一轮会话即可完成实时通道的 API 测试。流程熟悉后补上断线、重连这类异常场景验证会更顺手。项目更多细节与贡献指引见 CONTRIBUTING.md。【免费下载链接】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），仅供参考
![[光学原理与应用-521]：对光的错误理解与纠偏](http://pic.xiahunao.cn/yaotu/[光学原理与应用-521]：对光的错误理解与纠偏)
