标签页同步

const update = Y.encodeStateAsUpdate(doc1)
Y.applyUpdate(doc2, update)

真实的协同编辑，一般是在两个打开的页面、两个独立的环境之间。要实现“多人协同”，我们首先要解决一个问题：

我怎么把 A 用户操作产生的 update 发送给 B 用户？

这个“发送 update 的过程”是 Yjs 不关心的，它留给你自己选择，比如：

• WebSocket（用于跨网络）
• IndexedDB + 轮询（离线同步）
• BroadcastChannel（本地页面广播）
• WebRTC / WebTransport（P2P）

这里选择最简单的一种：BroadcastChannel，它可以让同一个浏览器、同一个 origin 下的多个标签页相互通信，非常适合用来做协同编辑的本地模拟！

BroadcastChannel 简单回顾

BroadcastChannel 是浏览器原生支持的 API，所有同一个 channelName 的页面都能收发消息。例如：

const channel = new BroadcastChannel('my-room')
// 这个 channel 实例就有两个常见的操作

channel.postMessage('你好，这是我发送的消息') // 发送消息
// 绑定 message 事件
channel.onmessage = (event) => {
  console.log('收到消息，消息内容为：', event.data)
}

结合前面我们学到的 update 机制，我们只需要：

• 在本地监听 doc.on('update')，把 update 发送出去
• 收到广播 update 时，applyUpdate() 到本地文档

即可实现“标签页之间的协同同步”。

-EOF-