Question

我有一个生成数据并实时流式传输的视图。我无法弄清楚如何将这些数据发送到我可以在我的HTML模板中使用的变量。我当前的解决方案只是在数据到达时将数据输出到空白页面，这有效，但我希望将其包含在带格式的较大页面中。如何在数据流式传输到页面时更新，格式化和显示数据？

import flask
import time, math

app = flask.Flask(__name__)

@app.route('/')
def index():
    def inner():
        # simulate a long process to watch
        for i in range(500):
            j = math.sqrt(i)
            time.sleep(1)
            # this value should be inserted into an HTML template
            yield str(i) + '<br/>\n'
    return flask.Response(inner(), mimetype='text/html')

app.run(debug=True)

Answer 1

您可以在响应中流式传输数据，但无法按照描述的方式动态更新模板。模板在服务器端呈现一次，然后发送到客户端。您需要使用JavaScript来读取流式响应并在客户端输出数据。

使用XMLHttpRequest向将流式传输数据的端点发出请求。然后定期从流中读取，直到完成。

此示例假定一种非常简单的消息格式：单行数据，后跟换行符。只要有一种方法可以识别每条消息，您当然可以根据需要进行解析。例如，您可以返回JSON对象并在客户端上对其进行解码。

from time import sleep
from flask import Flask, render_template
from math import sqrt

app = Flask(__name__)

@app.route('/')
def index():
    # render the template (below) that will use JavaScript to read the stream
    return render_template('index.html')

@app.route('/stream_sqrt')
def stream():
    def generate():
        for i in range(500):
            yield '{}\n'.format(sqrt(i))
            sleep(1)

    return app.response_class(generate(), mimetype='text/plain')

app.run()

<p>This is the latest output: <span id="latest"></span></p>
<p>This is all the output:</p>
<ul id="output"></ul>
<script>
    var latest = document.getElementById('latest');
    var output = document.getElementById('output');

    var xhr = new XMLHttpRequest();
    xhr.open('GET', '{{ url_for('stream') }}');
    xhr.send();
    var position = 0;

    function handleNewData() {
        // the response text include the entire response so far
        // split the messages, then take the messages that haven't been handled yet
        // position tracks how many messages have been handled
        // messages end with a newline, so split will always show one extra empty message at the end
        var messages = xhr.responseText.split('\n');
        messages.slice(position, -1).forEach(function(value) {
            latest.textContent = value;  // update the latest value in place
            // build and append a new item to a list to log all output
            var item = document.createElement('li');
            item.textContent = value;
            output.appendChild(item);
        });
        position = messages.length - 1;
    }

    var timer;
    timer = setInterval(function() {
        // check the response for new data
        handleNewData();
        // stop checking once the response has ended
        if (xhr.readyState == XMLHttpRequest.DONE) {
            clearInterval(timer);
            latest.textContent = 'Done';
        }
    }, 1000);
</script>

Answer 2

晚了5年，但这实际上可以按照您最初尝试的方式完成，javascript完全没有必要（编辑：接受答案的作者在我写完这篇文章后添加了iframe部分）。您只需要将输出嵌入为<iframe>：

from flask import Flask, render_template
import time, math

app = flask.Flask(__name__)

@app.route('/content') # render the content a url differnt from index
def content():
    def inner():
        # simulate a long process to watch
        for i in range(500):
            j = math.sqrt(i)
            time.sleep(1)
            # this value should be inserted into an HTML template
            yield str(i) + '<br/>\n'
    return flask.Response(inner(), mimetype='text/html')

@app.route('/')
def index():
    return render_template('index.html.jinja') # render a template at the index. The content will be embedded in this template

app.run(debug=True)

然后，'index.html.jinja'文件将包含一个<iframe>，其内容网址为src，如下所示：

<!doctype html>
<head>
    <title>Title</title>
</head>
<body>
    <div>
        <iframe frameborder="0" noresize="noresize"
     style='background: transparent; width: 100%; height:100%;' src="{{ url_for('content')}}"></iframe>
    </div>
</body>

在呈现用户提供的数据时，render_template_string()应该用于呈现内容，以避免注入攻击。但是，我将其排除在示例之外，因为它增加了额外的复杂性，超出了问题的范围，与OP不相关，因为他没有流式传输用户提供的数据，并且与庞大的数据无关大多数人看到这篇文章是因为流传输用户提供的数据是一个极端的情况，很少有人会做。

显示更新时从Flask视图流式传输的数据

2 个答案: