# awesome-claude-webhook-debug-tool

**Repository Path**: hhxdn/awesome-claude-webhook-debug-tool

## Basic Information

- **Project Name**: awesome-claude-webhook-debug-tool
- **Description**: Webhook 调试工具 - 专为 webhook 开发设计的调试平台
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-20
- **Last Updated**: 2026-05-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Webhook 调试工具

专为 webhook 开发设计的调试平台，解决本地开发时无法接收第三方服务回调的痛点。

## 功能特性

### 核心功能
- ✅ **临时 URL 生成**: 每个开发者独立的 webhook 地址
- ✅ **请求捕获**: 保存所有请求的 headers、body、元数据
- ✅ **请求重放**: 一键重放到本地开发环境，支持修改参数
- ✅ **实时转发**: 自动转发请求到本地，通过 WebSocket 实时推送
- ✅ **团队协作**: 团队成员可以查看和管理共享的 webhook
- ✅ **订阅管理**: 三个层级（免费/专业/团队）

### 订阅层级
- **免费版**: 保留 24 小时，10 个 webhook
- **专业版**: $9/月，保留 30 天，无限 webhook
- **团队版**: $29/月，团队协作功能

## 技术栈

### 后端
- Node.js + Express
- PostgreSQL (用户、webhook、订阅数据)
- Redis (临时存储请求数据，带 TTL)
- Socket.IO (实时通信)
- JWT 认证
- Stripe 支付集成

### 前端
- Vue 3 + TypeScript
- Vite
- Pinia (状态管理)
- Vue Router
- Axios
- Socket.IO Client

## 项目结构

```
awesome-claude-webhook-debug-tool/
├── backend/                 # 后端服务
│   ├── src/
│   │   ├── config/         # 配置文件 (数据库、Redis、Socket.IO)
│   │   ├── controllers/    # 控制器
│   │   ├── middleware/     # 中间件 (认证、权限)
│   │   ├── migrations/     # 数据库迁移
│   │   ├── routes/         # 路由定义
│   │   └── utils/          # 工具函数
│   └── package.json
├── frontend/             # 前端应用
│   ├── src/
│   │   ├── api/           # API 客户端
│   │   ├── components/    # Vue 组件
│   │   ├── router/        # 路由配置
│   │   ├── stores/        # Pinia stores
│   │   └── views/         # 页面组件
│   └── package.json
├── shared/                  # 共享类型定义
│   └── src/types.ts
└── README.md
```

## 快速开始

### 环境要求
- Node.js >= 18
- PostgreSQL >= 12
- Redis >= 6

### 安装依赖

```bash
# 安装后端依赖
cd backend
npm install

# 安装前端依赖
cd ../frontend
npm install

# 安装共享包依赖
cd ../shared
npm install
```

### 配置环境变量

复制 `backend/.env.example` 到 `backend/.env` 并配置：

```env
# 服务器
PORT=3000
NODE_ENV=development

# 数据库
DB_HOST=localhost
DB_PORT=5432
DB_NAME=webhook_debug
DB_USER=postgres
DB_PASSWORD=your_password

# Redis
REDIS_URL=redis://localhost:6379

# JWT
JWT_SECRET=your-secret-key
JWT_EXPIRES_IN=15m
REFRESH_TOKEN_EXPIRES_IN=30d

# Stripe
STRIPE_SECRET_KEY=sk_test_your_key
STRIPE_WEBHOOK_SECRET=whsec_your_secret

# 应用
BASE_URL=http://localhost:3000
WEBHOOK_BASE_URL=http://localhost:3000/hook
```

### 运行数据库迁移

```bash
cd backend
npm run migrate
```

### 启动服务

```bash
# 启动后端 (终端 1)
cd backend
npm run dev

# 启动前端 (终端 2)
cd frontend
npm run dev
```

访问 http://localhost:5173 查看应用。

## API 端点

### 认证
- `POST /api/auth/register` - 用户注册
- `POST /api/auth/login` - 用户登录
- `POST /api/auth/refresh` - 刷新访问令牌
- `POST /api/auth/logout` - 登出
- `POST /api/auth/password-reset/request` - 请求密码重置
- `POST /api/auth/password-reset/confirm` - 确认密码重置

### Webhook 管理
- `POST /api/webhooks` - 创建 webhook
- `GET /api/webhooks` - 列出用户的 webhooks
- `DELETE /api/webhooks/:webhookId` - 删除 webhook

### 请求管理
- `POST /hook/:webhookId` - 接收 webhook 请求（公开端点）
- `GET /api/:webhookId/requests` - 列出 webhook 的请求
- `GET /api/:webhookId/requests/:requestId` - 获取请求详情
- `GET /api/:webhookId/requests/search` - 搜索请求
- `GET /api/:webhookId/requests/count` - 获取请求数量

### 请求重放
- `POST /api/:webhookId/requests/:requestId/replay` - 重放单个请求
- `POST /api/:webhookId/requests/bulk-replay` - 批量重放
- `GET /api/:webhookId/requests/:requestId/replay-history` - 获取重放历史

### 转发配置
- `POST /api/:webhookId/forwarding` - 配置转发
- `GET /api/:webhookId/forwarding` - 获取转发配置

## WebSocket 事件

### 客户端发送
- `join-webhook` - 加入 webhook 房间
- `leave-webhook` - 离开 webhook 房间
### 服务器发送
- `new-request` - 新请求到达
- `forward-response` - 转发响应
- `forward-error` - 转发错误

## 开发指南

### 后端开发

```bash
cd backend

# 开发模式（热重载）
npm run dev

# 构建
npm run build

# 生产模式
npm start

# 代码检查
npm run lint

# 格式化代码
npm run format
```

### 前端开发

```bash
cd frontend

# 开发模式
npm run dev

# 构建
npm run build

# 预览构建
npm run preview

# 代码检查
npm run lint
```

## 部署

### 后端部署
1. 设置生产环境的 PostgreSQL 和 Redis
2. 配置生产环境变量
3. 运行数据库迁移
4. 构建并启动服务

```bash
cd backend
npm run build
npm start
```

### 前端部署
1. 构建前端资源
2. 部署到静态文件服务器或 CDN

```bash
cd frontend
npm run build
# 将 dist/ 目录部署到服务器
```

## 许可证

MIT

## 贡献

欢迎提交 Issue 和 Pull Request！