推荐用Swoole或ReactPHP实现WebSocket服务：Swoole内置完整协议栈，支持事件回调和推送；ReactPHP适合轻量部署但高并发性能较弱。
PHP 后端用 ReactPHP 或 Swoole 实现 WebSocket 服务更靠谱
原生 PHP 的 fsockopen 或 stream_socket_server 虽能搭 WebSocket，但不处理帧解析、心跳、连接管理，极易在并发下断连或内存泄漏。生产环境别硬扛。
推荐直接用 Swoole（需扩展）或 ReactPHP（纯 PHP，依赖 ext-event 或 libev）：
-
Swoole\WebSocket\Server内置完整 WebSocket 协议栈，支持onOpen/onMessage/onClose，推送只需$server->push($fd, $json) -
ReactPHP配合react/http+react/websocket可跑在 CLI 模式，适合轻量部署，但高并发时性能弱于 Swoole - 避免用
Workerman做图表推送——它默认不校验 Origin，易被跨域滥刷连接，且无内置 JSON 自动序列化
前端用 Chart.js + WebSocket 实时更新要手动 chart.update()
很多人以为 new WebSocket() 连上就自动刷新图表，其实不是。Chart.js 不监听数据源变化，必须显式调用 chart.update() 或重绘 chart.data = {...}。
常见错误写法：chart.data.datasets[0].data.push(newPoint) 后没调 chart.update()，界面毫无反应。
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
立即学习“PHP免费学习笔记（深入）”；
- 接收消息后先校验
event.data是合法 JSON，再JSON.parse()，否则chart.update()会静默失败 - 若图表是时间序列，建议用
chart.data.labels.push(timestamp)+dataset.data.push(value)，再chart.update('active')控制动画节奏 - 频繁推送（如每 100ms 一次）时，用
requestIdleCallback节流更新，否则 UI 线程卡死
onmessage 里直接 JSON.parse() 失败？检查后端是否漏了 utf8_encode() 或 JSON_UNESCAPED_UNICODE
中文字段或特殊符号（如 emoji）在 PHP 侧未正确编码，前端 JSON.parse() 就会抛 SyntaxError: Unexpected token，控制台只显示“unexpected token in JSON at position 0”，很难定位。
- 后端发送前务必用
json_encode($data, JSON_UNESCAPED_UNICODE | JSON_INVALID_UTF8_SUBSTITUTE) - 若用 Swoole，确保
$server->push($fd, json_encode(...))，别用echo或print_r混入非 JSON 字符 - 前端加一层
try/catch包裹JSON.parse()，失败时console.warn('Invalid WS message:', event.data)，方便排查
图表数据突增导致卡顿？用 chart.data.labels 和 dataset.data 做长度截断
实时图表跑久了，labels 和 data 数组越来越长，渲染和计算耗时指数级上升，最后页面假死。
- 设定最大点数（如 300），每次 push 前检查：
if (chart.data.labels.length > 300) { chart.data.labels.shift(); dataset.data.shift(); } - 别用
splice(0, chart.data.labels.length - 300)，它比shift()更慢，尤其在大数据量下 - 如果需要历史回溯，把原始数据存在 IndexedDB，图表只保留最近窗口，别全塞进 Chart.js 实例
Swoole 的 onMessage 回调里做数据聚合（比如 5 秒内平均值）比前端每秒收 20 条原始点更稳；而前端 chart.update() 的调用时机和数据截断逻辑，往往比选什么库更容易出问题。
