2014-10-22 11 views
7

Sto cercando di implementare il server push nel mio progetto Flask dopo this tutorial.testo/flusso di eventi riconosciuto come download

Ho impostato tutto senza errori, tuttavia quando vado alla pagina/stream, Firefox lo riconosce come file e prova a scaricarlo. In Safari stampa solo i dati inviati. Ho provato ad adattare il codice a un'implementazione più semplice, in cui un thread restituisce alcuni dati ogni secondo, tuttavia ha prodotto gli stessi risultati.

Il mio obiettivo è che ogni volta che uno script python raggiunge un punto in un ciclo, aggiornerà una barra di avanzamento sull'interfaccia web.

Qualsiasi aiuto con questo sarebbe fantastico. Grazie.

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

si può aggiungere un esempio ridotto qui che dimostra il problema? –

+0

Ho aggiunto un piccolo esempio. – DJDMorrison

risposta

20

EDIT

Ho caricato la mia applicazione di esempio per la mia Github. Check it out qui: https://github.com/djdmorrison/flask-progress-example


ho lavorato fuori, ma per chiunque altro che ottiene lo stesso problema:

La pagina index.html mai effettivamente carichi, come non è mai chiamato in app. py. Il modo per farlo è andando su un percorso separato,/pagina per esempio, e quindi restituendo send_file('index/html'). Questo caricherà la pagina dell'indice, creerà l'EventSource collegato a/stream, che avvierà quindi il metodo stream in app.py e produrrà i dati corretti.

Esempio che crea una barra di avanzamento, aumentando x ogni 0,2 secondi e la visualizzazione sulla pagina web:

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

Se qualcun altro sta riscontrando problemi con lo stream (in quanto gli eventi onmessage vengono attivati ​​appena si chiude lo stream), considerare il software antivirus come una possibile ragione (consultare questo post per riferimento: https: // stackoverflow. com/domande/12978466/javascript-EventSource-SSE-non-cottura-in-browser). Ho avuto difficoltà a capire quello, spero che gli altri non debbano sprecare il loro tempo investigando su questo schifoso problema ... – fredpi