识别为下载的文本/事件流 [英] text/event-stream recognised as a download

查看：23
本文介绍了识别为下载的文本/事件流的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试按照 本教程 在我的 Flask 项目中实现服务器推送.

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

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

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

app.py

from flask import Flask, render_template, request, Responseapp = Flask(__name__)def event_stream():event = "你好！"产生数据:%s

"% 事件@app.route('/stream')定义流():返回响应(event_stream(), mimetype="text/event-stream")如果 __name__ == "__main__":app.debug = Trueapp.run(线程=真)

index.html

<头><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 = 函数(事件){警报(事件.数据)；};<身体><p>流页面</p>

解决方案

EDIT

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

<小时>

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

index.html 页面从未真正加载，因为它从未在 app.py 中调用.这样做的方法是转到单独的路由，例如/page，然后返回 send_file('index/html').这将加载索引页面，创建链接到/stream 的 EventSource，然后将启动 app.py 中的流方法并产生正确的数据.

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

app.py

@app.route('/page')def get_page():return send_file('templates/progress.html')@app.route('/进度')定义进度():定义生成():x = 0当 x <100:打印 xx = x + 10时间.睡眠(0.2)产生数据:"+ str(x) +

"返回响应(生成()，mimetype = '文本/事件流')

progress.html

<头><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><脚本>var source = new EventSource("/progress");source.onmessage = 函数(事件){$('.progress-bar').css('width', event.data+'%').attr('aria-valuenow', event.data);}<身体><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>

I'm trying to implement server push in my Flask project following this tutorial.

I've set it all up with no errors, however when I go to the /stream page, Firefox recognizes it as a file and tries to download it. In Safari it just prints out the data sent. I tried adapting the code to a simpler implementation, where a thread just yields some data each second, however it produced the same results.

My goal is for each time a python script reaches a point in a loop, it will update a progress bar on the web interface.

Any help with this would be great. Thanks.

Edit:

app.py

from flask import Flask, render_template, request, Response

app = Flask(__name__)

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

' % 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>

解决方案

EDIT

I've uploaded my sample application to my Github. Check it out here: https://github.com/djdmorrison/flask-progress-example

I've worked it out, but for anyone else who gets the same problem:

The index.html page never actually loads, as it's never called in app.py. The way to do it is by going to a separate route, /page for example, and then returning send_file('index/html'). This will load the index page, create the EventSource linked to /stream, which will then start the stream method in app.py and yield the correct data.

Example which creates a progress bar by increasing x every 0.2 seconds and displaying it on the webpage:

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) + "

"
    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>

这篇关于识别为下载的文本/事件流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
Python最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