Flask实现类似ChatGPT的实时数据流传输,核心是利用服务端流式响应配合Server Sent Events(SSE)协议,让服务端可以持续向客户端推送数据片段,无需客户端反复发起请求。

核心原理说明
传统的HTTP请求是客户端发送请求,服务端返回完整响应后连接关闭,无法做到持续推送数据。而流式响应会保持连接打开,服务端可以分多次向客户端返回数据。SSE是专门为实现服务端到客户端的单向实时推送设计的协议,规范了数据格式,浏览器原生支持EventSource接口来接收SSE数据,无需额外引入第三方库。
服务端实现步骤
1. 基础Flask应用配置
首先需要创建Flask应用,然后编写一个支持流式响应的接口。Flask中可以通过生成器函数返回流式响应,同时需要设置正确的响应头,告诉浏览器这是SSE类型的数据。
from flask import Flask, Response
import time
app = Flask(__name__)
# 模拟生成对话内容的生成器函数
def generate_dialog_stream():
# 模拟ChatGPT的分段输出内容
content_list = [
"你好",
",我是",
"一个",
"AI助手",
",有什么",
"可以帮你的吗?"
]
for item in content_list:
# SSE协议要求每条数据以data: 开头,以两个换行符结尾
yield f"data: {item}\n\n"
# 模拟生成每个片段的延迟
time.sleep(0.5)
# 发送结束标识
yield "data: [DONE]\n\n"
@app.route("/stream_dialog")
def stream_dialog():
# 设置响应头,指定内容类型为SSE,字符编码为utf-8
return Response(
generate_dialog_stream(),
mimetype="text/event-stream",
headers={"Cache-Control": "no-cache", "Connection": "keep-alive"}
)
if __name__ == "__main__":
app.run(debug=True, port=5000)2. 关键配置说明
- mimetype设置为text/event-stream:这是SSE协议规定的内容类型,浏览器识别到该类型后会持续监听数据推送。
- 响应头配置:Cache-Control设置为no-cache避免浏览器缓存响应,Connection设置为keep-alive保持连接不关闭。
- 数据格式规范:每条推送的数据必须以
data:开头,末尾紧跟两个换行符\n\n,这是SSE协议的固定格式要求,缺少会导致前端无法正确解析数据。
前端接收实现
浏览器原生支持EventSource接口,可以直接用来接收SSE推送的数据,无需引入额外的库。下面是简单的前端实现代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>实时对话示例</title>
</head>
<body>
<div id="dialog_content"></div>
<script>
// 创建EventSource实例,连接到服务端的流式接口
const eventSource = new EventSource("http://127.0.0.1:5000/stream_dialog");
const contentDiv = document.getElementById("dialog_content");
// 监听消息事件,接收服务端推送的数据
eventSource.onmessage = function(event) {
const data = event.data;
// 判断是否收到结束标识
if (data === "[DONE]") {
eventSource.close();
return;
}
// 将收到的内容片段追加到页面
contentDiv.innerText += data;
};
// 监听错误事件
eventSource.onerror = function(error) {
console.error("SSE连接出现错误:", error);
eventSource.close();
};
</script>
</body>
</html>注意事项
- Flask的开发服务器默认是单线程的,测试时如果有多个客户端连接可能会出现阻塞,生产环境建议使用Gunicorn等支持异步的WSGI服务器,并且需要配置worker类型为支持长连接的类型。
- SSE是单向推送协议,只能服务端向客户端发送数据,如果需要客户端向服务端发送数据,需要额外配合普通HTTP请求实现。
- 如果服务端生成内容的过程中出现异常,需要在生成器函数中捕获异常,并且向客户端推送错误提示后再关闭连接,避免前端一直处于等待状态。
FlaskServer_Sent_Eventsstreaming_responsereal_time_data修改时间:2026-06-02 22:59:50