fun clock streaming text with python and flask

Question

Please help. What code would it take to make a simple text clock application with python and flask to demonstrate how flask streaming works? Ideally the app would show text time in place, overwriting on screen, from the once per second updating stream.

The clock stream is a simplified case of a real time text stream. The real underlying need is for a server to push out simultaneous video & text streams (no audio) like Miguel Grinberg's Video Streaming with Flask and to show both updates on screen on the client side. Miguel's video stream demo works. However I do not yet know how to get a simultaneous text stream to work.

I have tried the code below and there are some quirks:

1. The html p element is just a place holder for text. It could be changed to anything that might work better.
2. http://localhost:5000 shows '/time_feed' when I want it to instead show the time string contents of /time_feed.

3. http://localhost:5000/time_feed shows nothing at all while the flask server is running. When the flask server is stopped all of the sudden a bunch of updates appear in the browser like:

   2018.11.01|20:29:272018.11.01|20:29:282018.11.01|20:29:292018.11.01|20:29:302018.11.01|20:29:312018.11.01|20:29:322018.11.01|20:29:33

I tried Streaming data with Python and Flask but do not understand how to apply either the javascript or jinga answers to my clock's code. I am new learning web and flask development.

app.py:

#!python3 Flask 
# streaming clock per http://flask.pocoo.org/docs/1.0/patterns/streaming

from flask import Flask, Response, render_template, url_for
from datetime import datetime
import time

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/time_feed')
def time_feed():
    def generate():
        while True:
            yield datetime.now().strftime("%Y.%m.%d|%H:%M:%S")
            time.sleep(1)
    return Response(generate(), mimetype='text')

if __name__ == '__main__':
    app.run(debug=True, threaded=True)

./templates/index.html:

<title>Clock</title>
<h1>Clock</h1>
<p>{{ url_for('time_feed') }}</p>

Answer 1

in view you can avoid while and sleep in that example:

@app.route('/time_feed')
def time_feed():
    def generate():
        yield datetime.now().strftime("%Y.%m.%d|%H:%M:%S")  # return also will work
    return Response(generate(), mimetype='text') 

in template:

<p id="clock">Here will be date|time</p>

<script>
    var clock = document.getElementById("clock");

    setInterval(() => {
        fetch("{{ url_for('time_feed') }}")
        .then(response => {
                response.text().then(t => {clock.innerHTML = t})
            });
        }, 1000);  
</script>

in your example with video streem it is just trick, it is not solution for real video streaming, just because not provide audio. If you need for real video stream you need to use webRTC with Kurento-media-server for example. For python look on aiortc lib.

Answer 2

You totally misunderstand how it works. streaming doesn't mean it can transport data intermittently, but means it can transport huge data while don't need to load it all at the beginning.

So while using stream, you are still using just one request. This request is a whole one, your browser can only deal with the response after the whole data is transported. In your case, as you are using an infinite loop, your browser will just waiting for the data forever.

To achieve what you want, you have two options:

1. Use js to keep sending request per second.
2. Use websocket.

update

It turns out that some elements can work with special mimetype multipart/x-mixed-replace to achieve long polling. As I am not a front-end guy, maybe someone can supply or correct my answer.