Question

我希望在使用AngularJS构建的客户端上有一个进度条。此进度条将通知最终用户服务器上当前执行查询的状态。

本案例中的服务器是ExpressJS。

因此，使用AngularJS我会向服务器发出请求，例如：

$http.post('/data/aPath')
    .success(function (result){
        //Update the progress here.
    });

我想知道的是如何在不结束响应的情况下发送响应，以便AngularJS可以如上所示接收它们并且我可以更新进度条？也就是说，在nodejs方面，

app.post('/data/aPath', function (request, response){
    //What should I do here to update the client on the
    //current execution state
    //Something on the lines of
    //response.write("finished fetching user details, moving on to
    //updating records"
});

以便客户端可以更新进度条？

Answer 1

说实话，我自己并没有这样做，但我相信一种方法就是这样：

在您的客户端，修改您的$http.post功能

function getStatusFromProcessing() {
    $http.post('/data/aPath').success(function (result){
        // Pseudocode:
        if(result.status is something) { // ex: (result >= 20)
            // update progressbar with new value
        }
        if(result.status is somethingElse) { // ex: (result >= 40)
            // update progressbar with new value
        }

        // All updating of progressbar done for now
        if(result.status !== 100) { // Progress is not done
            return getStatusFromProcessing(); // run the function again
        } else {
            return; // All done, move on
        }
    });
}

现在，服务器端：

app.post('/data/aPath', function (request, response){
    // You need some kind of function/service, which returns 
    // the current state of the processing.

    var currentStatus = getStatusFromRunningProcess(); 
    // getStatusFromRunningProcess() should return a value between (0 - 100)

    return response.json({ status: currentStatus});
});

一些注意事项：

代码未经过测试（显然）
如果您选择做这样的事情，我认为处理时间应该有点大，
也许在if(result.status !== 100)内的客户端代码中添加一个小的超时（几百毫秒），以避免垃圾邮件 http请求。但那是微调:)

使用套接字更新替代解决方案

如果您不想从客户端向服务器发出多个请求，可以将其切换;更新进程时，服务器会向客户端发送消息。这需要更少的带宽和对服务器的请求。使用套接字可以使用此方法。

使用套接字时，socket.io框架非常受欢迎。网上还有很多教程。

简而言之：

服务器在处理状态更新时发送消息
客户端收到此信息，并更新进度条

这是SO post regarding sockets and a progress bar。这是关于文件上传，但概念是相同的。

如何通知客户当前的执行状态

1 个答案: