基于脚本进度的动态进度条？

Question

我有一个Google App Engine应用程序，使用webapp2框架，与MySQL数据库交互。应用程序的用户可以上传数据。在上传过程中，我想显示一个进度条，因为这可能需要几分钟的时间。
基于我在其他主题中看到的（主要是：this topic和this one），我正在研究一种JSON/Javascript解决方案，这对我来说都是新的。

如果我传递一个随机数，进度条本身正在工作。但是，我无法弄清楚如何从Python脚本中“加载”更改的值。

这里的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> 

的进步来自于对Python中环路嵌入在加载页面的脚本。脚本完成一个活动后，我希望将计数器的结果作为宽度传递给进度条。使用静态变量，我使用常规Jinja方式。

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

如何更改脚本以使其工作？或者有更好的方法来解决这个问题吗？

Answer 1

您需要将“活动”的进度存储在某个地方的功能之外。

hacky的“解决方案”是将其存储到某种缓存解决方案中，例如memcached或redis以及某种时间戳/签名，以便您可以检索它（并使用cron作业类型的东西使旧条目无效）。

或者您可以将球取出并使您的任务完全异步，如Celery，但我怀疑您可以在Google App Engine上做到这一点。