推荐用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(),界面毫无反应。
立即学习“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() 的调用时机和数据截断逻辑,往往比选什么库更容易出问题。











