Dynamic progress bar based on progress of script?

Question

I have a Google App Engine application, using the webapp2 framework, that interacts with a MySQL database. Users of the application can upload data. During uploading, I want to show a progress bar, since it can take up to some minutes.
Based on what I've seen in other topics (mainly: this topic and this one), I'm working on a JSON/Javascript solution, which are both new to me.

The progress bar itself is working if I'm passing a random number. However, I can't figure out how to 'load' the changing values from the Python script.

Here's the HTML/CSS/Javascript:

HTML:
<div id="myProgress">
    <div id="myBar"</div>
</div>  

CSS:
#myProgress {width: 300px;
height: 30px;
background-color: #ddd;
}
#myBar {width: 1%;
height: 30px;
background-color: #4CAF50;
}   

Javascript:     
<script type="text/javascript">
function move() {
    var elem = document.getElementById("myBar");   
    var width = 1;
    var id = setInterval(frame, 1000);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } 
        else {
            //var randomnumber = Math.floor(Math.random() * 100); --> works
            var randomnumber = function update_values() {
                $SCRIPT_ROOT = {{ script_root }};
                $.getJSON($SCRIPT_ROOT+"/uploading",
                    function(data) {
                        $("#width").text(data.width+" %")
                    });
            } ; --> this is wrong I assume
            var width = randomnumber; 
            elem.style.width = width + '%'; 
        }
    }
}
window.onload=move();   
</script>

The progress comes from a for loop in Python which is embedded in the script that loads the page. After the script is finished with one activity, I want the result of counter to be passed to the progress bar as its width. With static variables, I use the regular Jinja way.

class UploadingpageHandler(webapp2.RequestHandler):
def get(self):
    activities_list = [1,2,3,4,5,6,7,8,9,10]
    counter = 0
    script_root = 'localhost:10080'

    for activity in activities_list:
        counter = counter + 10
        upload.do_stuff_in_some_function_with_MySQL()   
        obj = {
        'width': counter
        }
        self.response.headers['Content-Type'] = 'application/json' --> this
        self.response.out.write(json.dumps(obj)) --> and this is wrong I assume

    template_vars = {
    'script_root': script_root
    }
    template = jinja_environment.get_template('uploading.html')
    self.response.out.write(template.render(template_vars))

How to alter the scripts to get it working? Or is there a better way to solve this?

Answer 1

You need to store the progress of your "activities" outside of your function somewhere.

A hacky "solution" would be to store it into some sort of caching solution like memcached or redis with some sort of timestamp/signature so that you can retrieve it (and invalidate the old entries with a cron job-type thing).

Or you could go balls out and make your task entirely async with something like Celery, but I doubt you can do that on Google App Engine.