whistle.sse-mock

一个用于模拟 SSE (Server-Sent Events) 流数据的 Whistle 插件。

功能特点

• 🎯 自定义 SSE 数据：支持配置多条 SSE 消息，每条消息可设置延迟时间
• 🔄 多配置管理：支持创建多个配置，通过规则指定使用哪个配置
• 💻 可视化界面：提供友好的 Web UI 来管理 SSE 配置
• ⚡ 实时预览：在界面中直接测试 SSE 输出效果
• 🔁 循环播放：支持消息循环播放模式
• 📝 完整 SSE 支持：支持 event、id、data 等 SSE 字段

安装

方式一：使用 lack 脚手架（官方推荐）

# 全局安装 lack
npm i -g lack

# 进入插件目录
cd whistle.sse-mock

# 开发模式运行（自动挂载到 Whistle）
lack watch

参考：Whistle 插件开发指南

方式二：本地安装

# 进入插件目录
cd whistle.sse-mock

# 使用 whistle 安装插件（在插件目录执行）
w2 i

方式三：npm link

# 进入插件目录
cd whistle.sse-mock

# 链接到全局
npm link

# 重启 whistle
w2 restart

使用方法

1. 配置 SSE 数据

安装插件后，在 Whistle 界面的 Plugins 标签页中，点击 sse-mock 打开配置界面。

在界面中可以：

• 创建/编辑/删除 SSE 配置
• 为每条消息设置数据内容和延迟时间
• 设置是否循环播放
• 实时预览 SSE 输出效果

2. 添加 Whistle 规则

在 Whistle Rules 中添加规则，格式为：

# 使用默认配置
api.example.com/sse/stream sse-mock://

# 使用指定配置
api.example.com/chat/stream sse-mock://chatgpt

# 正则匹配
/api\/.*\/stream/ sse-mock://default

3. 访问接口

现在访问匹配的接口时，Whistle 会返回你配置的 SSE 流数据：

curl -N http://api.example.com/sse/stream

配置示例

基础配置

{
  "name": "default",
  "description": "默认 SSE 配置",
  "messages": [
    { "data": "Hello SSE!", "delay": 1000 },
    { "data": "This is mock data", "delay": 1000 },
    { "data": "[DONE]", "delay": 0 }
  ],
  "loop": false
}

ChatGPT 风格配置

{
  "name": "chatgpt",
  "description": "ChatGPT 风格 SSE 响应",
  "messages": [
    { "data": "{\"choices\":[{\"delta\":{\"content\":\"你\"}}]}", "delay": 100 },
    { "data": "{\"choices\":[{\"delta\":{\"content\":\"好\"}}]}", "delay": 100 },
    { "data": "{\"choices\":[{\"delta\":{\"content\":\"！\"}}]}", "delay": 100 },
    { "data": "[DONE]", "delay": 0 }
  ],
  "loop": false
}

带事件类型的配置

{
  "name": "with-events",
  "messages": [
    { "event": "start", "data": "开始", "delay": 0 },
    { "event": "message", "data": "消息内容", "delay": 500 },
    { "event": "end", "data": "结束", "delay": 500 }
  ],
  "loop": false
}

消息字段说明

| 字段 | 类型 | 必填 | 说明 | |------|------|------|------| | data | string | 是 | SSE 数据内容，可以是普通字符串或 JSON 字符串 | | delay | number | 否 | 发送前的延迟时间（毫秒），默认 100 | | event | string | 否 | SSE 事件类型，对应 event: 字段 | | id | string | 否 | SSE 消息 ID，对应 id: 字段 |

目录结构

whistle.sse-mock/
├── package.json        # 包配置
├── index.js           # 插件入口
├── lib/
│   ├── server.js      # SSE 服务器（处理代理请求）
│   ├── uiServer.js    # UI 服务器（提供配置界面 API）
│   └── storage.js     # 存储模块（管理配置数据）
├── public/
│   └── index.html     # 配置界面
├── data/
│   └── config.json    # 配置数据（自动生成）
└── README.md          # 说明文档

常见问题

Q: 插件安装后在 Whistle 中看不到？

A: 确保：

1. 插件名称以 whistle. 开头
2. 已执行 npm install 安装依赖
3. 重启 Whistle：w2 restart

Q: 规则配置正确但没有生效？

A: 检查：

1. 规则格式是否正确（注意 :// 符号）
2. URL 匹配是否正确
3. 查看 Whistle Network 面板确认请求是否被匹配

Q: 如何查看原始 SSE 响应？

A: 在浏览器开发者工具的 Network 面板中，找到对应请求，切换到 EventStream 标签页查看。

License

MIT