React 多设备同时在线不互踢：连接聚合与 device 字段设计

一个反直觉的体验问题

做 IM 类产品时，用户经常同时开着 Web 端和桌面端，甚至手机也在线。最糟的体验是：桌面端一登录，Web 端就被踢下线，提示"账号在别处登录"。这其实是后端把"在线"当成了一个用户级的布尔值——谁最后连上，谁就是在线的那个人，前面的连接被强制关闭。

现代产品要的是"多端同时在线"。用户用 Web 看消息、用桌面端打字、用手机通勤，三个端都该活着，而且管理后台要能看出他到底在哪些设备在线。

关键：按连接聚合，而不是按用户

后端维护在线状态的正确粒度是"连接（connection）"，不是"用户（user）"。每个 WebSocket 连接都带一个 device 字段，标识它来自 Web、Desktop 还是 iOS。服务端维护一个 user → [connection+device] 的映射，而不是一个 user → online 的标志位。

// 前端在建立连接时把 device 带上去
const device = detectDevice(); // "web" | "desktop" | "ios"
const ws = new WebSocket(`wss://example.com/ws?token=${token}&device=${device}`);

// 心跳也带上 device，方便服务端做连接保活与设备级统计
setInterval(() => {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify({ type: "ping", device }));
  }
}, 25000);

服务端收到 ping，刷新的是"这个 user 下这个 device 对应的连接"的活跃时间，而不是全局地把用户标记为在线。某个连接断了，只从映射里摘掉那一条；其他设备继续在线，互不干扰。

前端如何展示设备级状态

管理后台的在线展示，从"一个绿点"升级成"设备级图标"：Web / Desktop / iOS 各一个图标，亮着的就是当前在线的设备。前端拿到的是设备列表，渲染成图标即可。

function DeviceBadges({ devices }: { devices: string[] }) {
  const icon: Record<string, string> = { web: "🌐", desktop: "💻", ios: "📱" };
  return (
    <span>
      {devices.map((d) => (
        <span key={d} title={d}>{icon[d] ?? "?"}</span>
      ))}
    </span>
  );
}

注意上面只是示意，正式项目里图标用 SVG 或图标字体更稳妥，这里为了省事用字符占位。

几个容易漏的点

第一，心跳超时阈值要大于心跳间隔，并留出网络抖动余量，否则弱网会误杀连接。第二，token 失效或用户主动退出时，要主动 close 并清理映射，别等超时。第三，多端消息同步：一条消息要推给该用户的所有在线连接，而不是随便挑一个。把这些理顺，多设备在线就是顺理成章的事，而不是天天救火。