如何在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套接字完成，而不是轮询ajax请求。

JS： AngularJS和WebSockets之外

PHP： 如何在PHP中创建websockets服务器

具体来说，对于使用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解决方案来通知浏览器。