javascript - How to optimize $interval for real time notifications in Angularjs? - Stack Overflow

admin管理员组

文章数量:1402778

I am working on a social networking site. I have used following code to show the total notifications count in real time for a user.

Code:

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

basically, this code checks the DB continuously at a given interval and if there is some change, it update the $scope value. But when I tried to check it with two different user in different browsers, it chokes the browser because of polling requests.

Is there any way to improve this method or have any other better alternative? I am building my application using PHP and AngularJS. But I am open to other options for this module too.

I am working on a social networking site. I have used following code to show the total notifications count in real time for a user.

Code:

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

basically, this code checks the DB continuously at a given interval and if there is some change, it update the $scope value. But when I tried to check it with two different user in different browsers, it chokes the browser because of polling requests.

Is there any way to improve this method or have any other better alternative? I am building my application using PHP and AngularJS. But I am open to other options for this module too.

• javascript
• php
• angularjs
• node.js

Share Improve this question Follow asked Oct 29, 2015 at 14:50 Farjad HasanFarjad Hasan 3,36466 gold badges2525 silver badges3939 bronze badges 9

• Polling this frequently will cause server load. Possable solutions: Reduce polling frequency, use web-sockets instead, rent a better server – Steve Commented Oct 29, 2015 at 14:52
• Although 2 users should not overload the server - what webserver are you using? Apache? – Steve Commented Oct 29, 2015 at 14:55
• You could cache the data while you are at it... – ka_lin Commented Oct 29, 2015 at 14:57
• @Steve yep, I am testing on Apache. If I want to use web sockets, I need to use Node.js? – Farjad Hasan Commented Oct 29, 2015 at 14:58
• @NuttyProgrammer No need for Node.js, added PHP-based web socket references in my answer. – Mikel Bitson Commented Oct 29, 2015 at 15:02

 |  Show 4 more ments

4 Answers 4

Sorted by: Reset to default 3

This should be done using web sockets, not a polling ajax request.

JS: AngularJS and WebSockets beyond

PHP: How to create websockets server in PHP

Specifically, for web sockets using PHP, I would use Rachet.

A starting point for the PHP would be here: http://socketo.me/docs/hello-world

This hello world tutorial shows you basic javascript and PHP for interacting through Rachet.

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);

You could wait for 300 milliseconds after the answer was received, like this:

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();

If you only use websockets, you will need to run a query every time to determine if anything has changed. I propose, use a real time DB.

You could use RethinkDB or Firebase with AngularFire. Those are realtime databases and will notify you when there is an update to any of those fields. If you use RethinkDB, then you will also need to implement a websocket solution to notify the browser.

本文标签： javascriptHow to optimize interval for real time notifications in AngularjsStack Overflow