别再问小程序怎么搞流式输出了！用uni-app的enableChunked+PHP后端，我帮你把坑都踩完了

山清水秀iOS

597人浏览 · 2026-05-28 09:17:17

山清水秀iOS · 2026-05-28 09:17:17 发布

从零实现uni-app小程序流式输出：避坑指南与实战解析

第一次在小程序里看到ChatGPT那种逐字输出的效果时，我盯着屏幕研究了半天——这玩意儿到底怎么做到的？官方文档明明写着不支持Stream啊！经过两周的折腾和无数个凌晨三点的调试，我终于摸清了uni-app+PHP实现流式输出的完整方案。下面这些经验，希望能让你少走我走过的弯路。

1. 环境准备与核心原理

流式传输的本质是 分块编码传输 （Chunked Transfer Encoding）。与传统一次性返回完整响应不同，服务器会将数据分成多个"块"逐步发送。对于uni-app小程序端，关键配置在于 enableChunked:true 参数和正确的数据解码方式。

1.1 必备工具清单

Uni-app项目（HBuilder X 3.6+）
PHP 7.4+ 服务器（需确保支持 ob_flush() ）
Postman（用于接口调试）
Chrome开发者工具（分析网络请求）

1.2 技术方案对比

方案类型	优点	缺点
WebSocket	实时性高	需要额外端口配置
长轮询	兼容性好	资源消耗大
分块传输	无需额外协议	需要特殊解码处理

提示：选择分块传输方案时，务必确认服务器支持HTTP/1.1协议。部分CDN会默认禁用chunked编码。

2. PHP后端配置详解

2.1 响应头关键设置

header('Content-Type: text/plain'); 
header('Transfer-Encoding: chunked');
header('X-Accel-Buffering: no'); // 禁用Nginx缓冲
header('Cache-Control: no-cache');
ob_end_flush(); // 关闭输出缓冲

2.2 数据分块发送实战

function sendChunk($data) {
    echo sprintf("%x\r\n", strlen($data));
    echo $data."\r\n";
    ob_flush();
    flush();
}

// 示例：模拟AI逐字输出
$text = "你好，我是AI助手...";
for ($i = 0; $i < strlen($text); $i++) {
    sendChunk(json_encode([
        'content' => substr($text, $i, 1)
    ]));
    usleep(100000); // 模拟处理延迟
}

// 结束标记
echo "0\r\n\r\n";

常见踩坑点：

忘记发送结束标记 0\r\n\r\n 导致前端无限等待
Nginx默认会缓冲chunked响应，需要额外配置
ob_flush() 和 flush() 必须同时调用

3. Uni-app前端实现

3.1 请求配置关键代码

const requestTask = uni.request({
    url: 'https://api.example.com/stream',
    method: 'POST',
    enableChunked: true,
    responseType: 'arraybuffer', // 必须设置为arraybuffer
    timeout: 30000 // 适当延长超时时间
});

3.2 数据解码最佳实践

requestTask.onChunkReceived((res) => {
    // 方案1：官方推荐方式（HBuilder 3.6.18+）
    const text = new TextDecoder('utf-8').decode(res.data);
    
    // 方案2：兼容方案
    const uint8Array = new Uint8Array(res.data);
    let str = '';
    uint8Array.forEach((byte) => {
        str += String.fromCharCode(byte);
    });
    const content = decodeURIComponent(escape(str));
    
    // 处理业务逻辑
    this.updateChatContent(content);
});

实测遇到的编码问题：

直接使用 arrayBufferToString 会出现中文乱码
部分Android设备需要特殊URI解码处理
数据包不完整时JSON解析会报错

4. 调试技巧与性能优化

4.1 常见问题排查表

现象	可能原因	解决方案
接收不到数据	服务器未正确flush	检查 `ob_flush()` 调用
中文乱码	解码方式不正确	使用TextDecoder API
连接提前关闭	Nginx超时设置过短	调整 `proxy_read_timeout`
数据堆积延迟	前端处理速度慢	优化渲染逻辑

4.2 性能优化建议

控制分块频率 ：每200-300ms发送一次数据包
前端防抖处理 ：避免频繁触发UI更新
心跳检测机制 ：每10秒发送空包保持连接
错误重试策略 ：网络中断时自动恢复

// 示例：优化后的前端处理
let buffer = '';
requestTask.onChunkReceived((res) => {
    const text = new TextDecoder().decode(res.data);
    buffer += text;
    
    // 累积到完整消息再处理
    if (text.endsWith('\n')) {
        this.processCompleteMessage(buffer);
        buffer = '';
    }
});

5. 进阶应用场景

5.1 结合WebSocket的混合方案

对于需要双向通信的场景，可以：

使用WebSocket建立初始连接
通过HTTP分块传输大数据流
用WebSocket发送控制指令

5.2 大文件分块上传

同样的技术原理也可用于文件上传：

function uploadFile(file) {
    const chunkSize = 1024 * 64;
    let offset = 0;
    
    const uploadNextChunk = () => {
        const chunk = file.slice(offset, offset + chunkSize);
        // 发送分块数据...
        offset += chunkSize;
        if (offset < file.size) {
            setTimeout(uploadNextChunk, 100);
        }
    };
    
    uploadNextChunk();
}

6. 安全防护方案

6.1 必备安全措施

Token验证 ：每个分块请求携带签名
频率限制 ：防止DDOS攻击
数据加密 ：敏感内容使用AES加密
超时控制 ：闲置连接自动关闭

// PHP实现简单令牌验证
$expectedToken = hash_hmac('sha256', $timestamp, $secretKey);
if ($_SERVER['HTTP_X_TOKEN'] !== $expectedToken) {
    header('HTTP/1.1 403 Forbidden');
    echo "0\r\n\r\n";
    exit;
}