Question

我试图在this tutorial之后的Flask项目中实施服务器推送。

我已将所有内容设置为没有错误，但是当我转到/ stream页面时，Firefox将其识别为文件并尝试下载。在Safari中，它只打印出发送的数据。我尝试将代码调整为更简单的实现，其中一个线程每秒产生一些数据，但它产生相同的结果。

我的目标是每次python脚本到达循环中的某个点时，它都会更新Web界面上的进度条。

对此的任何帮助都会很棒。感谢。

编辑：

app.py

from flask import Flask, render_template, request, Response

app = Flask(__name__)

def event_stream():
    event = "Hello!"
    yield 'data: %s\n\n' % event

@app.route('/stream')
def stream():
    return Response(event_stream(), mimetype="text/event-stream")

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

的index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script type="text/javascript">
        var source = new EventSource('/stream');
        source.onmessage = function (event) {
             alert(event.data);
        };
    </script>

</head>
<body>

    <p>Stream page</p>

</body>
</html>

Answer 1

修改

我已将我的示例应用程序上传到我的Github。请在此处查看：https://github.com/djdmorrison/flask-progress-example

我已经解决了这个问题，但对于遇到同样问题的其他人来说：

index.html页面实际上从未加载过，因为它从未在app.py中调用过。执行此操作的方法是转到单独的路径，例如/页面，然后返回send_file('index/html')。这将加载索引页面，创建链接到/ stream的EventSource，然后在app.py中启动stream方法并生成正确的数据。

通过每0.2秒增加x并在网页上显示来创建进度条的示例：

app.py

@app.route('/page') def get_page(): return send_file('templates/progress.html') @app.route('/progress') def progress(): def generate(): x = 0 while x < 100: print x x = x + 10 time.sleep(0.2) yield "data:" + str(x) + "\n\n" return Response(generate(), mimetype= 'text/event-stream')

progress.html

<!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script> var source = new EventSource("/progress"); source.onmessage = function(event) { $('.progress-bar').css('width', event.data+'%').attr('aria-valuenow', event.data); } </script> </head> <body> <div class="progress" style="width: 50%; margin: 50px;"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div> </div> </body> </html>

text / event-stream被识别为下载

1 个答案: