- 🚀 零后端部署 - 无需传统服务器和数据库，完全基于边缘计算
- 🌍 全球低延迟 - 利用阿里云ESA 3200+全球边缘节点，就近处理请求
- 🎯 实时协作 - 多人同时绘画，笔画即时同步
- 💡 简洁现代 - Material Design风格，响应式设计，支持移动端
- 🔒 安全可靠 - ESA原生安全防护，DDoS防护+WAF
- 📦 开箱即用 - 一键部署，无需配置
访问 https://edgeboard.fa11eaaf.er.aliyun-esa.net 体验实时协作白板
试试这些功能：
- 🖌️ 选择不同颜色和画笔粗细进行绘画
- 👥 打开多个浏览器窗口，体验实时同步
- 📱 在手机上访问，支持触摸绘画
- 🗑️ 点击清空按钮清除画布
阿里云边缘安全加速（ESA）是一个全球分布式边缘网络平台，通过遍布全球的3200多个边缘节点提供一站式的网络加速、安全防护和边缘计算服务。对于实时协作应用，ESA具有独特优势：
- 就近处理 - 请求会被自动调度至距离最近的边缘节点，大大降低了客户端请求的响应时间，实现了低延迟的计算体验
- 无需中心服务器 - ESA的各节点拥有集计算、存储和网络于一体的Serverless服务，提供函数和KV存储等能力
- 自动扩容 - 边缘节点自动弹性扩缩容，轻松应对流量峰值
- DDoS防护 - 全球有超过20Tbps的边缘DDoS攻击防护资源储备
- Web防火墙 - 原生WAF搭配机器学习算法进行威胁检测
- 智能限频 - 自动识别和抑制恶意高频请求
- 免费套餐 - 免费套餐支持0元购买和续费，包含不限量流量和请求数
- 按需计费 - 无需购买和维护服务器
- 边缘缓存 - 减少源站压力，降低带宽成本
- 秒级数据 - 数据采集的时效性可达到秒级别
- 智能路由 - Anycast路由缩短端到端延时
- 全球加速 - 静态资源智能分发，全球访问流畅
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ 用户 A │ │ 用户 B │ │ 用户 C │
│ (上海) │ │ (北京) │ │ (广州) │
└──────┬──────┘ └──────┬──────┘ └──────┬──────┘
│ │ │
│ 150ms轮询 │ 150ms轮询 │ 150ms轮询
│ │ │
▼ ▼ ▼
┌──────────────────────────────────────────────────────┐
│ 阿里云ESA全球边缘节点 (3200+) │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ 上海节点 │ │ 北京节点 │ │ 广州节点 │ │
│ │ - EdgeKV │ │ - EdgeKV │ │ - EdgeKV │ │
│ │ - 边缘函数 │ │ - 边缘函数 │ │ - 边缘函数 │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
└──────────────────────────────────────────────────────┘
│
│ 全球同步
▼
┌──────────────┐
│ EdgeKV存储 │
│ - 笔画数据 │
│ - 广播列表 │
└──────────────┘
前端
- React 18 + Vite 5
- Canvas API - 高性能绘图
- Tailwind CSS - 现代化样式
后端（边缘函数）
- 阿里云ESA EdgeKV - 分布式KV存储
- 边缘函数 - Serverless计算
- 轮询机制 - 实时数据发现与拉取
同步策略
- 混合架构：独立笔画存储 + 轻量级广播
- 三阶段流程：发现 → 拉取 → 绘制
- 无竞态条件：每个笔画独立存储
- Node.js >= 16
- npm 或 yarn
# 克隆项目
git clone https://github.com/yourusername/edgeboard-realtime-whiteboard.git
cd edgeboard-realtime-whiteboard
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 访问 http://localhost:5173# 构建生产版本
npm run build
# 预览构建结果
npm run preview构建产物位于 dist/ 目录，可直接部署到任何静态托管服务。
edgeboard-realtime-whiteboard/
├── src/
│ ├── App.jsx # 主应用组件
│ ├── main.jsx # 应用入口
│ └── index.css # 全局样式
├── public/
│ └── favicon.svg # 网站图标
├── sync.js # ESA边缘函数代码
├── index.html # HTML模板
├── package.json # 项目配置
├── vite.config.js # Vite配置
├── tailwind.config.js # Tailwind配置
└── README.md # 项目文档
如果你想使用自己的ESA边缘函数，修改 src/App.jsx 中的API地址：
const API_URL = 'https://your-domain.aliyun-esa.net/';- 登录阿里云ESA控制台
- 创建新的边缘函数
- 将
sync.js代码粘贴到函数编辑器 - 创建EdgeKV命名空间
whiteboard - 保存并部署
阶段1: 发现新笔画
- 每150ms轮询广播列表
- 获取since时间戳之后的新笔画ID
- 加入拉取队列
阶段2: 拉取笔画数据
- 批量获取笔画详细数据（每次最多10个）
- 按时间戳排序
- 绘制到本地画布
阶段3: 发送笔画
- 用户绘制完成后加入发送队列
- 批量发送到边缘函数
- 存储到EdgeKV并更新广播列表
- 每个笔画独立存储，使用唯一ID
- 广播列表仅用于发现，不存储数据
- 本地去重：knownStrokes、receivedStrokes、myStrokes
- 网络超时重试机制
- 失败请求自动重入队列
- 连接状态实时显示
- ✅ 多色画笔（6种预设颜色）
- ✅ 可调节画笔粗细（1-20px）
- ✅ 实时多人协作
- ✅ 画布清空同步
- ✅ 触摸屏支持
- ✅ 响应式设计
- ✅ 连接状态监控
- ✅ 实时调试日志
- ✅ 统计面板（发送/接收/失败）
- Canvas离屏渲染
- 批量数据传输
- 请求去重与缓存
- 轮询间隔优化
- 队列机制限流
欢迎提交Issue和Pull Request！
- Fork本项目
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启Pull Request
- 添加橡皮擦功能
- 支持图形工具（矩形、圆形、直线）
- 历史记录撤销/重做
- 导出为图片
- 房间系统（多画布隔离）
- 用户昵称自定义
- 画笔预览
MIT License
- 阿里云ESA - 提供边缘计算和KV存储能力
- React - 前端框架
- Vite - 构建工具
- Tailwind CSS - CSS框架
如有问题或建议，请通过以下方式联系：
- 提交 Issue
- 邮箱: your.email@example.com
EdgeBoard - 让协作更简单 ❤️
Made with ❤️ using Aliyun ESA