HTML无法直接判断用户在线状态，需JavaScript配合后端心跳或WebSocket实现状态同步，并通过CSS控制绿色小点样式，同时兼顾可访问性、响应式与断连重连逻辑。
HTML里没法直接判断用户在线状态
浏览器的 HTML 本身没有能力获取用户网络或聊天状态——它只是静态标记语言。所谓“绿色小点”只是视觉呈现，背后必须靠 JavaScript 配合后端逻辑（比如 WebSocket 或定时心跳）来驱动。常见错误是只写个 然后以为加个 style="background:green" 就算在线了，实际一刷新就失联。
真正可用的路径是：后端维护成员状态 → 前端通过 JS 获取并更新 DOM → CSS 控制小点样式。
用 CSS 实现绿色小点最稳妥的写法
别用 border 或 box-shadow 模拟圆点，容易在高缩放或不同设备上变形。推荐纯 width/height + border-radius: 50%：
.status-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #90ee90; /* 比纯绿更柔和，减少视觉疲劳 */
vertical-align: middle;
}
.status-dot.offline {
background-color: #ccc;
}
- 固定宽高比必须是 1:1，否则不是正圆
- 避免用
em或rem单位，字体缩放时小点会错位 - 加
vertical-align: middle是为了和文字对齐，否则常偏下
JavaScript 更新状态时最容易漏掉的三件事
很多项目把状态更新写成一次性赋值，结果用户切后台、网络波动、页面没重连，小点就卡死。关键不是“设 green”，而是“持续可信地同步”：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
setInterval轮询不如监听online/offline事件，但后者只反映本机网络，不等于聊天服务在线 → 得配合后端心跳接口 - 状态变更后，必须同时更新
aria-label，比如el.setAttribute('aria-label', '在线')，否则屏幕阅读器读不出 - 别直接操作
style.backgroundColor，优先切换 class：el.classList.toggle('offline', isOffline)，方便后续统一维护主题色
WebSocket 断连后小点变灰，但用户可能根本没发现
WebSocket 关闭时触发 onclose，但默认不会自动重连，小点就永远卡在“在线”。更糟的是，有些库（比如早期 Socket.IO）在断连瞬间仍返回 connected === true，造成状态假阳性。
实操建议：
- 在
onclose和onerror里立刻设为离线，并启动带退避策略的重连（比如 1s、2s、4s…） - 加一个“弱网提示”：连续 3 次心跳超时（比如 >5s），给小点加个
animation: pulse 2s infinite表示“正在尝试恢复” - 别依赖
navigator.onLine判断服务可用性——它只看本地网络，Wi-Fi 开着但服务器崩了，它照样返回true
状态不是颜色，是数据流的终点。小点变绿的那一刻，背后至少经过一次服务端确认、一次心跳响应、一次 DOM 同步——少一环，就是误导。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
