From 4de26481785f06ae04b7fdbb44325f9c41665806 Mon Sep 17 00:00:00 2001
From: zikai <zikai@f.zikai.wang>
Date: Wed, 22 Jul 2026 00:36:44 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=AE=B0=E4=BA=8B=E6=9C=AC=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E9=9C=80=E6=89=8B=E5=8A=A8=E5=88=B7=E6=96=B0=E6=89=8D?=
 =?UTF-8?q?=E5=90=8C=E6=AD=A5=EF=BC=88=E5=90=8C=E6=B5=8F=E8=A7=88=E5=99=A8?=
 =?UTF-8?q?=E5=A4=9A=20tab=20clientId=20=E5=85=B1=E4=BA=AB=E5=AF=BC?=
 =?UTF-8?q?=E8=87=B4=20update=20=E8=A2=AB=E8=B7=B3=E8=BF=87=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根因：clientId 存 localStorage，同浏览器多个 tab 共享同一 clientId。
前端 onMessage 的 update 分支用 `if (msg.client_id === clientId) break` 跳过
「自己的」更新，但服务端 exclude=conn 是按连接对象排除，非按 client_id。
于是 tab B 编辑后，tab A 收到的 update client_id 等于自己的 clientId，
被误判为「自己的」跳过 -> 不同步，只有手动刷新（重新 init）才看到内容。

修复：
- clientId 改用 sessionStorage（每 tab 独立），不再跨 tab 共享。
- 移除 update 分支的 client_id 跳过逻辑（服务端 exclude=conn 已排除发送者，
  前端跳过是多余且会误杀同 client_id 的其他 tab）。
---
 static/whiteboard.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/static/whiteboard.js b/static/whiteboard.js
index daacd13..a48cf63 100644
--- a/static/whiteboard.js
+++ b/static/whiteboard.js
@@ -23,10 +23,13 @@
 
   // ---------- 状态 ----------
   let ws = null;
-  let clientId = localStorage.getItem("wb_cid") || "";
+  // 每个 tab 独立的 client_id（用 sessionStorage 而非 localStorage，避免同浏览器
+  // 多 tab 共享 id 导致收到的 update 被误判为「自己的」而跳过不同步）。
+  // 服务端已用 exclude=conn 排除发送者，前端不再用 client_id 跳过 update。
+  let clientId = sessionStorage.getItem("wb_cid") || "";
   if (!clientId) {
     clientId = "c_" + Math.random().toString(36).slice(2, 10);
-    localStorage.setItem("wb_cid", clientId);
+    sessionStorage.setItem("wb_cid", clientId);
   }
   let heartbeatTimer = null;
   let reconnectTimer = null;
@@ -171,7 +174,7 @@
       case "pong":
         break;
       case "update":
-        if (msg.client_id === clientId) break; // 自己的，已本地更新
+        // 服务端 broadcast 已用 exclude=conn 排除发送者，收到即他人编辑，直接应用。
         applyRemoteUpdate(msg.content || "");
         flashStatus("对方有更新");
         break;