Flutter仅在FastAPI流结束时读取StreamingResponse问题求助

我正在测试流功能，打算之后集成到自己开发的软件里。目前尝试把FastAPI搭建的后端信息流式传输到Flutter前端，后端的GET接口已经正常集成，但流功能的实现出了问题。

如果有我没提到但能帮助排查问题的信息，随时告诉我。这个功能对我很重要，希望能解决它：)

下面详细说明遇到的问题。

根据网上调研，FastAPI的StreamingResponse可以通过GET请求向前端发送数据包。

后端能通过StreamingResponse每隔一段时间正确发送信息，但前端似乎会卡住，直到所有信息发送完毕、流关闭后才接收数据。

FastAPI后端接口 #

我写的流发送信息后端代码：

async def fake_streamer():
    for _ in range(10):
        print("Sending frame")
        yield b"Hey!"
        time.sleep(1)
    
@app.get("/camera/{camera_id}")
def read_camera(camera_id: int):
    return StreamingResponse(fake_streamer())

Flutter前端请求 #

点击ElevatedButton时调用的请求后端接口代码（简化测试用）：

void fetchData() async {
    final url = Uri.parse('http://127.0.0.1:8001/camera/30');
    final client = http.Client();

    try {
      final request = http.Request('GET', url);
      final response = await client.send(request);
      await for (var data in response.stream.transform(utf8.decoder)) {
        print(data);
      }
    } catch (e) {
      print(e);
    } finally {
      client.close();
    }
  }

演示截图 #

• 流传输过程中截图：左侧为后端控制台日志，右侧为Flutter日志
  

• 流传输结束并关闭后截图：左侧为后端控制台日志，右侧为Flutter日志
  

我试过两种实现方式，结果都一样（Flutter仅在传输结束后接收全部数据包，或WebSocket连接关闭）：

• WebSocket方案
• 流方案

参考资料：

• Video Streaming App using FastAPI and OpenCV
• Streaming video from camera in FastAPI results in frozen image after first frame
• 其他关于WebSocket数据传输的Stack Overflow（或Reddit）帖子，链接已丢失

根据建议尝试了一种避免等待整个流完成的解决方案，但行为没有改变：

...
      final request = http.Request('GET', url);
      final response = await client.send(request);
      response.stream.listen((var data){
        print(data);
      });
...

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