php实时输出结合js更新界面_php实时输出js动态渲染【教程】

php流式输出需关闭输出缓冲和zlib压缩，用text/Event-stream配合EventSource实现稳定SSE；apache/nginx须禁用代理缓冲与压缩；注意跨域、换行符规范及连接数限制。

PHP 输出缓冲没关，js 根本收不到流式数据

PHP 默认开启输出缓冲（output_buffering），哪怕你写了 echo + flush()，数据也卡在 PHP 层发不出去。浏览器收不到第一个字节，fetch 或 EventSource 就不会触发 message 事件。

必须显式关闭缓冲并禁用 zlib 压缩：

• ob_end_flush() 或 ob_get_level() ? ob_end_clean() : NULL 清掉已有缓冲
• ini_set('output_buffering', 'off')
• ini_set('zlib.output_compression', 'off')
• header('Content-Encoding: none') 防止 Nginx/Apache 后续压缩

用 text/event-stream 比 fetch 流更稳

EventSource 是浏览器原生支持的 SSE 协议客户端，自动重连、解析 data: 字段、处理心跳，比手写 ReadableStream + decoder 少踩一半坑。

PHP 端只需保持连接不关、每条消息以 data: ...nn 结尾：

立即学习“PHP免费学习笔记（深入）”；

header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); while (true) {     echo "data: " . json_encode(['progress' => $i++]) . "nn";     ob_flush();     flush();     sleep(1); }

JS 端直接监听：

const es = new EventSource('/stream.php'); es.onmessage = e => {     const data = json.parse(e.data);     document.getElementById('status').innerText = data.progress; };

Apache/Nginx 会吞掉 chunked 响应，必须改配置

即使 PHP 发出了分块数据，反向代理常默认启用缓冲或超时机制，导致 JS 一直等不到响应。常见表现：页面白屏几秒后一次性刷出全部内容。

Apache 需加：

• SetEnv no-gzip 1（禁用压缩）
• BrowserMatch "MSIE" no-gzip（兼容旧 IE）

Nginx 必须关掉代理缓冲：

• proxy_buffering off;
• proxy_cache off;
• proxy_http_version 1.1;（SSE 要求 HTTP/1.1）

JS 收到数据但界面没更新？检查 dom 更新时机和跨域

EventSource 只支持同源，跨域需服务端加 access-Control-Allow-Origin；另外，若 PHP 输出含换行符不规范（比如 rn 混用），EventSource 会静默丢弃整条消息。

调试建议：

• 用 curl -N http://yoursite/stream.php 直连验证 PHP 是否真正在流式输出
• 浏览器开发者工具 Network → 查看响应头是否含 Content-Type: text/event-stream
• 监听 es.onerror，很多失败根本没报错，只在控制台静默终止

SSE 不是万能的——连接数有限制，长连接对服务器压力比轮询更隐蔽，别在低配机器上开几十个并发流。