群面模拟系统前端实战圆桌UI与WebSocket实时通信一、圆桌布局纯CSS实现环绕式座位群面模拟的核心场景是一张圆桌所有人围坐一圈。我没有用 Three.js 或 Canvas只用纯 CSS 实现了这个效果。思路很简单计算出每个座位在圆周上的角度用 transform: translate() 定位。function getSeatStyle(index) { const total participants.length const angle (index / total) * 360 const radius 160 const rad (angle - 90) * Math.PI / 180 return { transform: translate(${Math.cos(rad) * radius}px, ${Math.sin(rad) * radius}px) } }桌面用 border-radius: 50% 径向渐变模拟质感再加两层伪元素装饰环.table-surface { width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #1e2e42, #0f1622); border: 2px solid #2f3f55; box-shadow: 0 0 60px rgba(60,120,220,0.06), inset 0 0 60px rgba(0,0,0,0.5); }气泡则根据座位所在 quadrant上/下/左/右自动定位方向和箭头.seat.top .seat-bubble { top: -8px; left: 50%; transform: translateX(-50%) translateY(-100%); } .seat.bottom .seat-bubble { top: 60px; left: 50%; transform: translateX(-50%); } .seat.left .seat-bubble { top: -8px; right: 60px; } .seat.right .seat-bubble { top: -8px; left: 60px; }二、WebSocket消息驱动整个房间的交互基于 WebSocket。前端在进入房间时建立连接后续所有发言、切阶段、打断都通过 WS 传递。消息处理的核心是一个 switchfunction handleWsMessage(data) { switch (data.type) { case speak_event: // 有人发言 → 更新气泡 聊天列表 case turn_change: // 切换发言权 → 解锁/锁定输入框 case phase_change: // 阶段切换 → 更新阶段标题 case room_end: // 结束讨论 → 跳转回顾页 } }这里踩过一个坑*turn_change 不该触发气泡显示*。一开始 turn_change 里顺手设了 currentSpeaker结果轮到用户时自己的头像也冒泡了。修复方案是拆成两个变量- currentTurnSpeaker — 控制输入框的可用状态- bubbleTargetId — 只在 speak_event 时设置控制气泡显示三、气泡逐字显示为了让发言看起来更自然实现了文字逐字出现效果