Flutter 仅在流末尾读取 FastAPI StreamResponse。知道我的实施中可能存在什么问题吗？

Question

概述

我目前正在试验 Stream 功能，以便稍后将其与我正在构建的软件集成。我正在尝试将信息从使用 FastAPI 构建的后端传输到使用 Flutter 构建的前端。 我的后端有一个 GET 端点，我从前端应用程序请求流数据。端点集成本身运行良好，因此问题在于流功能的实现。

如果有任何我未在此处提供但可能需要更好地理解问题的信息，请随时要求我提供。这个功能对我来说非常重要，我很想让它发挥作用:)

我将在下面解释我遇到的问题。

问题

根据我在互联网上的研究，使用 FastAPI StreamResponse 可以让我将信息包发送到一个流，该流将由我的应用程序的前端从 GET 请求读取到端点。

后端通过 StreamResponse 正确地定期发送信息，但我的前端似乎冻结了，直到所有信息都到达，并且我关闭了流。

FastAPI 后端端点

我编写的用于通过 Stream 发送信息的后端代码。

Flutter 前端请求

向后端端点发出请求的代码。为了简单起见，当我单击 ElevatedButton 时会调用此函数。

视频演示

左边是我的后端控制台日志，右边是我的 Flutter 日志。通过 Stream 传输信息时进行了丝网打印。

左边是我的后端控制台日志，右边是我的 Flutter 日志。屏幕打印是在通过 Stream 传输信息结束并关闭它时进行的。

尝试过的方法

我尝试了两种不同的方法来实现此功能，并且都具有相同的结果（Flutter 在传输结束时接收所有数据包，或 websocket 连接关闭）：

• Websocket 方法
• 流式方法

资源阅读：

• 使用 FastAPI 和 OpenCV 的视频流应用程序
• 在 FastAPI 中从摄像头流式传输视频会导致第一帧后图像冻结
• 其他 stackoverflow（或 reddit，不记得了）关于 websocket 数据传输的帖子。链接丢了

Answer 1

发生这种情况可能是因为您在 for 循环中使用了

await

，它等待

response.stream

解析（在流完成时发生）。

使用

await

代替数据。例如：

print((await data))

也可以直接添加代码片段，而不是添加代码截图