Flask流输出stream和前端jquery逐行输出代码示例html通用的路由vue_百度云 flask stream

作者： 分类：所有,jquery 字数：8392

'# Flask流输出stream和前端jquery逐行输出代码示例html通用的路由vue_百度云 flask stream

一、背景与问题

在Web开发中，处理大数据量的实时传输是一个常见需求。传统HTTP请求方式在处理大量数据时存在明显瓶颈：

  1. 前端需要等待整个响应体下载完毕才能处理数据
  2. 后端需要将整个数据集一次性加载到内存中
  3. 实时更新场景中需要频繁轮询造成资源浪费

Flask的流式输出机制通过生成器函数实现数据分块传输，配合前端逐行处理，可以有效解决这些问题。但实际开发中常遇到以下问题：

  • 前端无法正确解析流式响应
  • 中断处理机制缺失
  • 跨域请求时的安全隐患
  • Vue路由与Flask接口的集成问题

本篇将深入分析Flask流式传输的原理，结合jQuery和Vue的实现方式，提供完整的解决方案。

二、基本原理

1. Flask流式传输原理

Flask通过Response对象支持流式传输，关键在于使用生成器函数发送数据。每个yield语句会触发一次HTTP响应，浏览器会持续接收数据直到流结束。核心代码结构如下：

from flask import Response

def stream_data():
    for i in range(100):
        yield f"data: {i}\n\n"

2. 前端处理机制

前端通过EventSource或fetch实现流式处理，需要特别注意：

  • 使用onmessage事件处理实时数据
  • 需要处理data:前缀的格式
  • 需要处理流式传输的终止信号（如[DONE]）

3. Vue路由集成

在Vue项目中，需要配置路由规则以支持流式接口，同时处理跨域问题。典型配置如下：

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import App from './App.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/stream',
      name: 'stream',
      component: () => import('./components/StreamComponent.vue')
    }
  ]
})

三、环境准备

1. Python环境

确保已安装Flask和相关依赖：

pip install flask

2. 前端环境

使用Vue CLI创建项目：

vue create flask-stream-demo

3. 项目结构

flask-stream-demo/
├── app.py            # Flask后端
├── public/           # 静态资源
├── src/             # Vue前端
│   ├── assets/
│   ├── components/
│   │   └── StreamComponent.vue
│   ├── App.vue
│   └── main.js
└── package.json

四、核心实现

1. Flask流式接口实现

# app.py
from flask import Flask, Response, jsonify
import time

app = Flask(__name__)

@app.route('/stream')
def stream():
    def generate():
        for i in range(10):
            time.sleep(1)  # 模拟处理时间
            yield f"data: {i}\n\n"
        yield "event: done\n\n"  # 终止信号
    return Response(generate(), mimetype='text/event-stream')

@app.route('/api/data')
def get_data():
    return jsonify({
        'status': 'success',
        'message': 'Data fetched'
    })

if __name__ == '__main__':
    app.run(debug=True)

关键点解释：

  • 使用text/event-stream MIME类型
  • 生成器函数中需要包含终止信号
  • mimetype设置决定浏览器如何处理响应

2. 前端jQuery处理示例

<!-- StreamComponent.vue -->
<template>
  <div>
    <h2>流式数据接收</h2>
    <div id="output"></div>
    <button @click="startStream">开始接收</button>
  </div>
</template>

<script>
export default {
  methods: {
    startStream() {
      const output = document.getElementById('output');
      const xhr = new XMLHttpRequest();
      xhr.open('GET', 'http://localhost:5000/stream', true);
      
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          const data = xhr.responseText;
          const lines = data.split('\n');
          lines.forEach(line => {
            if (line.startsWith('data:')) {
              output.innerHTML += `<p>${line.replace('data: ', '')}</p>`;
            } else if (line === 'event: done') {
              output.innerHTML += '<p>流结束</p>';
            }
          });
        }
      };
      
      xhr.send();
    }
  }
}
</script>

关键点：

  • 使用XMLHttpRequest实现流式处理
  • 通过split('\n')解析数据行
  • 处理终止信号完成数据接收

3. Vue路由配置

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

五、完整案例：文件上传进度显示

1. 后端实现

