Flutter中如何以流的形式读取HTTP文本响应？

后端Node.js实现（以Express为例） #

要让后端以流的形式返回文本，核心是用response.write()分块发送数据，并设置响应头告知客户端这是流式传输：

const express = require('express');
const app = express();

app.get('/stream-text', (req, res) => {
  // 配置响应头，启用分块传输编码
  res.setHeader('Content-Type', 'text/plain; charset=utf-8');
  res.setHeader('Transfer-Encoding', 'chunked');

  // 模拟分块生成文本（实际场景可替换为数据库查询、文件读取等实时数据）
  let chunkIndex = 0;
  const sendInterval = setInterval(() => {
    if (chunkIndex >= 5) {
      clearInterval(sendInterval);
      res.end(); // 结束流传输
      return;
    }
    const chunk = `第${++chunkIndex}段流式文本内容\n`;
    res.write(chunk); // 发送单块文本
  }, 1000);
});

app.listen(3000, () => console.log('服务器运行在3000端口'));

前端实时接收并展示 #

前端需要通过流式API读取响应，每收到一块文本就立即更新页面，以下是两种常见实现方式：

原生JavaScript实现 #

// 获取页面上用于展示文本的元素
const displayArea = document.getElementById('stream-display');
let accumulatedText = '';

fetch('/stream-text')
  .then(response => {
    const reader = response.body.getReader();
    const textDecoder = new TextDecoder('utf-8');

    // 递归读取文本块
    function readNextChunk() {
      return reader.read().then(({ done, value }) => {
        if (done) {
          console.log('流式传输完成');
          return;
        }
        // 解码二进制数据为文本
        const chunk = textDecoder.decode(value);
        accumulatedText += chunk;
        // 实时更新页面内容
        displayArea.textContent = accumulatedText;
        return readNextChunk();
      });
    }

    return readNextChunk();
  })
  .catch(error => console.error('流式请求失败:', error));

React组件实现 #

import { useState, useEffect } from 'react';

export default function StreamTextDisplay() {
  const [displayText, setDisplayText] = useState('');

  useEffect(() => {
    let textBuffer = '';
    const fetchStream = async () => {
      try {
        const response = await fetch('/stream-text');
        const reader = response.body.getReader();
        const decoder = new TextDecoder('utf-8');

        while (true) {
          const { done, value } = await reader.read();
          if (done) break;
          const chunk = decoder.decode(value);
          textBuffer += chunk;
          // 更新状态，触发页面重新渲染
          setDisplayText(textBuffer);
        }
      } catch (err) {
        console.error('请求出错:', err);
      }
    };

    fetchStream();
  }, []);

  return <div className="stream-content">{displayText}</div>;
}

关键注意点 #

• 后端必须设置Transfer-Encoding: chunked响应头，确保客户端识别为流式响应
• 前端使用ReadableStreamAPI读取响应体，避免等待完整响应后再渲染
• 前后端编码需保持一致（如UTF-8），防止文本乱码

内容的提问来源于stack exchange，提问作者Sonu Mohammad