2

Добрый день! Суть вопроса в следующем: Какими методами можно организовать передачу значения 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>
1

2 ответа 2

3

Проблема несколько сложнее, чем кажется на первый взгляд и стандартными методами Flask её решить трудно: между клиентом и сервером должно быть постоянное соединение + клиент и сервер через это соединение должны правильно взаимодействовать. К счастью, есть протокол WebSocket и клиентская библиотека SocketIo, которая позволяет взаимодействовать с сервером через этот протокол, а для Flask есть расширение Flask-SocketIo. В виртуальное окружение оно ставится командой pip install flask-socketio. Для работы так же требуется eventlet или gevent для обработки событий.

Когда всё будет установлено, серверный код будет выглядеть достаточно просто:

from flask import Flask
from flask import render_template
from flask_socketio import emit
from flask_socketio import SocketIO


app = Flask(__name__)
socketio = SocketIO(app)

thread = None
NS = "/test"

def progress_update():
    for i in range(5):
        socketio.sleep(1)
        socketio.emit("progress", {"text": 25 * i}, namespace=NS)


@app.route("/")
def hello():
    return render_template("index.html")

@socketio.on("connect", namespace=NS)
def test_connect():
    print("connect")
    socketio.start_background_task(target=progress_update)


@socketio.on("disconnect", namespace=NS)
def test_disconnect():
    print("disconnect")

На клиенте, к сожалению, не сумел заставить код работать с jquery, зато с проблемой отлично справился vue. Надо только подключить следующие скрипты:

<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

И обновить шаблон следующим образом:

<div id="test">
    <div class="progress" style="width: 50%; margin: 50px;">
        <div class="progress-bar progress-bar-striped active"
            role="progressbar"
            v-bind:aria-valuenow="progress"
            aria-valuemin="0"
            aria-valuemax="100"
            v-bind:style="'width: '+progress+'%'"
        >
            <span class="progress-bar-label" v-text="progress + '%'"></span>
        </div>
    </div>
    <span v-text="message"></span>
</div>

<script>
    let app = new Vue({
        el: "#test",
        data: {
            progress: 0,
            socket: null,
        },
        created: function() {
            socket = io.connect("http://" + document.domain + ":" + location.port + "/test");
            socket.on("progress", (msg) => {
                this.progress = msg.text;
            });
        },
    });
</script>

С виду vue работает достаточно просто: достаточно почитать эту страницу, чтобы понять, как работает приведённый пример. Для более глубокого ознакомления с WebSocket рекомендую прочитать эту статью и заглянуть на официальный репозиторий дополнения Flask-SocketIo.

Стоит обратить внимание на то, что если обновить клиент до того, как прогресс бар заполнится, то метод test_connect выполнится ещё раз и будет два потока (two threads), которые эмитят (emit) событие progress с разными значениями, поэтому данную ситуацию нужно корректно обрабатывать.

0

Дополню ответ @montreal - то же самое с применением nuxt.js (фремворк для фреймворка vue.js)

<template>
  <div id="test">
    <div class="progress" style="width: 50%; margin: 50px;">
      <div class="progress-bar progress-bar-striped active"
           role="progressbar"
           v-bind:aria-valuenow="progress"
           aria-valuemin="0"
           aria-valuemax="100"
           v-bind:style="'width: '+progress+'%'"
      >
        <span class="progress-bar-label" v-text="progress + '%'"></span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "AppProgressBar",
    data() { return {
      progress: 0,
      socket: "server",
    }
    },
    mounted() {
      console.log(this.$nuxtSocket)
      this.socket = this.$nuxtSocket({
        channel: '/test',
        name: "server"
      })
      console.log(this.socket)
      /* Listen for events: */
      this.socket
        .on("progress", (msg) => {
          this.progress = msg.text;
        })
    },
  }
</script>

<style scoped>

</style>

Для этого надо имортировать (предвариельно установив) nuxt-socet-io в nuxt.config.js

module.exports = {
.
.
.
    modules: [
    'nuxt-socket-io'// to enable progressbar
  ],
  io: { //socket IO options
    sockets: [ // Required
      { // At least one entry is required
        name: 'home',
        url: 'http://localhost:3000',
        default: true,
      },
      { name: 'server', url: process.env.HOST_URL || 'http://localhost:5000'},
    ]
  },
.
.
.
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.