2014-10-22 10 views
7

Ich versuche Server Push in meinem Flask-Projekt nach this tutorial zu implementieren.text/event-stream als Download erkannt

Ich habe alles ohne Fehler eingestellt, aber wenn ich auf die Seite/stream gehe, erkennt Firefox es als Datei und versucht es herunterzuladen. In Safari werden nur die gesendeten Daten ausgedruckt. Ich habe versucht, den Code an eine einfachere Implementierung anzupassen, bei der ein Thread nur einige Daten pro Sekunde liefert, jedoch die gleichen Ergebnisse liefert.

Mein Ziel ist, dass jedes Mal, wenn ein Python-Skript einen Punkt in einer Schleife erreicht, eine Fortschrittsleiste auf der Weboberfläche aktualisiert wird.

Jede Hilfe mit diesem wäre großartig. Vielen Dank.

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> 
+0

Können Sie hinzufügen reduziertes Beispiel hier, das das Problem demonstriert? –

+0

Ich habe ein kleines Beispiel hinzugefügt. – DJDMorrison

Antwort

20

EDIT

Ich habe meine Beispielanwendung auf meine Github hochgeladen. Prüfen Sie es hier heraus: https://github.com/djdmorrison/flask-progress-example


ich gearbeitet habe, aber für alle anderen, die das gleiche Problem bekommt:

Die index.html Seite eigentlich nie Lasten, wie es nie in App aufgerufen wird. py. Die Vorgehensweise besteht darin, zu einer separaten Route/Seite zu wechseln und dann send_file('index/html') zurückzugeben. Dadurch wird die Indexseite geladen und die mit/stream verknüpfte EventSource erstellt, die dann die Stream-Methode in app.py startet und die richtigen Daten liefert.

Beispiel, die durch die Erhöhung x alle 0,2 Sekunden, um einen Fortschrittsbalken erzeugt und es auf der Webseite angezeigt wird:

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> 
+0

Wenn jemand anderes Probleme mit dem Stream hat (da die onmessage-Ereignisse nur ausgelöst werden, sobald der Stream geschlossen wird), sollten Sie Antivirensoftware als mögliche Ursache in Betracht ziehen (siehe diesen Beitrag als Referenz: https: // stackoverflow. com/questions/12978466/javascript-eventsource-sse-nicht-fire-in-browser). Hatte eine harte Zeit, herauszufinden, dass man, hoffe, andere müssen nicht ihre Zeit verschwenden, die Untersuchung dieser beschissenen Frage ... – fredpi