How to efficiently poll mySQL database with $http.get

Question

** ANGULAR 1.X ** Hello everyone! I need help with making this $http.get function asynchronous, as you can see from the code, my current temp solution is to setInterval the displayData scope. Which obviously is not an efficient solution, because it takes up too much CPU, too much of the users data and can cause some flickering on the UI. I want the array to be updated when the database is updated. Please do not recommend I switch to other frameworks. thank you

$scope.displayData = function() {
    $http.get("read.php").success(function(data) {
        $scope.links = data;
    });
}
setInterval(function(){$scope.displayData();}, 500);

This is my PHP ("read.php")

  <?php
  include("../php/connect.php");
  session_start();
  $output = array();
  $team_id = $_SESSION['team_id'];
  $sql  = "SELECT record_id, user_id, link, note, timestamp FROM             
  link_bank WHERE team_id = '$team_id' AND status = 'valid'";
  $result = mysqli_query($connect, $sql);
  if (mysqli_num_rows($result) > 0) {
        while ($row = mysqli_fetch_array($result)) {
        $output[] = $row;        
  }
  echo json_encode($output);
  }
  ?> 

Answer 1

$http.get is already asynchronous! An asynchronous function is just any function that finishes running at some unknown time in the future.

What you are really trying to do is called long polling. This is where you periodically send a request to your server to get the latest data, and there are several reasons why it's not a good idea (including the flickering and high CPU usage you spoke of).

I know you said you don't want anyone to suggest other frameworks, but trying to write your own framework that will notify the client when the database is updated is a monumental task. There is no short snippet of code we can give you that will give you that functionality from just PHP and Javascript.

However, you could try to roll your own code using WebSockets. That is the most straightforward, non-framework way to have server-to-client communication in the way you are suggesting.

Answer 2

Some details from checking the debug tools, there are tons of network requests that are taking a long time and not returning any new data.

Using the timeline recording to get some details on the client side processing.

The client side isn't suffering that much in the view I'm seeing but without data it's hard to really assess.

You can see by taking a timeline then zooming in on a section of the recorded data what actual functions were called and how long they took. There are also nice extensions for checking $watchers in angular

https://chrome.google.com/webstore/detail/angular-watchers/nlmjblobloedpmkmmckeehnbfalnjnjk?hl=en

You can use {{::bindOnce}} syntax to reduce your watchers if bindings are only ever updated one time (useful in ng-repeats many times). This helps to reduce digest time since less watchers need to be checked for changes. If you have a very long list of elements (1000s) then using some sort of virtual scroller or paging UI-component is helpful to avoid making 1000*elements per row elements in the DOM.

On the server side you can use the xdebug plugin/module for collecting profiling data from the server side and can use kcachegrind to evaluate that data to look for where the server is spending the most time but could also utilize some sort of server side caching and smarter logic there to avoid hitting the database constantly if nothing has changed (perhaps look into using Redis or look into memcached for speeding those server side things up or see if it's just network latency).

Changing languages or frameworks without actually profiling to get data on what exactly is slow isn't a great move IMO will just be jumping around between whatever is the new hotness without an understanding of why or if it matters.

Example below of a relatively fast response from a PHP script. It does basically nothing but spit out a hard coded JSON response, using Redis or memcached there wouldn't be much extra overhead to get back a response especially an empty one.