Watch Together - 多人同步观赛网页应用

项目概述

多人同步观赛 + 多人连麦的纯网页版应用。主画面播放直播/视频,侧边/底部排列多人连麦小窗口,同房间直播进度实时同步。

核心特性

• 主播放区: 支持 HLS(m3u8)、MP4、YouTube/Twitch 嵌入
• 多人连麦: 至少 4 人同时语音+视频小窗口
• 直播同步: 房间内所有人播放进度一致,房主控制播放/暂停/跳转
• 响应式布局: 手机/电脑自适应,移动端自动切换到底部排列
• 零依赖云服务: 纯自建,不依赖任何云厂商专属服务或付费 SAAS

技术栈

| 组件 | 技术 | 说明 | |------|------|------| | 后端 | Node.js + Express + Socket.IO | 信令 + 房间管理 + 同步 | | 前端 | 原生 JS + Socket.IO Client | 无框架依赖,加载最快 | | 播放器 | hls.js + 原生 video | HLS 流 + 直链视频 | | 连麦 | WebRTC Mesh | 点对点,无需 SFU 服务器 | | 部署 | Docker Compose 或纯 Node.js | 双模式适配 |

目录结构

watch_together/
├── README.md              # 本文件
├── package.json           # Node.js 依赖
├── server.js              # 主服务入口(单文件,零子目录依赖)
├── .env.example           # 环境变量示例
├── docker-compose.yml     # Docker 部署配置
├── Dockerfile             # Docker 镜像
├── deploy/
│   ├── setup.sh           # Linux 一键部署脚本
│   ├── setup.cmd          # Windows 一键部署脚本
│   ├── check_env.sh       # 环境检测脚本
│   └── keepalive.sh       # 保活脚本(防回收)
├── public/                # 前端静态文件
│   ├── index.html         # 主页面
│   ├── css/style.css      # 样式
│   └── js/
│       ├── app.js         # 主应用逻辑
│       ├── player.js      # 播放器控制 + 同步
│       ├── webrtc.js      # WebRTC 连麦
│       └── sync.js        # 同步客户端
└── docs/
    ├── DEPLOY.md          # 详细部署文档
    ├── NETWORK.md         # 网络配置说明
    └── TROUBLESHOOTING.md # 故障排查

快速开始

方式一: 纯 Node.js (推荐,兼容性最好)

# 1. 安装依赖
npm install

# 2. 启动服务
node server.js

# 3. 访问
# 本地: http://localhost:3000
# 外网: http://<你的域名>:<映射端口>

方式二: Docker Compose

# 1. 构建并启动
docker compose up -d

# 2. 查看日志
docker compose logs -f

# 3. 访问
# 本地: http://localhost:3000

环境适配方案

档位一: 机器达标 (Docker 可用,端口可映射)

• 使用 Docker Compose 一键部署
• 内存限制: 总占用 ≤ 1.5GB
• 支持 4+ 人连麦 + 同步观赛

档位二: 配置缩水 (Docker 可用但资源紧张)

• Docker 部署但限制内存: mem_limit: 512m
• 降低视频分辨率: 320x240
• 关闭非必要功能

档位三: 不支持 Docker

• 纯 Node.js 直接运行
• 使用 nvm 安装 Node.js
• PM2 进程守护
• 同样的功能,略低的性能

保活机制

由于平台 3 天不活跃会回收,提供保活脚本:

# 方式一: 定时心跳(推荐)
bash scripts/keepalive.sh &

# 方式二: 平台对话保活
# 定期在平台 AI 对话中发一条消息

网络配置

无公网 IP 方案

平台自带域名 + 端口映射,应用需要:

1. HTTP 服务: 监听端口(默认 3000),平台映射到外网
2. WebRTC: 使用平台域名作为 ICE candidate
3. TURN 备用: 配置公共 TURN 服务器防止对称 NAT

端口要求

| 端口 | 协议 | 用途 | |------|------|------| | 3000 | TCP | HTTP 服务(信令 + 前端) | | 3001 | TCP | TURN 备用(可选) |

许可证

MIT