# node-fiddler

**Repository Path**: eusen/node-fiddler

## Basic Information

- **Project Name**: node-fiddler
- **Description**: node-fiddler
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-03
- **Last Updated**: 2025-07-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Node Fiddler

类似于Fiddler的网络代理监控系统，包含后端网络防火墙和前端监控界面。

## 项目结构

```
node-fiddler2/
├── network-firewall/     # 后端网络防火墙服务
│   ├── src/
│   │   ├── app.ts       # 主应用程序
│   │   ├── database/    # 数据库管理
│   │   ├── proxy/       # 代理服务器
│   │   ├── rules/       # 规则引擎
│   │   ├── websocket/   # WebSocket服务
│   │   └── types/       # 类型定义
│   ├── index.ts         # 入口文件
│   └── package.json
└── monitoring-system/    # 前端监控系统
    ├── src/
    │   ├── api/         # API客户端
    │   ├── components/  # Vue组件
    │   ├── stores/      # Pinia状态管理
    │   ├── types/       # 类型定义
    │   ├── utils/       # 工具函数
    │   ├── views/       # 页面组件
    │   ├── App.vue      # 根组件
    │   └── main.ts      # 入口文件
    ├── index.html
    └── package.json
```

## 功能特性

### 后端网络防火墙
- ✅ HTTP/HTTPS代理服务器
- ✅ 请求拦截和记录
- ✅ SQLite数据库存储
- ✅ 规则引擎和JavaScript脚本执行
- ✅ WebSocket实时数据推送
- ✅ RESTful API接口

### 前端监控系统
- ✅ 请求记录页面（左侧列表 + 右侧详情）
- ✅ 规则配置页面
- ✅ 实时数据同步
- ✅ 响应式设计
- ✅ 暗色主题支持

## 技术栈

### 后端
- **运行时**: Bun
- **框架**: H3
- **数据库**: SQLite (Bun内置)
- **WebSocket**: ws
- **语言**: TypeScript

### 前端
- **框架**: Vue 3 + TypeScript
- **UI库**: NaiveUI
- **状态管理**: Pinia
- **路由**: Vue Router
- **构建工具**: Vite
- **样式**: Less

## 快速开始

### 环境要求
- Node.js 18+
- Bun 1.0+

### 安装依赖

```bash
# 安装后端依赖
cd network-firewall
bun install

# 安装前端依赖
cd ../monitoring-system
bun install
```

### 启动服务

1. **启动后端服务** (端口: 3000)
```bash
cd network-firewall
bun run dev
```

2. **启动前端服务** (端口: 5173)
```bash
cd monitoring-system
bun run dev
```

### 访问应用
- 前端界面: http://localhost:5173
- 后端API: http://localhost:3000
- WebSocket: ws://localhost:9001/ws

## 服务端口配置

| 服务 | 端口 | 说明 |
|------|------|------|
| API服务器 | 3000 | RESTful API接口 |
| WebSocket服务器 | 9001 | 实时数据推送 |
| HTTP代理服务器 | 8080 | HTTP请求代理 |
| HTTPS代理服务器 | 8443 | HTTPS请求代理 |
| 前端开发服务器 | 5173 | Vue开发服务器 |

## API接口

### 交易记录
- `GET /api/transactions` - 获取请求记录列表
- `GET /api/transactions/:id` - 获取单个请求详情
- `POST /api/cleanup` - 清理旧记录

### 规则管理
- `GET /api/rules` - 获取规则列表
- `POST /api/rules` - 创建规则
- `PUT /api/rules/:id` - 更新规则
- `DELETE /api/rules/:id` - 删除规则

### 代理控制
- `GET /api/proxy/status` - 获取代理状态
- `POST /api/proxy/toggle` - 切换代理状态

## 使用说明

### 请求记录页面
1. 左侧显示所有HTTP(S)请求的列表
2. 点击请求可查看详细信息
3. 右侧显示请求和响应的详细内容
4. 支持多种格式查看（Headers、Raw、Body等）

### 规则配置页面
1. 创建和管理拦截规则
2. 设置触发条件（URL包含、方法匹配等）
3. 配置触发行为（JavaScript脚本执行）
4. 规则可以启用/禁用

### 代理设置
- 系统启动时自动开启代理
- 可通过界面控制代理开关
- 支持HTTP和HTTPS请求拦截

## 开发说明

### 数据库结构
- `http_requests` - HTTP请求记录
- `http_responses` - HTTP响应记录  
- `rules` - 规则配置

### WebSocket事件
- `transaction` - 新的请求记录
- `transaction_update` - 请求记录更新
- `rule_matched` - 规则匹配事件

### 规则脚本环境
规则脚本在Bun环境中执行，可以访问：
- `request` - 请求对象
- `response` - 响应对象（如果存在）
- `console` - 日志输出

## 许可证

MIT License