CODEWITHSUNDEEP
javascriptpythonajaxpython-3.xflask
Jakob
Jakob

Reputation: 1129

Flask Ajax return multiple statuses before execution

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?

Upvotes: 2

Views: 963

Answers (2)

Allie Fitter
Allie Fitter

Reputation: 1807

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')

Upvotes: 2

Rahul K P
Rahul K P

Reputation: 16081

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.

Upvotes: 1

Related Questions