如何在 Angularjs 中为实时通知优化 $interval？

Question

我正在开发一个社交网站。我使用以下代码实时显示用户的通知总数。

代码：

    function load_notifications(){
        $http.get('http://localhost:3000/load').success(function(data){
            $scope.totalNotify = data.total;
        });
    };
load_pictures();
$interval(function(){
        load_notifications();
    },300);

基本上，这段代码以给定的时间间隔连续检查数据库，如果有一些变化，它会更新 $scope 值。但是当我尝试在不同的浏览器中使用两个不同的用户检查它时，它会因为轮询请求而阻塞浏览器。

有什么方法可以改进这种方法或有其他更好的选择吗？ 我正在使用 PHP 和 AngularJS 构建我的应用程序。但我也对这个模块的其他选项持开放态度。

Answer 1

这应该使用 web sockets 来完成，而不是轮询 ajax 请求。

JS：AngularJS and WebSockets beyond

PHP：How to create websockets server in PHP

具体来说，对于使用 PHP 的 Web 套接字，我会使用 Rachet。

PHP 的起点是：http://socketo.me/docs/hello-world

这个 hello world 教程向您展示了通过 Rachet 进行交互的基本 javascript 和 PHP。

Answer 2

awaitingResponse = false;

function load_notifications() {
    if(!awaitingResponse) {
        awaitingResponse = true;

        $http.get('http://localhost:3000/load').then(function(response) {
            $scope.totalNotify = response.data.total;
            awaitingResponse = false;
        }, function() {
            awaitingResponse = false;
        });
    }
}

load_pictures();
$interval(load_notifications, 3000);

Answer 3

您可以在收到答复后等待 300 毫秒，如下所示：

function load_notifications(){
    $http.get('http://localhost:3000/load').success(function(data){
        $scope.totalNotify = data.total;
        setTimeout(function() {
            load_notifications();
        }, 300);
    });
};
load_pictures();
load_notifications();

Answer 4

如果您只使用 websockets，您将需要每次运行查询以确定是否有任何更改。我建议，使用实时数据库。

您可以将RethinkDB 或Firebase 与AngularFire 一起使用。这些是实时数据库，并且会在任何这些字段有更新时通知您。 如果你使用 RethinkDB，那么你还需要实现一个 websocket 解决方案来通知浏览器。