负载测试工具

MCP负载与压力测试React应用是一个基于浏览器的负载测试工具,专为MCP服务器性能分析设计,支持创建测试场景、运行压力/负载测试以及导出/导入JSON配置。

  • by Naresh-Dhami
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 Naresh-Dhami/MCPMeter

使用说明

MCP负载和压力测试反应应用程序

一个现代的基于浏览器的负载测试工具,灵感来自Apache JMeter,但专门为 MCP服务器性能分析.

此应用程序使开发人员能够创建测试场景、运行压力/负载测试以及以JSON格式导出/导入配置。


🚀 特性

🔧 测试设计

  • 基于表单的场景构建器
  • 顺序执行
  • 可配置的MCP请求步骤(URL、有效载荷、标头、方法)
  • 支持多个并发用户

📁 组态管理

  • 导入/导出JSON配置
  • 自动将草稿保存到浏览器本地存储
  • JSON模式验证

⚡ 执行引擎

  • 以高并发性运行工作负载
  • 支持:
    • 并发模式
    • 持续时间模式
    • 实时指标更新
  • 非阻塞执行

📊 报告和可视化

  • 实时吞吐量图(RPS)
  • 响应时间百分位数(p50、p90、p95、p99)
  • 成功/失败跟踪
  • 将结果导出为JSON

🎨 UI功能

  • React+TypeScript
  • 顺风CSS样式
  • Recharts可视化库
  • 暗/亮模式切换
  • 响应式设计

📂 项目结构

src/
├── components/
│   ├── TestBuilder.tsx      # Test configuration UI
│   ├── TestRunner.tsx        # Execution controls
│   └── ResultsPanel.tsx      # Metrics & charts
├── hooks/
│   └── useTestRunner.ts      # Test execution logic
├── store/
│   └── testStore.ts          # Zustand state management
├── types/
│   └── index.ts              # TypeScript definitions
├── App.tsx                   # Main application
├── main.tsx                  # Entry point
└── index.css                 # Global styles

🛠️ 设置和运行

安装

npm install

运行开发服务器

npm run dev

为生产而建

npm run build

🧩 架构图

flowchart TD
    A[User Interface<br/>React + Tailwind] --> B[Test Config Builder]
    B --> C[JSON Config Store<br/>LocalStorage + Import/Export]
    
    B --> D[Test Runner Controller]
    D --> E[Concurrent Execution Engine]
    
    E --> F[MCP Server]
    F --> E
    
    E --> G[Metrics Aggregator]
    G --> H[Real-Time Charts<br/>Recharts]
    
    G --> I[Report Generator<br/>JSON Export]

📜 JSON配置示例

{
  "name": "Basic MCP Load Test",
  "concurrency": 50,
  "duration": 120,
  "rampUpTime": 5,
  "steps": [
    {
      "id": "step-1",
      "type": "mcp_request",
      "name": "Test Request",
      "url": "https://mcp-server/api/test",
      "method": "POST",
      "payload": { "foo": "bar" },
      "headers": { "Content-Type": "application/json" }
    }
  ]
}

🎯 用法

  1. 配置测试:设置测试名称、并发性和持续时间
  2. 添加步骤:使用URL和有效载荷创建MCP请求步骤
  3. 运行测试:单击“开始测试”开始执行
  4. 查看结果:监控实时指标和图表
  5. 出口:将结果下载为JSON进行分析

✔️ 未来的增强功能

  • 实现Web Worker以实现真正的并行执行
  • 浸泡测试模式(6-24小时)
  • CSV导出格式
  • HTML报告生成
  • 请求/响应日志记录
  • 自定义断言
  • 分布式测试支持

🤝 贡献

欢迎投稿!请随时提交问题或拉取请求。


📝 许可证

麻省理工学院