首頁 > web前端 > js教程 > 如何顯示從 Flask 視圖串流的即時資料?

如何顯示從 Flask 視圖串流的即時資料?

Patricia Arquette
發布: 2024-12-09 09:43:07
原創
602 人瀏覽過

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

即時顯示從 Flask 視圖串流的資料

在 Flask 中,從視圖串流傳輸資料非常簡單。但是,無法使用此流動態更新 HTML 範本。

JavaScript 和 XMLHttpRequest

一個解決方案是使用 JavaScript 和 XMLHttpRequest。我們可以:

  1. 使用 XMLHttpRequest 與串流資料的端點建立連線。
  2. 定期從流中讀取資料直至完成。
  3. 直接更新HTML收到的data.

範例:

# 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>
登入後複製

使用>另一種方法涉及使用用於顯示流式HTML 輸出的iframe。雖然這允許樣式靈活性和其他優點,但它也帶來了缺點:

更高的資源使用
  • 單獨的文檔,更難無縫集成
  • 潛在的滾動問題長的輸出
範例:

index.html(主模板)

<p>All output:</p>
<iframe src=&quot;{{ url_for('stream') }}&quot;></iframe>
登入後複製
串流View

@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(選用樣式表)

透過使用JavaScript/XMLHttpRequest 或 iframe 方法,您可以有效地顯示 Flask 視圖中的串流資料並即時維護更新。
body {
  font-family: sans-serif;
}
p {
  margin-bottom: 10px;
}
登入後複製

以上是如何顯示從 Flask 視圖串流的即時資料?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板