协同白板 MVP

基于 Vue 3 + Vite 前端 + Node.js WebSocket 服务端实现的多人实时协同白板。

项目结构

oz2/
├── server/          # WebSocket 服务端（Node.js + ws）
│   ├── index.js
│   └── package.json
└── frontend/        # 前端（Vue 3 + Vite）
    ├── src/
    │   ├── main.js
    │   ├── App.vue
    │   └── components/Whiteboard.vue
    ├── index.html
    ├── vite.config.js
    └── package.json

快速启动

1. 启动 WebSocket 服务端

cd server
npm install
npm start
# 默认监听 ws://localhost:3001

2. 启动前端开发服务器

cd frontend
npm install
npm run dev
# 默认访问 http://localhost:5173

Vite 开发模式已配置代理，/ws 请求会转发到 ws://localhost:3001，无需手动改端口。

3. 多人协同

在浏览器打开同一个 URL 即可加入同一房间：

http://localhost:5173/?room=my-room

• 不同用户访问相同的 ?room= 参数即可实时看到彼此绘图。
• 省略参数时默认进入 default 房间。
• 新加入者会自动收到当前房间的完整笔画历史。

功能说明

功能	说明
实时同步	WebSocket 广播，所有客户端看到相同内容
笔画历史	新用户加入后自动同步已有内容
颜色 / 粗细	工具栏可调整
清空白板	同步给房间内所有用户
断线重连	WebSocket 断开后 3 秒自动重连
触屏支持	支持移动端触摸绘图

生产部署

1. 前端构建：cd frontend && npm run build，产物在 frontend/dist/。
2. 将 dist/ 托管到任意静态服务器（Nginx、Vercel 等）。
3. 服务端部署到 Node.js 环境，设置 PORT 环境变量。
4. 生产环境前端修改 Whiteboard.vue 中的 wsUrl() 函数，改为服务端实际地址。