# p2p文件传输（非对称型NAT）

**Repository Path**: treeshavings/p2p-transfer

## Basic Information

- **Project Name**: p2p文件传输（非对称型NAT）
- **Description**: codex Agent开发，前后端分离的简易p2p文件传输网站。前端利用webRTC建立数据通道实现文件传输；后端为信令服务，进行交换sdp和ICE协商。目录下包含部署脚本以及docker compose构建配置文件。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-16
- **Last Updated**: 2026-06-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Q-Uploader — P2P File Transfer

基于 WebRTC 的浏览器端 P2P 文件直传工具，无需服务器中转文件数据，仅通过信令服务器建立连接后直接在浏览器之间传输。支持 HTTPS、中英文双语、拖拽上传、实时速度显示、房间断线重连。

---

## 项目结构

```
q-uploder/
├── deploy.sh                  # 一键部署脚本（打包 → 上传 → Docker 构建启动）
├── docker-compose.yml         # Docker Compose 编排（前端 + 后端）
├── p2p-uploader-front/        # 前端 — Vue 3 + Vite + Element Plus
│   ├── Dockerfile             # 多阶段构建（Vite 编译 → Nginx 运行）
│   ├── nginx.conf             # Nginx 配置（HTTPS + 反向代理 + WebSocket）
│   ├── ssl/                   # SSL 证书目录
│   └── src/
│       ├── views/WebRTCTransfer.vue   # 主页面（房间管理 + 文件传输入口）
│       ├── components/
│       │   ├── RoomPanel.vue          # 房间面板（创建/加入/服务器状态）
│       │   ├── SenderPanel.vue        # 发送端（文件选择 + 进度跟踪）
│       │   ├── ReceiverPanel.vue      # 接收端（文件列表 + 等待提示）
│       │   └── TransferPanel.vue      # 传输面板（已连接后的双栏布局）
│       ├── utils/
│       │   ├── webrtc.ts              # WebRTC 核心（信令 + P2P 连接 + 文件传输）
│       │   ├── format.ts              # 格式化工具（尺寸/速度/耗时）
│       │   └── clipboard.ts           # 剪贴板工具（HTTP/HTTPS 双模式）
│       ├── i18n/locales/
│       │   ├── zh-CN.ts               # 中文语言包
│       │   └── en.ts                  # 英文语言包
│       └── router/index.ts            # Vue Router 路由
└── p2p-signal-server/         # 后端 — Node.js WebSocket 信令服务
    ├── Dockerfile             # 多阶段构建（依赖安装 → 运行时）
    ├── server.js              # 信令服务器（房间管理 + ICE 协商 + 心跳）
    └── .env.production        # 生产环境配置
```

---

## 功能模块

### 1. 房间系统

| 功能 | 说明 |
|---|---|
| 创建房间 | 生成 8 位随机房间 ID，通过 WebSocket 注册到信令服务器 |
| 加入房间 | 输入房间 ID 加入已有房间，支持 URL 参数 `?room=xxx` 直链 |
| 房间链接复制 | 点击复制含房间 ID 的完整链接，兼容 HTTP 和 HTTPS |
| 断线维持 | 接收端断开后房间保持活跃，发送端回到等待状态，支持重新加入 |
| 房间超时 | 超过 1 小时无活动自动销毁 |

### 2. 信令服务器 (p2p-signal-server)

| 功能 | 说明 |
|---|---|
| WebSocket 信令 | 转发 WebRTC SDP Offer/Answer 和 ICE Candidate |
| HTTP API | `GET /server-status` 健康检查、`GET /config` 返回 ICE 服务器配置 |
| 心跳检测 | 每 30 秒 WebSocket 心跳，超时自动清理 |
| Token 认证 | 支持 `AUTH_TOKEN` 环境变量，创建/加入房间时校验 |
| ngrok 检测 | 启动时自动检测本地 ngrok 隧道公网 URL |
| 自定义 ICE | 通过 `ICE_SERVERS` 环境变量配置自建 STUN/TURN 服务器 |

### 3. P2P 文件传输

