Flask Ajax return multiple statuses before execution

Question

I've got a web front-end for a flask app that is doing some heavy calculations on the back-end before passing the calculated data via JSON to the front-end to get charted.

The issue is, the calculation takes several minutes, and ideally I want the front-end to know the % done and status of the request rather than sitting there quietly.

JS Ajax request front-end:

function runBacktest() {
        $.ajax({
            type: "POST",
            url: '/backtest',
            data: {
                run_partial: 1,
                use_saved_model: false,
                saved_model_file: 'model.h5'
            },
            dataType: "json",
            success: function(data) {
                //Successful data
            },
            error: function () {
                alert('There was a problem contacting the server.');
            }
        });
    }

Python backend:

@webapp.route('/backtest', methods=['POST'])
def backtest():
    print('> Running Backtest...')
    """Calculation code goes on here"""
    print('Percent Completed: \r{0:.1f}%'.format(round(pct_done,1)), end='')

    """Serialise each agent instance into a dictionary and put in list to be converted to JSON object"""
    agents_serialised = [agent.__dict__ for agent in bt_engine.agents]

    return json.dumps(agents_serialised)

Question is, how can I pass something like the percentage done, which I'm printing on stdout, on every change of percentage, to the front end? Followed by then passing the json data once it's finished?

Allie Fitter · Answer 1 · 2017-05-15T18:03:57.017

2

A more Flasky approach would be to pass a generator to the response. From what I've read, this is the preferred approach to streaming data with Flask. Here's a very abstract example. Look here for my answer to different question where I have a more fleshed out and tested script using a generator in a response.

def do_calcs():
    while(more_calculations):
        """do your calculations and figure out the percentage."""
        agents_serialized = [agent.__dict__ for agent in bt_engine.agents]
        yield json.dumps({percent: percent, agents: agents_serialized})

And in your route:

return Response(do_calcs(), mimetype='text/json')

edited May 15 '17 at 18:03

answered May 15 '17 at 17:10

Allie Fitter

1,689
14
18

If you're going to do this, I recommend using the [`xhr` parameter](https://stackoverflow.com/questions/22502943/jquery-ajax-progress-via-xhr) to add a progress event listener for the request on the client side. That way your JavaScript can actually get a look at these JSON objects being sent during the request. – Nick Frost May 15 '17 at 21:00

Rahul K P · Answer 2 · 2017-05-15T12:36:57.610

For updating the percentage kind of stuff we need socket connection between Front end and Back end .Flask have a great package do this which is socket.io. And there is javascript support also for the socket.io.

Blog post which help to build this

I am sure you can build with this, because i done it before.

Sample Python code:

from flask import Flask, render_template
from flask.ext.socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

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

@socketio.on('my percentage event', namespace='/test')
def test_message(message):
    #create pertage opertion here
    emit('percentage status', {'data': message['data']}, broadcast=True)

Sample javascript code:

$(document).ready(function(){
    var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');

    socket.on('percentage status', function(msg) {
        //portion for update the percentage
    });

});

These code are not exactly, But you can use as reference.

Flask Ajax return multiple statuses before execution

2 Answers2