WebSocket实现毫秒级灯光颜色实时调节，通过加密连接、防抖合并发送、轻量HSL/RGB数据格式及服务端ACK广播，确保流畅体验与状态同步。
WebSocket 能让浏览器和服务器保持长连接，实现灯光颜色的毫秒级实时调节，不用反复轮询，体验更流畅。
WebSocket 连接建立与状态管理
页面加载时用 new WebSocket() 初始化连接，推荐带协议前缀的完整地址（如 wss://smart.home/ws），确保生产环境走加密通道。连接成功后监听 onopen，失败则重试 2～3 次，间隔递增（如 1s、2s、4s），避免雪崩。断开时触发 onclose，记录日志并提示用户“灯光控制已离线”。
HSL/RGB 颜色数据的轻量传输格式
别传整段 CSS 或 JSON 对象。客户端调色盘变动时，只发最小必要字段：{"type":"color","h":192,"s":75,"l":60}（HSL）或 {"r":42,"g":128,"b":201}（RGB）。服务端解析后直接下发给对应灯控设备，减少带宽和解析开销。若支持多灯，加一个 id 字段区分目标设备。
防抖与合并发送机制
用户拖动滑块或点击色环时，高频触发颜色变化事件。需在前端加简单防抖：300ms 内的连续变更只发最后一次。也可启用合并策略——比如把 100ms 内的多次 H 值微调，取中位数再发送。这样既保证响应感，又避免网络拥塞或设备处理不过来。
服务端广播与设备同步反馈
服务端收到颜色指令后，除转发给硬件网关，还应通过 WebSocket 主动推送确认消息回所有已连接的控制端，例如：{"type":"ack","target":"light-01","hsl":[192,75,60],"ts":1718234567890}。前端据此更新 UI 状态（如点亮“已同步”图标），避免用户误以为操作未生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
