多标签页下Vue项目LocalStorage重复更新WebSocket通知的问题求助

• 多标签页重复接收WebSocket消息：每个打开的标签页都会创建独立的WebSocket连接，服务器推送通知时，所有连接都会收到同一条数据，导致每个标签页都执行unshift操作，往localStorage里重复添加相同内容。
• useStorage跨标签同步触发循环重复：useStorage会监听localStorage变化，当一个标签页修改了liveNotifications，其他标签页的该数组会自动同步更新，但此时其他标签页的WebSocket回调还会再次执行添加操作，形成循环重复。
• notificationsCount未跨标签同步：notificationsCount是每个标签页本地维护的变量，没有和localStorage绑定，多个标签页各自累加，加上localStorage同步带来的触发，导致数值来回波动。

方案1：控制仅单个标签页维持WebSocket连接 #

利用localStorage标记活跃连接的标签页，避免多标签重复建立连接，同时通过storage事件同步数据：

// 页面加载时初始化
let activeTabId = localStorage.getItem('activeWebSocketTab');
const currentTabId = Date.now().toString();

// 监听存储变化，处理活跃标签切换
window.addEventListener('storage', (e) => {
  if (e.key === 'activeWebSocketTab') {
    activeTabId = e.newValue;
    // 非活跃标签关闭WebSocket
    if (activeTabId !== currentTabId && connections.alerts) {
      connections.alerts.close();
      connections.alerts = null;
    }
  } else if (e.key === 'liveNotifications') {
    // 同步其他标签页更新的通知数据
    state.liveNotifications = JSON.parse(e.newValue);
    state.notificationsCount = state.liveNotifications.length;
  }
});

// 监听页面可见性变化，抢占活跃连接
document.addEventListener('visibilitychange', () => {
  if (!document.hidden) {
    localStorage.setItem('activeWebSocketTab', currentTabId);
    // 无连接时重新建立
    if (!connections.alerts) {
      connections.alerts = new WebSocket('你的WebSocket地址');
      connections.alerts.onmessage = (event) => {
        const data = JSON.parse(event.data);
        if (data?.status) return;
        // 更新localStorage触发其他标签同步
        const updatedNotifications = [data, ...state.liveNotifications];
        localStorage.setItem('liveNotifications', JSON.stringify(updatedNotifications));
        // 本地同步数据
        state.liveNotifications = updatedNotifications;
        state.notificationsCount = updatedNotifications.length;
      };
    }
  }
});

// 初始化时无活跃标签则建立连接
if (!activeTabId) {
  localStorage.setItem('activeWebSocketTab', currentTabId);
  // 此处添加WebSocket初始化逻辑
}

方案2：添加唯一ID校验避免重复插入 #

要求服务器返回的通知包含唯一id字段，添加前先校验是否已存在，同时将计数改为基于数组长度的计算属性：

// 替换原有的notificationsCount为计算属性
const notificationsCount = computed(() => state.liveNotifications.length);

// 修改WebSocket消息处理逻辑
connections.alerts.onmessage = (event) => {
  const data = JSON.parse(event.data);
  if (data?.status) return;
  // 检查是否已存在相同ID的通知
  const isDuplicate = state.liveNotifications.some(item => item.id === data.id);
  if (!isDuplicate) {
    state.liveNotifications.unshift(data);
  }
};

这种方法实现简单，但无法解决多标签重复接收WebSocket消息的资源浪费问题，适合临时修复或简单场景。

方案3：用Broadcast Channel同步标签页状态 #

创建广播频道，仅活跃标签处理WebSocket消息，其他标签通过频道同步数据：

const notificationChannel = new BroadcastChannel('notification_sync');

// 监听页面可见性，管理WebSocket连接
document.addEventListener('visibilitychange', () => {
  if (!document.hidden && !connections.alerts) {
    connections.alerts = new WebSocket('你的WebSocket地址');
    connections.alerts.onmessage = (event) => {
      const data = JSON.parse(event.data);
      if (data?.status) return;
      // 更新本地数据
      state.liveNotifications.unshift(data);
      state.notificationsCount = state.liveNotifications.length;
      // 通知其他标签页
      notificationChannel.postMessage({ type: 'ADD_NOTE', data });
    };
  } else if (document.hidden && connections.alerts) {
    connections.alerts.close();
    connections.alerts = null;
  }
});

// 监听其他标签页的广播消息
notificationChannel.addEventListener('message', (e) => {
  if (e.data.type === 'ADD_NOTE') {
    const { data } = e.data;
    const isDuplicate = state.liveNotifications.some(item => item.id === data.id);
    if (!isDuplicate) {
      state.liveNotifications.unshift(data);
      state.notificationsCount = state.liveNotifications.length;
    }
  }
});

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