Heim >Web-Frontend >js-Tutorial >Wie kann ich aus einer Flask-Ansicht gestreamte Echtzeitdaten anzeigen?

Wie kann ich aus einer Flask-Ansicht gestreamte Echtzeitdaten anzeigen?

Patricia Arquette
Patricia ArquetteOriginal
2024-12-09 09:43:07617Durchsuche

How Can I Display Real-Time Data Streamed from a Flask View?

Anzeigen von gestreamten Daten aus einer Flask-Ansicht in Echtzeit

In Flask ist das Streamen von Daten aus einer Ansicht unkompliziert. Es ist jedoch nicht möglich, eine HTML-Vorlage mit diesem Stream dynamisch zu aktualisieren.

JavaScript und XMLHttpRequest

Eine Lösung ist die Verwendung von JavaScript und XMLHttpRequest. Wir können:

  1. XMLHttpRequest verwenden, um eine Verbindung mit dem Endpunkt herzustellen, der die Daten streamt.
  2. Regelmäßiges Lesen aus dem Stream bis zur Fertigstellung.
  3. Aktualisieren Sie den HTML-Code direkt mit die erhaltenen Daten.

Beispiel:

# App
app = flask.Flask(__name__)

# Streaming view
@app.route('/')
def index():
    def generate():
        # Simulate data generation
        for i in range(500):
            yield str(i) + '<br/>\n'
    return flask.Response(generate(), mimetype='text/html')

# Run the app
app.run(debug=True)
<!-- Template -->
<p>Latest output: <span>

Verwendung eines Iframes

Ein anderer Ansatz beinhaltet die Verwendung ein Iframe zum Anzeigen der Streaming-HTML-Ausgabe. Dies ermöglicht zwar Gestaltungsflexibilität und andere Vorteile, bringt aber auch Nachteile mit sich:

  • Höherer Ressourcenverbrauch
  • Separates Dokument, schwieriger nahtlos zu integrieren
  • Mögliche Probleme beim Scrollen lang Ausgabe

Beispiel:

index.html (Hauptvorlage)

<p>All output:</p>
<iframe src=&quot;{{ url_for('stream') }}&quot;></iframe>

Streaming Anzeigen

@app.route('/stream')
def stream():
    @stream_with_context
    def generate():
        yield '<link rel=stylesheet href=&quot;{{ url_for('static', filename='stream.css') }}&quot;>'
        for i in range(500):
            yield '<p>{{ i }}: {{ s }}</p>\n'.format(i=i, s=math.sqrt(i))
            sleep(1)

stream.css (Optional Stylesheet)

body {
  font-family: sans-serif;
}
p {
  margin-bottom: 10px;
}

Durch die Verwendung der JavaScript/XMLHttpRequest- oder der Iframe-Methoden können Sie gestreamte Daten aus Ihrer Flask-Ansicht effektiv anzeigen und Aktualisierungen in Echtzeit verwalten.

Das obige ist der detaillierte Inhalt vonWie kann ich aus einer Flask-Ansicht gestreamte Echtzeitdaten anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn