JavaScript前端实现HTTP流式响应分块显示指南

async function readStreamedResponse(url) {
    try {
        const response = await fetch(url, {
            method: "POST", // 根据实际情况调整请求方法
            headers: {
                "Content-Type": "text/plain", // 根据实际情况调整Content-Type
            },
        });

        // 检查响应是否成功
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const dataStream = response.body;
        if (!dataStream) {
            console.error("响应体为空，无法读取流。");
            return;
        }

        const reader = dataStream.getReader();
        const decoder = new TextDecoder('utf-8'); // 指定UTF-8编码
        let done = false;
        let receivedText = ''; // 用于累积接收到的文本

        console.log("开始接收流式数据...");

        while (!done) {
            const { value, done: doneReading } = await reader.read();
            done = doneReading;

            if (value) {
                const chunk = decoder.decode(value, { stream: true }); // stream: true 允许部分字节序列解码
                receivedText += chunk;
                // 在这里更新UI，例如将其追加到某个div中
                console.log("接收到数据块:", chunk);
                // 示例：document.getElementById('output').innerText += chunk;
            }
        }
        console.log("流式数据接收完成。总计：", receivedText);

    } catch (error) {
        console.error("读取流式响应时发生错误:", error);
    }
}

// 示例调用 (请替换为您的流式接口URL)
// readStreamedResponse('https://your-streaming-api.com/stream');

async function diagnoseStreamBuffering(url) {
    console.log(`正在从 ${url} 诊断流式缓冲...`);
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const reader = response.body?.getReader();
        if (!reader) {
            console.error("响应体为空或无法获取Reader。");
            return;
        }

        let value, done;
        let minChunkSize = Infinity;
        let maxChunkSize = 0;
        let totalChunks = 0;
        let totalBytes = 0;

        do {
            ({ value, done } = await reader.read());
            if (value) {
                const currentChunkSize = value.length;
                totalBytes += currentChunkSize;
                totalChunks++;
                minChunkSize = Math.min(minChunkSize, currentChunkSize);
                maxChunkSize = Math.max(maxChunkSize, currentChunkSize);
                console.log(`接收到数据块，大小: ${currentChunkSize} 字节`);
            }
        } while (!done);

        console.log("诊断完成。");
        console.log(`总共接收到 ${totalChunks} 个数据块。`);
        console.log(`最小数据块大小: ${minChunkSize} 字节 (${Math.round(minChunkSize / 1024)} KB)`);
        console.log(`最大数据块大小: ${maxChunkSize} 字节 (${Math.round(maxChunkSize / 1024)} KB)`);
        console.log(`总字节数: ${totalBytes} 字节`);

        if (totalChunks <= 1 && totalBytes > 0) {
            console.warn("警告: 仅接收到一个或少量数据块，这可能表明服务器正在缓冲。");
        } else if (totalChunks > 1) {
            console.log("成功接收到多个数据块，服务器可能正在进行流式传输。");
        }

    } catch (error) {
        console.error("诊断流式缓冲时发生错误:", error);
    }
}

// 示例调用：可以使用一个已知的大文件URL来测试
// diagnoseStreamBuffering('https://raw.githubusercontent.com/seductiveapps/largeJSON/master/100mb.json');