SSE 在线调试工具

这个工具能做什么

SSE（Server-Sent Events）在线调试工具，用于测试和观察服务器推送的流式接口：

• 自定义请求：选择请求方法（GET/POST/PUT/PATCH/DELETE），填写 URL、请求头、请求体后发起请求。
• 实时接收：持续接收 event，按 SSE 标准字段（序号、到达时间、event 类型、id、retry、data）分列、分行展示，data 为 JSON 时自动格式化。
• 过滤高亮：用关键词、正则、JSONPath 或 event 类型筛选关心的 event，命中高亮、其余淡化，全量始终保留。
• 拼接预览：针对 LLM 等增量流式接口，用一个 JSONPath 把每条 event 的片段实时拼成完整文本。
• 复制：单条 event 可复制原始文本，也可一键复制全部（原始 SSE 文本或 JSON 数组）。

全程在浏览器本地完成，请求参数与返回内容不经过 toolbaba 服务器。

使用步骤

1. 选择请求方法并填写接口地址。
2. 按需添加请求头（如 Authorization: Bearer <token>），POST 等方法可填写请求体（如开启 stream: true 的 JSON）。
3. 点击「发起请求」，下方开始实时滚动展示收到的 event，顶部显示连接状态与计数。
4. 需要时在过滤栏切换匹配方式并输入条件，命中项会高亮。
5. 调试 LLM 流式返回时，在「拼接预览」填入 JSONPath（如 $.choices[0].delta.content）即可看到拼好的完整文本。
6. 点击「停止」可随时中断连接，「清空」清除已接收的 event。

关于 CORS（重要）

本工具在你的浏览器中直接向目标地址发起请求，因此受浏览器同源策略约束：

• 若目标服务器未返回允许当前来源的 Access-Control-Allow-Origin 响应头，请求会被浏览器拦截并报错。
• 这是纯前端工具无法绕过的限制（绕过就需要一个中转服务器，也就违背了「不经过服务器」的隐私前提）。
• 解决办法：使用本身支持跨域的公开接口测试，或在你自己的服务端为该接口开启 CORS。

与 EventSource 的区别

浏览器原生的 EventSource 只支持 GET 且不能自定义请求头/请求体，无法调试需要鉴权头或需要 POST body 的流式接口。本工具改用 fetch + ReadableStream 手动解析 SSE 流，突破了这些限制，适配 OpenAI 兼容等主流流式接口。

过滤方式说明

• 关键词：对 event 类型与 data 文本做子串包含匹配。
• 正则：对 event 类型与 data 文本做正则匹配；正则非法时会提示且不隐藏任何内容。
• JSONPath：把 data 解析为 JSON 后用 JSONPath 求值，路径命中即通过；data 非 JSON（如 [DONE]）时不通过。
• event 类型：精确匹配 event 字段，可用英文逗号分隔多个类型，如 message,done。

常见问题

• 收到的 event 比预期少？ 仅含注释（: 开头的心跳）或没有 data 字段的块，按 SSE 规范不会作为独立 event 派发，这与浏览器行为一致。
• data 没被格式化？ 只有当 data 是合法 JSON 时才会美化展示，否则按原文显示。
• 拼接预览是空的？ 请确认 JSONPath 与实际 data 结构匹配，且 data 是 JSON；[DONE] 这类非 JSON 行会被自动跳过。