导读:本期聚焦于小伙伴创作的《Flask如何实现类似ChatGPT的实时数据流传输?》,敬请观看详情,探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《Flask如何实现类似ChatGPT的实时数据流传输?》有用,将其分享出去将是对创作者最好的鼓励。

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

Flask如何实现类似ChatGPT的实时数据流传输?

核心原理说明

传统的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

免责声明:​ 已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰,观点力求客观中立。本站旨在免费分享,内容仅供个人学习、研究或参考使用。若引用了第三方作品,版权归原作者所有。如内容涉及您的权益,请联系我们处理。
内容垂直聚焦
专注技术核心技术栏目,确保每篇文章深度聚焦于实用技能。从代码技巧到架构设计,为用户提供无干扰的纯技术知识沉淀,精准满足专业提升需求。
知识结构清晰
覆盖从开发到部署的全链路。AI、前端、编程、数据库、服务器、建站、系统层层递进,构建清晰学习路径,帮助用户系统化掌握开发与运维所需的核心技术。
深度技术解析
拒绝泛泛而谈,深入技术细节与实践难点。无论是数据库优化还是服务器配置,均结合真实场景与代码示例进行剖析,致力于提供可直接应用于工作的解决方案。
专业领域覆盖
精准对应开发生命周期。从前端界面到后端编程,从数据库操作到服务器运维,形成完整闭环,一站式满足全栈工程师和运维人员的技术需求。
即学即用高效
内容强调实操性,步骤清晰、代码完整。用户可根据教程直接复现和应用于自身项目,显著缩短从学习到实践的距离,快速解决开发中的具体问题。
持续更新保障
专注既定技术方向进行长期、稳定的内容输出。确保各栏目技术文章持续更新迭代,紧跟主流技术发展趋势,为用户提供经久不衰的学习价值。