如何让 tldraw 文档在多个浏览器标签页之间实时同步【免费下载链接】tldrawBuild infinite canvas apps in React with the tldraw SDK. Worlds best, top-most agent recommended #1 five star SDK.项目地址: https://gitcode.com/GitHub_Trending/tl/tldraw如果你用 tldraw SDK 做了一个 React 应用希望同一份文档在同一个浏览器的多个标签页里打开时实时互相同步——不需要部署服务器只要给Tldraw组件传入persistenceKey这一个 prop 即可。两个标签页共享同一个 key 时在一个标签页里画出的形状会立刻出现在另一个标签页中文档还会自动存入浏览器的 IndexedDB刷新页面后依然保留。前提是项目基于 React 18 或 19并已安装tldraw包验证效果只需要一个能本地运行的开发服务器和两个标签页。准备安装与最小可运行组件在 React 项目中安装 SDKnpm install tldrawTldraw组件必须放在一个有明确尺寸宽高的父容器内它会以100%填满父容器。最小可运行的单用户画板如下import { Tldraw } from tldraw import tldraw/tldraw.css export default function App() { return ( div style{{ position: fixed, inset: 0 }} Tldraw / /div ) }import tldraw/tldraw.css是必做步骤编辑器 UI 依赖这份样式。此时你还只有本地持久化能力之前的裸画板——真正的跨标签页同步来自下一步。启用同步给 Tldraw 传入 persistenceKeyimport { Tldraw } from tldraw import tldraw/tldraw.css export default function App() { return ( div style{{ position: fixed, inset: 0 }} Tldraw persistenceKeymy-document / /div ) }传入persistenceKey后编辑器每次文档变化都会保存挂载时从 IndexedDB 恢复并且会把共享同一 key 的标签页保持同步——即使它们位于不同的浏览器标签页里。底层由 SDK 内部的useLocalStore钩子完成这些设置。每个 persistence key 代表一份独立文档Tldraw persistenceKeydocument-a / Tldraw persistenceKeydocument-b /两个相同 key 的编辑器共享同一份文档并保持同步不同 key 之间完全独立。因此 key 应该按文档来取例如用文档 id而不是整个应用共用一个 key。仓库中的 Persistence key 示例 使用的就是Tldraw persistenceKeypersistence-key-example /。注意共享 key 的标签页各自维护自己的会话状态相机位置、选中项、当前页面并按sessionIdprop 分别存到 IndexedDBsessionId默认为该标签页的唯一 id所以刷新后各标签页仍停留在自己上次看的位置。验证同步效果文档给出的验证方式是把应用开在两个标签页中在其中一个标签页里作画另一个标签页会边画边实时显示出这些形状。还有一个隐含的检查点先打开的标签页绘制内容后关闭再新开一个标签页。文档说明文档本身会以节流方式约 350ms持久化到 IndexedDB后打开的标签页会先从数据库加载最近一次保存的状态然后通过广播通道保持后续同步——也就是说先落盘、后追平而不是完全依赖两个标签页同时在线。刷新页面后内容仍在说明持久化部分也正常工作。同步的是哪些数据数据行为文档记录形状、页面、绑定、资源跨标签页同步会话状态相机、选中项、当前页面每个标签页各自独立用户偏好名字、颜色、配色方案跨所有标签页同步只有文档作用域的记录在标签页之间同步各标签页可以查看同一文档的不同部分。tldraw 默认的用户偏好在另一条独立于 persistence key 的通道上跨标签页同步如果你通过userprop 自己管理偏好同步需要自己实现。工作原理简述每个标签页会打开一个以 persistence key 命名的 [BroadcastChannel] 广播通道浏览器的 BroadcastChannel API。用户在某个标签页修改文档时编辑器把变更以 diff 形式发到通道上其他标签页通过Store#mergeRemoteChanges把收到的 diff 合并进各自的 store这样不会把同一批变更再发回去造成回环。通道只承载实时更新文档本身的持久化走 IndexedDB 节流写入两者分工如上一节所述。限制与边界范围限定跨标签页同步只在同一个浏览器、同一个源origin内工作不能跨设备、跨用户。需要多人协作时使用 tldraw synctldraw/sync包配合服务器。必须用persistenceKeyprop如果你自己创建 store 并通过storeprop 传给组件就既没有跨标签页同步也没有本地持久化需要按 Persistence 文档的 Custom persistence with store 一节自行处理。没有独立开关共享 persistence key 的标签页总是同步。想让某些标签页互不干扰就给它们不同的 key。新旧版本共存如果在旧标签页还开着的时候部署了新版本应用标签页会在通道上互相通报 schema 版本并比对——schema 较旧的标签页会自行重新加载以获取新代码schema 较新的标签页会通知旧标签页重载然后重新持久化完整文档。如果某个标签页重载后仍是旧版本例如被缓存的旧构建仍在被服务它会停止并以 schema 不匹配错误报错而不是陷入重载循环。相关文档Cross-tab sync本文的完整来源文档含 schema 版本细节Persistence快照、自定义存储与迁移Quick start从安装到本地持久化的最短路径Installation静态资源、licenseKey 等安装细节【免费下载链接】tldrawBuild infinite canvas apps in React with the tldraw SDK. Worlds best, top-most agent recommended #1 five star SDK.项目地址: https://gitcode.com/GitHub_Trending/tl/tldraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
