文本/事件流被识别为下载答案

【问题标题】：text/event-stream recognised as a download文本/事件流被识别为下载
【发布时间】：2014-12-18 07:46:21
【问题描述】：

我正在尝试在 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>

【问题讨论】：

你能在这里添加一个简化的例子来演示这个问题吗？
我添加了一个小例子。

标签： python flask server-push

【解决方案1】：

编辑

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

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

index.html 页面从未真正加载，因为它从未在 app.py 中调用。这样做的方法是转到单独的路由，例如 /page，然后返回 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>

【讨论】：

如果其他人遇到流问题（因为 onmessage 事件仅在流关闭时才被触发），请考虑防病毒软件作为可能的原因（请参阅此帖子以供参考：stackoverflow.com/questions/12978466/…)。很难弄清楚那个，希望其他人不需要浪费时间调查这个蹩脚的问题......