# app.py
from flask import Flask, Response, request, jsonify
import os
import time

app = Flask(__name__)
UPLOAD_FOLDER = 'uploads'
os.makedirs(UPLOAD_FOLDER, exist_ok=True)

@app.route('/stream/upload', methods=['POST'])
def upload_stream():
    file = request.files['file']
    filename = file.filename
    file_path = os.path.join(UPLOAD_FOLDER, filename)
    
    def generate():
        with open(file_path, 'wb') as f:
            for chunk in file.stream:
                f.write(chunk)
                yield f"data: {len(chunk)} bytes received\n\n"
                time.sleep(0.1)  # 模拟处理时间
        yield "event: done\n\n"
    return Response(generate(), mimetype='text/event-stream')

2. 前端实现

<!-- StreamComponent.vue -->
<template>
  <div>
    <h2>文件上传进度</h2>
    <input type="file" @change="uploadFile">
    <div id="progress"></div>
  </div>
</template>

<script>
export default {
  methods: {
    uploadFile(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('file', file);
      
      const xhr = new XMLHttpRequest();
      xhr.open('POST', 'http://localhost:5000/stream/upload', true);
      
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          const data = xhr.responseText;
          const lines = data.split('\n');
          const progress = document.getElementById('progress');
          lines.forEach(line => {
            if (line.startsWith('data:')) {
              const bytes = parseInt(line.replace('data: ', ''));
              progress.innerHTML += `<p>${bytes} bytes received</p>`;
            } else if (line === 'event: done') {
              progress.innerHTML += '<p>上传完成</p>';
            }
          });
        }
      };
      
      xhr.send(formData);
    }
  }
}
</script>

六、源码解析

1. Flask流式传输机制

  • 生成器函数在每次yield时会触发一次HTTP响应
  • 浏览器会持续保持连接直到流结束
  • 通过设置mimetype为text/event-stream启用服务器发送事件(SSE)

2. 前端处理逻辑

  • 使用XMLHttpRequest的onreadystatechange事件
  • 通过split('\n')处理多行数据
  • 需要特别注意data:前缀的处理

3. 错误处理

  • 未处理异常可能导致连接中断
  • 需要添加try-catch块处理可能的异常
  • 可添加onerror事件处理网络中断

七、进阶使用

1. 增加重试机制

let retryCount = 0;
function retryUpload() {
  if (retryCount < 3) {
    retryCount++;
    xhr.send(formData);
  } else {
    alert('上传失败');
  }
}

2. 添加进度百分比

let totalSize = file.size;
let receivedSize = 0;
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = xhr.responseText;
    const lines = data.split('\n');
    lines.forEach(line => {
      if (line.startsWith('data:')) {
        receivedSize += parseInt(line.replace('data: ', ''));
        const percent = Math.round((receivedSize / totalSize) * 100);
        progress.innerHTML += `<p>${percent}%</p>`;
      }
    });
  }
}

3. 增加断点续传

# 在生成器中添加断点续传逻辑
def generate():
    with open(file_path, 'ab') as f:  # 使用追加模式
        for chunk in file.stream:
            f.write(chunk)
            yield f"data: {len(chunk)} bytes received\n\n"
            time.sleep(0.1)

八、性能与工程实践

1. 性能优化策略

  • 使用mmap处理大文件
  • 启用Gzip压缩
  • 使用缓存机制
  • 限制并发连接数

2. 异常处理

@app.route('/stream/upload', methods=['POST'])
def upload_stream():
    try:
        file = request.files['file']
        # ... 处理逻辑 ...
    except Exception as e:
        return Response("error: " + str(e), mimetype='text/plain'), 500

3. 安全考虑

  • 启用CORS
  • 验证文件类型
  • 限制上传大小
  • 使用CSRF保护

4. 跨域处理

from flask_cors import CORS
app = Flask(__name__)
CORS(app)  # 启用CORS

九、常见问题与踩坑

1. 常见错误

错误1： 前端无法解析流式数据
原因： 未正确处理data:前缀
解决： 使用正则表达式提取数据内容

const lines = data.split('\n');
lines.forEach(line => {
  if (line.startsWith('data:')) {
    const content = line.replace(/^data: /, '');
    // 处理content
  }
});

