文本/事件流被识别为下载 [英] text/event-stream recognised as a download
问题描述
我试图在遵循本教程的Flask项目中实现服务器推送。
我把它设置完全没有错误，但是当我进入/流页面时，Firefox将它识别为一个文件并尝试下载它。在Safari中，只是打印出发送的数据。我试着将代码适配到一个更简单的实现中，一个线程每秒产生一些数据，但是它产生了相同的结果。
我的目标是每次一个python脚本到达循环中的一个点，它将更新Web界面上的进度条。
任何帮助，这将是伟大的。
$ b 编辑：
app.py
pre $ from flask import Flask，render_template，request，Response
app = Flask（__ name__）
$ b $ event event_stream（）：
event =你好！
yield'data：％s \\\
\\\
'％event
@ app.route（'/ stream'）
def stream（）：
返回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 type =text / javascript>
var source = new EventSource（'/ stream'）;
source.onmessage = function（event）{
alert（event.data）;
};
< / script>
< / head>
< body>
< p>流式页面< / p>
< / body>
< / html>
编辑
我已经将示例应用程序上传到我的Github。看看这里： https://github.com/djdmorrison/flask-progress-example
我解决了这个问题， b
$ b
index.hmtl页面从未实际加载，因为它从未在app.py中调用过。做到这一点的方法是去一个单独的路由，例如/页，然后返回 send_file（'index / html'）。这将加载索引页面，创建链接到/流的EventSource，然后将启动app.py中的流方法，并产生正确的数据。
$ b 创建示例一个进度条，每0.2秒增加
x 并显示在网页上： app.py
@ app.route（'/ page'）
def get_page（）：
return send_file（'templates / （）：
@ app.route（'/ progress'）
def progress（）：
def generate（）：
x = 0
，而x < 100：
print x
x = x + 10
time.sleep（0.2）
yielddata：+ str（x）+\\\
\\\
return响应（generate（），mimetype ='text / event-stream'）
进度.html
<！DOCTYPE html>
< html>
< head>
< link rel =stylesheethref =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 。数据）;
}
< / script>
< / head>
< body>
< div class =progressstyle =width：50％; margin：50px;>
< / div>
< / div>
< / body>
< / html>
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\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>
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.hmtl 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) + "\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>
这篇关于文本/事件流被识别为下载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