| 功能 | 说明 |
|---|---|
| 文件选择 | 点击或拖拽添加文件，支持多文件批量操作 |
| 文件列表 | 发送端/接收端各自查看文件列表，实时显示传输进度 |
| 分块传输 | 64KB 分块发送，支持超大文件 |
| 流量控制 | DataChannel 缓冲区超过 1MB 时自动等待 |
| 速度统计 | 2 秒滑动窗口实时计算上传/下载速度 (B/s → MB/s) |
| 进度跟踪 | 每个文件独立进度条 + 已传输/总大小 |
| 文件保存 | 接收端自动触发浏览器下载 |

### 4. 连接管理

| 功能 | 说明 |
|---|---|
| ICE 协商 | 完整的 Offer/Answer + ICE Candidate 交换流程 |
| ICE 超时 | 120 秒 ICE 协商超时自动释放连接 |
| IP 注入 | 支持手动注入对方 Tailscale/内网 IP，加速局域网直连 |
| 连接状态 | 实时显示 connectionState / iceConnectionState / dataChannelState |

### 5. Nginx 反向代理 (p2p-uploader-front)

| 功能 | 说明 |
|---|---|
| HTTPS | 443 端口 SSL 终止，HTTP 80 自动 301 跳转 |
| API 代理 | `/api/` → `backend:3080` |
| WebSocket 代理 | `/ws` → `backend:3080`，支持 Upgrade |
| SPA 路由 | `try_files $uri /index.html` |
| 静态缓存 | JS/CSS/图片 1 年强缓存 |
| Gzip 压缩 | 6 级压缩，覆盖文本/JS/CSS/SVG |
| 安全头 | HSTS、X-Frame-Options、X-Content-Type-Options 等 |

### 6. 日志系统

| 功能 | 说明 |
|---|---|
| 事件日志 | 右侧抽屉展示所有连接、传输、错误事件 |
| 分类显示 | info / success / warn / error 四种级别，对应不同颜色 |
| 时间戳 | 每条日志带 `HH:mm:ss` 时间戳 |
| 容量限制 | 最多保留 100 条日志 |

### 7. 国际化 (i18n)

- 支持中文 / English 切换
- 顶部导航栏一键切换语言
- 覆盖所有界面文案（房间、传输、连接状态、日志）

### 8. Docker 部署

| 功能 | 说明 |
|---|---|
| 多阶段构建 | 前端 Vite 编译 + Nginx 运行；后端依赖安装 + 纯运行时 |
| 一键部署 | `./deploy.sh` 本地打包 → SCP 上传 → 远程 docker compose up |
| 配置持久化 | 部署时自动备份/还原 `.env.production` |
| 健康检查 | 前后端均配置 HEALTHCHECK |
| 日志轮转 | json-file 驱动，10MB × 3 文件 |

---

## 技术栈

| 层级 | 技术 |
|---|---|
| 前端框架 | Vue 3 + TypeScript + Vite |
| UI 组件 | Element Plus |
| 国际化 | vue-i18n |
| 路由 | vue-router |
| P2P | WebRTC (RTCPeerConnection + DataChannel) |
| 信令 | WebSocket (ws) |
| 后端 | Node.js + ws + uuid |
| 反向代理 | Nginx (Alpine) |
| 容器化 | Docker + Docker Compose |
| SSL | Let's Encrypt / 阿里云免费证书 |

---

## 环境变量

### 后端 (p2p-signal-server/.env.production)

| 变量 | 必填 | 说明 |
|---|---|---|
| `PORT` | 否 | 服务端口，默认 3080 |
| `AUTH_TOKEN` | 否 | 房间认证 Token，为空则不启用 |
| `PUBLIC_URL` | 否 | 公网访问地址（ngrok 会自动检测） |
| `ICE_SERVERS` | 否 | 自定义 STUN/TURN 服务器 JSON 数组 |

---

## 部署

```bash
# 前置条件：服务器已安装 Docker + Docker Compose

# 1. 准备 SSL 证书
mkdir p2p-uploader-front/ssl
cp your-cert.pem p2p-uploader-front/ssl/treeshavings.online.pem
cp your-key.key  p2p-uploader-front/ssl/treeshavings.online.key

# 2. 一键部署
chmod +x deploy.sh
./deploy.sh
```

部署完成后访问 `https://treeshavings.online`（或 `http://120.27.226.32`）。