Как получить данные о процессе выполнения от flask для Progress Bar?

Question

[Иван Сафонов]

Всем привет.
Перековырял весь интернет, но либо я не правильно формулирую вопрос, либо я просто слишком глупый что пропустил его.

В общем суть вопроса такова. Есть flask приложение, мне надо на страницах сделать индикацию выполнения выполнения запросов. Как ее сверстать и заставить шевелиться, моргать, светиться и прочее через js у меня вопроса нет.
Но я ни как не могу понять, как мне сделать такую логику:
1) Пользователь заполняет данные формы
2) Через JS улетает post запрос на бэкенд
3) Бэкенд принимает данные и начинает выполнять функцию my_func1, где уже начинает обрабатывать полученные с веба данные, ходить по разным базам, собирать новые данные, строить из этого всего кучу полезной информации, которую потом выведет на страницу.
4) Пока бэк занят выполнением функции my_func1, на странице должен появиться прогресс бар, который будет отображать ход выполнения функции.

Так вот сейчас у меня это реализовано следующим образом:
После нажатия пользователем на кнопку "Передать данные", вся страница затемняется и я просто показываю гифку с крутящейся полоской, пока не придет ответ от бэка.
Но этот процесс может быть достаточно длительным и иногда пользователь думает что что-то сломалось.
А если показывать нормальный прогресс бар заполняющийся по ходу выполнения функции, будет лучшее.

Но я ни как не могу понять каким образом мне получить от бэка процесс выполнения фукнции my_func1...

Надеюсь нормально и доходчиво объяснил. Если что-то не понятно - спрашивайте, уточню.

Answer 1

[Сергей Горностаев]

Web-приложения так не работают. Обработчик должен максимально быстро возвращать ответ. Для выполнения длительных операций надо запускать фоновые процессы с помощью чего-нибудь типа Celery. Прогресс их выполнение можно было бы отдавать через websocket, но синхронный Flask для этого не подходит. Придётся обойтись поллингом через AJAX.

Answer 2

[Александр]

Нужно создать дочерний процесс с идентификатором и вернуть идентификатор, далее делать периодические запросы с указанием идентификатора и получать по нему состояние того процесса.

Answer 3

[Vova316]

Можно сделать так:
1. В начале страницы подключить библиотеки:

spoiler

<script src="../static/js/bootstrap.js"></script>
  <script src="../static/js/bootstrap.bundle.js"></script>
  <script src="../static/js/bootstrap.bundle.min.js"></script>
  <script src="../static/jquery/jquery-3.6.0.js"></script>

2. В основной части страницы вставить прогресс-бар:

spoiler

<div class="progress" style="height: 23px;">
            <div id="r3c1" class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 0%">0</div>
          </div>

3. В конце станицы вставить скрипт, который будет каждые 0,5 сек забирать значение для прогресс-бара:

spoiler

<script>
        setInterval(
            function()
            {
                $.getJSON('/get_form',{},function(data){
                    $("#r3c1").text(data.result[2][0]);
                    $("#r3c1").css({'width':data.result[2][0]+'%'});
                });
            },
            500);
    </script>

4. Во Flask добавить декоратор:

spoiler

@app.route('/get_form')
    def get_form():
    pass
    return jsonify(result=data_form)

5. И в некоторой функции пересчитывать значение для прогресс-бара:

spoiler

def my_func(pause):
    percent = 100 / pause
     while pause != 0:
        time.sleep(1)
        pause -= 1
        data_form[2][0] = int( 100 - (pause * percent))
        return

Обратите внимание: прогресс-бар требует два параметра - надпись цифрами на шкале и саму шкалу.
Функция в пункте 5 - бесполезная и указана тупо для примера.