javascript - fun clock streaming text with python and flask - Stack Overflow

admin管理员组

文章数量:1430539

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 .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>

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/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>

• javascript
• python
• flask
• streaming

Share Improve this question Follow edited Nov 8, 2018 at 16:47 SpeedCoder5 asked Nov 2, 2018 at 0:56 SpeedCoder5SpeedCoder5 9,06877 gold badges3636 silver badges3535 bronze badges 1

• 1 Using JS to poll like the accepted solution is correct in your case. But using another http client you could see your method works as well, like with curl: curl -vN "127.0.0.1:5000/time_feed" – Kim Commented Nov 8, 2019 at 22:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

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.

本文标签： javascriptfun clock streaming text with python and flaskStack Overflow