PHP+HTML实现流式输出效果的示例详解

说真的，流式输出在现在的AI应用里太常见了——智能客服、实时翻译、大模型对话，几乎都在用。这篇文章就带你一步步实现一个基于PHP和HTML的流式输出效果，效果演示先走起。

效果演示

后端代码

PHP这边其实并不复杂，核心就是绕开默认的缓冲机制，让数据能一点一点地流出去。下面这段代码就是实现的关键：

前端代码
前端负责接收并展示这些流式数据，用Fetch API的ReadableStream处理起来非常顺手：
                
    
    
                发送    

运行测试
项目根目录下打开命令行，输入以下命令启动服务：
php -S 127.0.0.1:6789
然后打开浏览器，访问 127.0.0.1:6789，在输入框里随便打点什么，发送后就能看到流式输出的效果了——文字会一行一行地蹦出来，很像真人打字。

原理解析
1. 什么是流式输出
流式输出，说白了就是在数据生成的同时逐步发送到客户端，而不是等所有内容都处理完再一次性打包发送。这就像水管里的水，不是等水桶装满才倒出来，而是边接水边流。实时聊天、AI对话这些场景，靠的就是这个机制。
2. PHP怎么做到流式输出
PHP默认是采用缓冲输出的，脚本执行完毕才会把内容一股脑儿发给浏览器——这显然不是我们想要的。所以，调整输出缓冲设置就成了关键。具体做法是：先关闭输出缓冲，然后通过 ob_flush() 和 flush() 这对组合，强制把当前缓冲区里的内容发送出去。注意，ob_flush() 负责刷新PHP内部的缓冲，flush() 则负责刷新Web服务器层面的缓冲，缺一不可。
3. 前端处理数据的接收和显示
前端这边，核心是监听服务器的数据流。每次收到一块数据，就立刻更新页面上的内容，而不是等全部数据到齐了再渲染。这次实践用的是Fetch API的ReadableStream接口，它支持逐块读取响应体，然后通过流式读取的方式，把数据一块一块地追加到聊天界面上。这样一来，用户体验就是实时的、流畅的，完全不会有卡顿感。