Implement html5 Server-Sent Events (SSE) with python flask (a server-side clock demo)

Python code

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

app = Flask(__name__)


# a generator with yield expression
def gen_date_time():
    while True:
        time.sleep(1)
        now = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
        # DO NOT forget the prefix and suffix
        yield 'data: %s\n\n' % now


@app.route('/sse_demo')
def sse_demo():
    return Response(
        gen_date_time(),  # gen_date_time() is an Iterable
        mimetype='text/event-stream'  # mark as a stream response
    )


HTML = '''<!DOCTYPE html>
<html>
<body>
    Server side clock: <span id="clock"></span>
    <script>
        var source = new EventSource("/sse_demo");
        source.onmessage = function (event) {
            document.getElementById("clock").innerHTML = event.data;
        };
    </script>
</body>
</html>'''


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


app.run()

Points to note

  • Use a generator like gen_date_time to populate the data you want to send to the client continuously.
  • Notice yield 'data: %s\n\n' % now in the generator, the prefix data: and the suffix \n\n are necessary.
  • mimetype of the stream API must be text/event-stream

Test it

  • Run the python code above.
  • Open your browser and enter http://127.0.0.1:5000/
  • In the browser, you will see something like Server side clock: 2022-06-26 20:21:40. It will refresh every second.

This article is originally created by tooli.top. Please indicate the source when reprinting : https://www.tooli.top/posts/flask_sse

Posted on 2022-06-26 Mail to author

Navigator