javascript - 如何流式传输数据以提供进度条

Question

我有一个执行一些计算的 NodeJS 应用程序，我想在客户端 (AngularJS) 上填充一个进度条，显示已完成的计算量。现在我做这样的事情:

服务器端:

var compute_percent = 0;

router.post('/compute', function(req, res) {
   myTask.compute1(function(result) {
      compute_percent = 33;
      myTask.compute2(function(result2) {
         compute_percent = 66;
         myTask.compute3(function(result3) {
            compute_percent = 100;
            res.json(result3);
         });
      });
   });

}
router.get('/compute_percent', function(req, res) {
   res.json(compute_percent);
}

客户端

angular.module('myApp').controller('myCtrl', 
   function($scope, $interval, $http) {
      $interval(function() {
         $http.get('/compute_percent').success(function(result) {
            $scope.percent = result});
         }, 
      500);
   }
});

我不喜欢的是我最终做了很多请求(如果我希望进度条准确的话)，并且几乎所有请求都是无用的(状态没有改变服务器端)。

如何“反转”此代码，让服务器向监听客户端发送计算状态已更改的消息？

Answer 1

您有 3 种可能性可以实现:

标准推送

通过使用套接字或任何可以双向通信的东西，您可以进行快速信息交换。它将使用许多请求来更新进度条，但速度相当快，并且每秒可以支持大量请求。

长池化

浏览器发送请求，服务器不会立即响应，而是等待事件发生，然后通过响应来报告该事件。然后，浏览器应用其操作并发送另一个将等待的请求。

通过这种技术，您只能在服务器需要时进行更新。但如果您想要很高的准确性，这仍然会产生大量请求。

小册子

客户端仅发送一个请求，服务器用 JavaScript 填充该请求，从而更新进度栏。 响应是流以保持连接打开，并且在需要时发送 JavaScript 更新。

响应将如下所示:

set_progress(0);
// nothing for X seconds
set_progress(10);
// nothing for X seconds
set_progress(0);
....

与其他请求相比，您仍然发送相同数量的信息，但在一个请求中，因此重量较轻。

我认为更容易实现的是长池化。