How can I dynamically update an HTML template with real-time data streamed from a Flask view?

Stream Data into a Dynamically Updated HTML Template

Problem:

Generating and streaming data in real-time from a Flask view, we want to display it dynamically within a formatted HTML template.

Answer:

Streaming data within a Flask response is possible, however, it's not feasible to update client-side content directly. To achieve desired, utilize JavaScript and the following methods:

Using XMLHttpRequest:

1. Perform an XMLHttpRequest request to fetch streamed data from the endpoint.
2. Implement a polling mechanism (e.g., setInterval) to check for new data.
3. When new data is received, parse and display it in the HTML (e.g., using DOM manipulation).
4. Continuously handle data until the stream ends (or display a completion message).

# Server-side Flask code
@app.route("/stream")
def stream():
    def generate():
        for i in range(500):
            yield "{}\n".format(sqrt(i))
            sleep(1)

    return app.response_class(generate(), mimetype="text/plain")

# Client-side JavaScript
var timer = setInterval(function() {
    // Handle new data
    if (xhr.readyState == XMLHttpRequest.DONE) { clearInterval(timer); }
}, 1000);

Using an

1. Render an initial HTML page with an
2. Send streaming HTML (including CSS and content) within Flask's stream_with_context decorator.
3. Use render_template_string or a separate template file to generate HTML fragments inside the stream.

# Server-side Flask code
@app.route("/stream")
def stream():
    @stream_with_context
    def generate():
        yield render_template_string('<link rel="stylesheet" href="%7B%7B%20url_for(" static filename="stream.css">')

        for i in range(500):
            yield render_template_string("<p>{{ i }}: {{ s }}</p>\n", i=i, s=sqrt(i))
            sleep(1)

    return app.response_class(generate())

<!-- Client-side HTML -->
<iframe src="%7B%7B%20url_for(" stream></iframe>

Note:

• XMLHttpRequest offers finer control but requires more complex client-side logic.
• iframes are simpler to implement, but have limitations such as resource separation and potentially disruptive styling.

The above is the detailed content of How can I dynamically update an HTML template with real-time data streamed from a Flask view?. For more information, please follow other related articles on the PHP Chinese website!