我在一天内打造了实时协作白板——操作方法

Source: Dev.to

它在午夜开始

我有 24 小时，一个免费的 Replit 订阅，以及一个想法：如果我能构建类似 Miro 的东西——但实际上能理解其中的每一行代码呢？

我首先必须解决的核心问题

多人同步听起来很简单，直到你真正去实现它。困难的部分不是发送画布更新——而是弄清楚 要发送什么。

// client side
canvas.on('object:modified', (e) => {
  socket.emit('canvas:update', {
    roomId,
    delta: e.target.toObject(['id', 'left', 'top', 'scaleX', 'scaleY'])
  });
});

在服务器端，房间状态保存在内存中，并重新广播给房间内的所有其他客户端。新加入的用户会收到 canvas:init 事件，携带完整的当前状态，以便他们立即同步。

CollabCanvas 实际做了什么

• 实时多人画布，绘图同步。
• 为每个已连接用户提供颜色编码的光标显示。

技术栈

• 前端: React + Vite
• 后端: 简单的 Node.js 服务器（无数据库）。
• 画布状态保存在服务器内存中，每个房间的状态在闲置一小时后被清除。这让一天的项目范围保持紧凑，同时仍然功能完整。

让我惊讶的地方

光标同步是我几乎要跳过的功能——但它最终成为演示中最令人印象深刻的部分。看到三个彩色光标在同一画布上独立移动，使多人协作的感觉比仅仅同步绘图更真实。

// client side cursor handling
canvas.on('mouse:move', ({ e }) => {
  const { x, y } = canvas.getPointer(e);
  socket.emit('cursor:move', { roomId, userId, x, y });
});

教训: 打磨存在感特性。它们让多人协作充满活力。

试一试

实时演示部署在 Replit 上。打开两个标签页，在第一个标签页点击链接，然后使用 “Share” 按钮将房间 ID 分享给第二个标签页并开始绘画——你会看到我所说的效果。

https://collab-canvas—dhruvaugust1.replit.app

在 24 小时内为 Replit Buildathon 构建。欢迎反馈。