- Node.js: 版本 >= 18.0.0
- pnpm: 版本 >= 8.0.0
- MongoDB: 版本 >= 5.0.0
# 检查 Node.js 版本
node --version
# 检查 pnpm 版本
pnpm --version
# 检查 MongoDB 状态
mongosh --eval "db.runCommand({connectionStatus: 1})"git clone <repository-url>
cd DocCollab# 安装所有包的依赖
pnpm install
# 验证安装
pnpm list --depth=0# Windows (如果使用 MongoDB 服务)
net start MongoDB
# 或者直接启动 mongod
mongod --dbpath="C:\data\db"# 连接到 MongoDB
mongosh
# 创建数据库
use doccollab
# 创建基础集合
db.createCollection("documents")
db.createCollection("users")
db.createCollection("folders")
# 退出
exit在 packages/doc-server/ 目录下创建 .env 文件:
# packages/doc-server/.env
MONGODB_URI=mongodb://localhost:27017/doccollab
PORT=3000
JWT_SECRET=your-jwt-secret-key
NODE_ENV=development在 packages/doc-web/ 目录下创建 .env 文件:
# packages/doc-web/.env
VITE_API_BASE_URL=http://localhost:3000
VITE_WS_URL=ws://localhost:1234启动后端服务
# 在项目根目录
cd packages/doc-server
pnpm start:dev
# 或者使用根目录命令
pnpm --filter doc-server start:dev启动协同编辑服务器
# 在新的终端窗口
cd packages/doc-editor
pnpm start
# 或者使用根目录命令
pnpm --filter doc-editor start启动前端服务
# 在新的终端窗口
cd packages/doc-web
pnpm dev
# 或者使用根目录命令
pnpm dev:doc-web# 启动所有开发服务
pnpm start:all
# 或者只启动前端
pnpm dev:doc-web# 检查端口占用情况
netstat -ano | findstr :3000 # 后端 API 服务
netstat -ano | findstr :1234 # 协同编辑服务
netstat -ano | findstr :5173 # 前端开发服务- 前端应用: http://localhost:5173
- 后端 API: http://localhost:3000
- API 文档: http://localhost:3000/api/docs
- 协同编辑服务: ws://localhost:1234
-
用户注册/登录
- 访问前端应用
- 测试用户注册功能
- 测试用户登录功能
-
文档管理
- 创建新文档
- 编辑文档内容
- 保存文档
- 删除文档
-
协同编辑测试
- 在多个浏览器标签页中打开同一文档
- 同时编辑,观察实时同步效果
- 测试离线编辑和重新连接
-
实时同步测试
# 在 MongoDB 中查看文档数据 mongosh use doccollab db.documents.find().pretty() # 观察 yjsState 字段的变化 db.documents.find({}, {yjsState: 1, lastYjsSyncTime: 1}).pretty()
-
离线恢复测试
- 断开网络连接
- 继续编辑文档
- 重新连接网络
- 验证数据是否正确同步
# 查找占用端口的进程
netstat -ano | findstr :3000
# 终止进程(替换 PID)
taskkill /PID <PID> /F# 检查 MongoDB 服务状态
sc query MongoDB
# 重启 MongoDB 服务
net stop MongoDB
net start MongoDB# 清理缓存和重新安装
pnpm clean
rm -rf node_modules pnpm-lock.yaml
pnpm install# 检查 WebSocket 连接
# 在浏览器控制台中执行
const ws = new WebSocket('ws://localhost:1234');
ws.onopen = () => console.log('WebSocket 连接成功');
ws.onerror = (error) => console.error('WebSocket 连接失败:', error);# 后端调试模式
cd packages/doc-server
pnpm start:debug
# 前端开发模式(默认已启用热重载)
cd packages/doc-web
pnpm dev# 后端日志
tail -f packages/doc-server/logs/app.log
# MongoDB 日志
tail -f /var/log/mongodb/mongod.log # Linux/Mac
# Windows: 查看事件查看器中的 MongoDB 日志// 在浏览器控制台中监控同步性能
yjsMongoSyncService.getSyncStats();
// 监听同步事件
yjsMongoSyncService.on('syncCompleted', (data) => {
console.log('同步完成:', data);
});# 构建所有包
pnpm build:all
# 单独构建
pnpm --filter doc-web build
pnpm --filter doc-server build# 后端生产模式
cd packages/doc-server
pnpm start:prod
# 前端生产预览
cd packages/doc-web
pnpm preview// 在 MongoDB 中创建性能索引
use doccollab
// 文档查询索引
db.documents.createIndex({ "documentId": 1, "userId": 1 });
db.documents.createIndex({ "lastYjsSyncTime": -1 });
db.documents.createIndex({ "lastSyncSource": 1 });
// 用户相关索引
db.users.createIndex({ "email": 1 }, { unique: true });
db.users.createIndex({ "username": 1 }, { unique: true });
// 文件夹索引
db.folders.createIndex({ "userId": 1, "parentFolderId": 1 });// 在 useCollaborativeEditor.jsx 中调整配置
const syncService = new YjsMongoSyncService({
syncDelay: 500, // 减少同步延迟
maxRetries: 5, // 增加重试次数
batchSize: 20, // 增加批量处理大小
debug: true // 启用调试模式
});# 监控系统资源
top -p $(pgrep -f "node.*doc-server")
top -p $(pgrep -f "node.*doc-editor")
# 监控 MongoDB 性能
mongosh --eval "db.runCommand({serverStatus: 1})"# MongoDB 数据备份
mongodump --db doccollab --out ./backup/$(date +%Y%m%d)
# 恢复数据
mongorestore --db doccollab ./backup/20240101/doccollab通过以上步骤,您应该能够成功启动和测试 DocCollab 项目的所有功能。如果遇到问题,请参考常见问题排查部分或查看项目日志获取更多信息。