实现XHR响应分块实时显示：构建类似ChatGPT的流式用户体验

async function readStreamedResponse(url) {
    try {
        const response = await fetch(url, {
            method: "POST", // 或 "GET"，取决于API设计
            headers: {
                "Content-Type": "text/plain", // 根据实际数据类型调整
            },
        });

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

        const reader = response.body?.getReader();
        if (!reader) {
            console.error("响应体不可读或为空。");
            return;
        }

        const decoder = new TextDecoder('utf-8'); // 使用UTF-8解码文本
        let done = false;
        let receivedText = ''; // 用于累积接收到的文本

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

            if (value) {
                // 将Uint8Array数据块解码为字符串
                const chunk = decoder.decode(value, { stream: true }); // stream: true 表示可能不是完整字符
                receivedText += chunk;
                // 在此处更新UI，例如将 chunk 添加到DOM元素中
                console.log("接收到数据块:", chunk);
                // 示例：更新页面上的一个div
                // document.getElementById('output').innerText = receivedText;
            }
        }

        console.log("所有数据已接收完毕。");
    } catch (error) {
        console.error("读取流式响应时发生错误:", error);
    }
}

// 调用示例
// readStreamedResponse('/api/stream-data');

const testUrl = 'https://raw.githubusercontent.com/seductiveapps/largeJSON/master/100mb.json'; // 示例：一个大型JSON文件

async function verifyStreamedChunks(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("响应体不可读或为空。");
            return;
        }

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

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

        console.log(
            `\n流式传输验证完成：` +
            `总数据块数: ${totalChunks}, ` +
            `最小数据块大小: ${Math.round(minChunkSize / 1024)} KB, ` +
            `最大数据块大小: ${Math.round(maxChunkSize / 1024)} KB`
        );

        if (totalChunks <= 1) {
            console.warn("警告：只接收到一个或少数数据块。服务器可能正在缓冲。");
        } else {
            console.log("成功接收到多个数据块。服务器可能正在进行流式传输。");
        }

    } catch (error) {
        console.error("验证流式传输时发生错误:", error);
    }
}

// 运行验证
verifyStreamedChunks(testUrl);