错误2： 流式连接提前关闭
原因： 未处理异常或未发送终止信号
解决： 在异常处理中发送终止信号

try:
    # ... 处理逻辑 ...
except Exception as e:
    yield "event: error\n\n"
    yield "data: " + str(e) + "\n\n"

错误3： 跨域请求失败
原因： 未配置CORS
解决： 使用flask-cors扩展

2. 性能瓶颈

  • 大文件处理时内存占用过高
  • 高并发时连接池不足
  • 数据解析效率低下

优化方案：

  • 使用mmap处理文件
  • 启用多线程/进程
  • 使用缓存机制
  • 增加连接池配置

十、最佳实践

1. 推荐方案

  • 使用SSE协议实现流式传输
  • 前端使用XMLHttpRequest或EventSource
  • 处理数据时使用split('\n')解析
  • 添加异常处理和终止信号
  • 前端使用requestAnimationFrame处理动画
  • 使用fetch替代XMLHttpRequest实现更简洁的代码

2. 使用建议

适用场景：

  • 实时日志监控
  • 文件上传进度显示
  • 大数据分页处理
  • 实时数据更新

不适用场景：

  • 简单数据传输
  • 需要复杂交互的页面
  • 要求高并发的场景
  • 需要严格的数据校验

十一、总结

Flask流式传输结合前端处理是一种强大的数据传输方案，特别适合需要实时更新的场景。通过生成器函数实现流式传输，配合前端逐行处理，可以有效解决大数据量传输的问题。在实际开发中需要注意异常处理、安全机制和性能优化，特别是在处理大文件或高并发场景时。

建议在以下场景优先使用该方案：

  • 实时监控系统
  • 大文件上传
  • 数据流处理
  • 通信协议实现

但要避免在以下场景使用：

  • 简单的API调用
  • 需要复杂交互的页面
  • 要求高并发的系统

通过合理的设计和优化，可以充分发挥流式传输的优势，构建高效可靠的实时通信系统。

VUE , jquery
最后修改于：2026年09月21日 14:36

评论已关闭

推荐阅读

AIGC实战——Transformer模型
2024年12月01日
python , AI , 机器学习
Socket TCP 和 UDP 编程基础（Python）
2024年11月30日
python , tcp , udp
如何使用 ChatGPT 进行学术润色？你需要这些指令
2024年12月01日
AI
最新 Python 调用 OpenAi 详细教程实现问答、图像合成、图像理解、语音合成、语音识别（详细教程）
2024年11月24日
python , AI
ChatGPT 和 DALL·E 2 配合生成故事绘本
2024年12月01日
python , AI
omegaconf，一个超强的 Python 库！
2024年11月24日
python
【视觉AIGC识别】误差特征、人脸伪造检测、其他类型假图检测
2024年12月01日
python , AI
［超级详细］如何在深度学习训练模型过程中使用 GPU 加速
2024年11月29日
python , AI , 机器学习
Python 物理引擎pymunk最完整教程
2024年11月27日
python
MediaPipe 人体姿态与手指关键点检测教程
2024年11月27日
python
深入了解 Taipy：Python 打造 Web 应用的全面教程
2024年11月26日
python
基于Transformer的时间序列预测模型
2024年11月25日
python , Matplotlib , 机器学习
Python在金融大数据分析中的AI应用（股价分析、量化交易）实战
2024年11月25日
python , Matplotlib , 机器学习
AIGC Gradio系列学习教程之Components
2024年12月01日
python , AI
Python3 `asyncio` — 异步 I/O，事件循环和并发工具
2024年11月30日
python
llama-factory SFT系列教程：大模型在自定义数据集 LoRA 训练与部署
2024年12月01日
python , AI , 机器学习
Python 多线程和多进程用法
2024年11月24日
python
Python socket详解，全网最全教程
2024年11月27日
python , http , websocket
python之plot()和subplot()画图
2024年11月26日
python , Matplotlib
理解 DALL·E 2、Stable Diffusion 和 Midjourney 工作原理
2024年12月01日
python , AI , 机器学习
Copyright © 2026 Tech Blog
All Right Reserved | 京ICP备19053165号