前后端流式传输数据

前端

// 发起POST请求
fetch("https://service.ai.c.dev/chat", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    // 这里可以添加其他的请求选项
    // body: JSON.stringify({key: 'value'})
})
    .then((response) => {
        // 返回可读流
        return response.body.getReader();
    })
    .then((reader) => {
        // 读取数据并处理
        return readAndProcess(reader);
    })
    .catch((error) => {
        console.error("Error:", error);
    });


function readAndProcess(reader) {
    // 递归读取并处理数据
    return reader.read().then(({ done, value }) => {
        if (done) {
            // 处理完成
            console.log("Stream processing complete");
            return;
        }


        // 处理当前块的数据
        console.log("Received:", value);


        // 继续递归读取下一块数据
        return readAndProcess(reader);
    });
}

后端

// 流式输出响应
HttpRequest::streamingResponse(function() use ($data){ // use关键字用于将外部变量引入到匿名函数或闭包体内

    echo "test1";
    ob_flush();
    flush();

    sleep(1);


    echo "test2";
    ob_flush();
    flush();
});

Nginx配置

server {

    # 使用 HTTP/2 版本，以支持流式传输
    listen 443 ssl http2;
    server_name example.com;

    # 启用 keepalive，以确保客户端和服务器之间的连接保持活跃状态，有助于支持长连接
    keepalive_timeout 65;
    keepalive_requests 1000;

    # 关闭缓冲，以确保数据及时传输
    proxy_buffering off;

    # 设置适当的超时时间，以便适应长连接和流式传输
    proxy_connect_timeout 300;
    proxy_send_timeout 300;
    proxy_read_timeout 300;
    send_timeout 300;

     # 启用 chunked 传输编码，以允许服务器以块的形式传输数据给客户端，而不需要等到整个响应体完全生成完毕
    chunked_transfer_encoding on;

     # 其他 server 配置...
}