Flask流输出stream和前端jquery逐行输出代码示例html通用的路由vue源码

lumengabc

已于 2024-03-26 17:23:20 修改

阅读量427

点赞数 1

文章标签： python jquery

于 2024-03-25 17:45:22 首次发布

本文链接：https://blog.csdn.net/webnoties/article/details/137020888

版权

本文展示了如何在前端使用jQuery、Vue框架以及PythonFlask后端创建一个实时流式数据的例子，包括HTML结构、JavaScript代码片段和后端处理GET请求以发送动态数据的方法。

摘要由CSDN通过智能技术生成

前端jquery代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Streaming Response Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <textarea id="output" rows="10" cols="50"></textarea>
    <input type="number" id="quantity" min="1" placeholder="Enter quantity">
    <button id="submit">Submit</button>

    <script>
        $(document).ready(function() {
            var output = $('#output');
            var quantityInput = $('#quantity');
            var submitButton = $('#submit');

            submitButton.on('click', function() {
                var quantity = parseInt(quantityInput.val());

                if (isNaN(quantity) || quantity <= 0) {
                    alert("Please enter a valid quantity.");
                    return;
                }

                fetch('/stream_data?quantity=' + quantity)
                    .then(response => {
                        const reader = response.body.getReader();
                        return new ReadableStream({
                            start(controller) {
                                function push() {
                                    reader.read().then(({ done, value }) => {
                                        if (done) {
                                            controller.close();
                                            return;
                                        }
                                        controller.enqueue(value);
                                        push();
                                    });
                                }
                                push();
                            }
                        });
                    })
                    .then(stream => {
                        const decoder = new TextDecoder();
                        const reader = stream.getReader();

                        function processText({ done, value }) {
                            if (done) return;
                            const text = decoder.decode(value, { stream: true });
                            console.log("received data -", text);
                            output.val(output.val() + text);
                            reader.read().then(processText);
                        }

                        reader.read().then(processText);
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
            });
        });
    </script>
</body>
</html>

jquery2示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Streaming Response Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="app">
        <textarea id="output" rows="10" cols="50"></textarea>
        <input type="number" id="quantity" min="1" placeholder="Enter quantity">
        <button id="submit">Submit</button>
    </div>

    <script>
        $(document).ready(function(){
            $('#submit').click(function(){
				var output = $('#output');
                var quantity = $('#quantity').val();
                fetch(`/stream_data?quantity=${quantity}`, {
                    method: "GET",
                    headers: {
                        "Content-Type": "application/json",
                    }
                })
                .then(response => {
                    const reader = response.body.getReader();
                    const decoder = new TextDecoder();
                    
                    reader.read().then(function processText({ done, value }) {
                        if (done) {
                            //output.val('');
                            return;
                        }
                        const text = decoder.decode(value, { stream: true }).replace('undefined', '');
                        console.log("received data -", text);
                        
						output.val(output.val() + text);
                        reader.read().then(processText);
                    });
                })
                .catch(error => {
                    console.error('Error:', error);
                });
            });
        });
    </script>
</body>
</html>

vue代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Streaming Response Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <textarea id="output" rows="10" cols="50">{{ outputText }}</textarea>
        <input type="number" id="quantity" min="1" v-model.number="quantity" placeholder="Enter quantity">
        <button @click="submit">Submit</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                outputText: '',
                quantity: 1
            },
            methods: {
                async submit() {
                    try {
                        const response = await fetch(`/stream_data?quantity=${this.quantity}`, {
                            method: "GET",
                            headers: {
                                "Content-Type": "application/json",
                            }
                        });

                        if (!response.body) return;

                        const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
                        while (true) {
                            const { value, done } = await reader.read();
                            if (done) break;
                            const text = value?.replace('undefined', '');
                            console.log("received data -", text);
                            this.outputText += text;
                        }
                    } catch (error) {
                        console.error('Error:', error);
                    }
                }
            }
        });
    </script>
</body>
</html>

后端python接口：

from flask import Flask, Response, send_from_directory, request
import time

app = Flask(__name__, static_folder='static')

# @app.route('/')
# def index():
#     return app.send_static_file('index.html')

@app.route('/<html_file>')
def serve_html(html_file):
    return send_from_directory(app.static_folder, html_file)



@app.route('/stream_data')
def stream_data():
    quantity = int(request.args.get('quantity', 10))  # 获取数量值，默认为10
    if quantity <= 0:
        return "Invalid quantity value", 400  # 返回400错误

    def generate():
        for i in range(quantity):
            yield f"Data point {i}\n"
            time.sleep(1)  # 模拟生成数据的延迟

    return Response(generate(), mimetype="text/event-stream")

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8666)

其他。