进度条更新模式在很长的AJAX查询(Update pattern for progress bar

下面是我有：

执行一个长（2-10秒）的计算（分贝+外部API调用）一个Node.js的功能。我用async.auto()来组织我的电话的依赖
HTML视图页面上一个不错的视觉进度条
一个的getJSON函数调用查询（见下面的代码）

现在，我只是更新一个定时器的进度条。但我想它更准确。我已经打破了服务器端功能5个里程碑（后即每个外部调用成功完成），我想发送进度信息给客户端。然而，一旦你res.send(progress)完成的响应，仅此而已可以在它被发送。

我显然这里需要一个不同的模式，我有一些想法：

2个AJAX调用，进步一个投票和第二得到的结果
一个呼叫被调用5次，直到服务器端功能不见了
完全不同的东西（也许长轮询，的WebSockets，？）

问题：

我想知道有什么推荐的模式，以及如何实现它的服务器和客户端上都。示例代码或链接到的样品，受到了高度评价！

而且，一如既往，感谢您的时间！

这里包括是代码我迄今（有明显的功能遗漏）。这不是绝对必要回答这个问题，但我在这里提供它给一些背景。

客户

var searchFunction = function() {
        var user = $("#searchTerm").val();
        $.getJSON("/search/" + user, function(data) {
            console.log(data);
            ko.applyBindings(new MyViewModel(data));
        });
        $("#content").hide();
        progressBar(5);
        $("#progress_bar").show();
        setTimeout(function() {
            progressBar(25);
        }, 1000);
        setTimeout(function() {
            progressBar(50);
        }, 2000);
        setTimeout(function() {
            progressBar(75);
        }, 3000);
        setTimeout(function() {
            $("#progress_bar").hide();
            $("#content").show();   
        }, 4000);
    };

服务器

var searchFunction = function(req, res) {   
    async.auto({
        f1: function(callback) {
            //things happen
            callback(err, res);
        },
        f2: function(callback) {
            //things happen
            callback(err, res);
        },
        f3: ['f2', function(callback, result) {
            //many things happen
            callback(err, res);
        }, 
        function(err) {
            //decisions are made
            callback(null, watchers);
        }]  
    }, function(err, result) {  
            //more exciting stuff happens       
            res.send(finalResults);
        }
    );
};

Answer 1:

你可以使用一个事件流推完成百分比值回升到客户端。但它只能在现代浏览器。 IE9 +我相信。下面是一个例子事件流： https://github.com/chovy/nodejs-stream

HTML

<div id="progress"><span class="bar"></span></div>

CSS

#progress { width: 200px; background: #eee; border: 1px solid #ccc; height: 20px; }
#progress .bar { display: inline-block; background: #ddd; width: 0; }

客户端（jQuery的） - 听/进度事件流

var source = new EventSource('progress');
source.addEventListener('progress', function(e) {
  var percentage = JSON.parse(e.data),
  //update progress bar in client
  $("#progress .bar").css({ width: percentage });
}, false);

服务器端 - 推动事件的新进展％的

res.writeHead(200, {'Content-Type': 'text/event-stream'});
res.write("event: progress\n");
//push the percentage to the client (ie: "10%")
res.write("data: "+"10%".toString()+"\n\n");

这将是由你的用户界面来定义你的进度条---我会用一个固定宽度的DIV与具有CSS规则的基于W /百分比宽度的孩子。这得到更新。