如何修复Y.logUpdateV2解码YJS二进制数据的报错并输出明文？

问题根源 #

直接把websocket收到的所有消息传给Y.logUpdateV2()会报错，是因为Y-websocket的消息不只有YJS的update数据——它包含多种类型的消息（同步握手、awareness状态、update等），只有特定类型的消息才符合YJS update的格式，其他消息直接解码会导致读取错误的数组长度，触发RangeError。

修复方案：过滤并提取正确的update消息 #

Y-websocket的消息第一个字节代表消息类型，其中类型2才是YJS的update数据。修改代码，先判断消息类型，再提取有效部分解码：

wsProvider.on('message', (event: MessageEvent) => {
  const data = new Uint8Array(event.data);
  // 仅处理update类型的消息（第一个字节为2）
  if (data.length > 0 && data[0] === 2) {
    // 截取从第2个字节开始的内容，这才是真正的YJS update二进制数据
    const updateData = data.slice(1);
    Y.logUpdateV2(updateData);
  }
});

更简便的调试方式：直接监听文档update事件 #

不需要处理websocket消息，直接监听YJS文档的update事件，拿到的就是标准的update数据，直接调用日志方法即可：

// 假设你的YJS文档实例是doc
doc.on('update', (update: Uint8Array) => {
  Y.logUpdateV2(update);
});

补充：其他消息类型的处理（可选） #

如果需要调试其他类型的消息，比如awareness（类型3），可以单独处理：

wsProvider.on('message', (event: MessageEvent) => {
  const data = new Uint8Array(event.data);
  switch (data[0]) {
    case 2:
      // 处理update消息
      Y.logUpdateV2(data.slice(1));
      break;
    case 3:
      // 处理awareness消息，可使用Y.Awareness.decode方法解析
      const awarenessUpdate = data.slice(1);
      console.log(Y.Awareness.decode(awarenessUpdate));
      break;
    // 其他类型消息可按需处理
  }
});

内容的提问来源于stack exchange，提问作者Dolphin