0
0 комментариев

Добрый день!
Суть вопроса в следующем:
Какими методами можно организовать передачу значения ProgressBar из Flask-приложения в зависимости от стадии выполнения цикла?

В целом модель проекта выглядит так:
Есть отдельное Python-приложение, работающее с базой данной. Оно выводит в командную строку состояние прогресса.

Есть отдельное Flask-приложение, которое выводит информацию из базы данных в виде таблицы.

Я ищу способ, которым можно организовать передачу состояния обновления из Python-скрипта в Flask-приложение, для дальнейшей передачи на Progressbar.

В сети нашел нечто похожее, но yield не дает работать циклам for в самом Python-скрипте.
Возможно я изобретаю велосипед — прошу подсказать, как это реализую нормальные разработчики :)
Ну и собственно код примера:

from flask import Flask, render_template, Response
import time
 
app = Flask(__name__)
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/progress')
def progress():
    def generate():
        x = 0
 
        while x <= 100:
            yield "data:" + str(x) + "\n\n"
            x = x + 10
            time.sleep(0.5)
 
    return Response(generate(), mimetype= 'text/event-stream')
 
if __name__ == "__main__":
    app.run()

И его темплэйт:

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script>
    var source = new EventSource("/progress");
    source.onmessage = function(event) {
        $('.progress-bar').css('width', event.data+'%').attr('aria-valuenow', event.data);
        $('.progress-bar-label').text(event.data+'%');
        if(event.data == 100){
            source.close()
        }
    }
    </script>
</head>
<body>
    <div class="progress" style="width: 50%; margin: 50px;">
        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
            <span class="progress-bar-label">0%</span>
        </div>
    </div>
</div>
</body>
</html>


Добавить комментарий