https://github.com/datahappy1/flask_sse_example_project

Flask, Waitress and Javascript used for multiple Server-sent event streams to enable long running jobs web browser auto-refresh
https://github.com/datahappy1/flask_sse_example_project

auto-refresh flask html5 javascript long-running-process server-sent-events waitress

Last synced: 24 days ago
JSON representation

Flask, Waitress and Javascript used for multiple Server-sent event streams to enable long running jobs web browser auto-refresh

• Host: GitHub
• URL: https://github.com/datahappy1/flask_sse_example_project
• Owner: datahappy1
• License: mit
• Created: 2019-11-03T20:09:20.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-05-06T20:55:54.000Z (over 1 year ago)
• Last Synced: 2024-10-15T06:37:00.815Z (2 months ago)
• Topics: auto-refresh, flask, html5, javascript, long-running-process, server-sent-events, waitress
• Language: Python
• Homepage:
• Size: 121 KB
• Stars: 8
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Flask, SSE, JS example project

Flask, Waitress and Javascript used for 1-N Server-sent event streams to enable long running jobs state auto-refresh visualized in a HTML table in the browser

> Server-Sent Events (SSE) is a server push technology enabling a client to receive automatic updates from a server via HTTP connection. The Server-Sent Events EventSource API is standardized as part of HTML5 by the W3C.

Currently this project is designed to run on Windows, but if you replace Waitress WSGI with Gunicorn for instance, it can

run also on *nix based OS

This project needs to be run in a browser fully supporting HTML5 

## 10000 ft. overview Diagram

![alt text][diagram]

[diagram]: https://github.com/datahappy1/flask_sse_example_project/blob/master/flaskr/docs/diagram.png "diagram"

## Screenshots from the web app

![alt text][screens]

[screens]: https://github.com/datahappy1/flask_sse_example_project/blob/master/flaskr/docs/screens.gif "screens"

## How it works

1) Flask backend before each app startup imports blueprints with the SSE streaming routes from the folder `/blueprints/`

2) These routes publish the events into `http://127.0.0.1:80/streams/`

3) Flask generates the HTML templates, template `stream.html` has JavaScript code attached, which uses

JSON2HTML JS library to change the event stream from JSON to HTML table rows and injects these rows in the 

table used for jobs statuses visualization

4) You can create a new stream by importing and registering into `app.py` a new blueprint

## How to get started

1) Git clone this repository

2) Create and activate yourself a Python virtual environment

3) run `pip3 install -r requirements.txt`

4) set your Windows Python working directory to `C:\<<>>\flaskr`

5) run `python3 C:\<<>>\flaskr\app.py`

### Useful links:

- https://stackoverflow.com/questions/30645664/how-to-stop-server-sent-events 

- https://medium.com/brillio-data-science/exposing-your-data-science-project-to-the-world-flask-with-a-waitress-8592f0356b27

- https://stackoverflow.com/questions/12232304/how-to-implement-server-push-in-flask-framework

- https://medium.com/code-zen/python-generator-and-html-server-sent-events-3cdf14140e56

- https://json2html.com/examples/