1

** 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);
  }
  ?> 
1

2 Answers 2

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.

Sign up to request clarification or add additional context in comments.

8 Comments

What i mean by other frameworks, is to suggest i scrap angular 1.x and/or php and start all over with new frameworks. I don't mind adding to what I already have.
Ok, great. Take a look at Ratchet (socketo.me) for PHP. That should get you started.
@AbdulAmoud PHP is a language, JS is a language, Angular is a framework just to clarify. Also the way you are polling is very inefficient especially if the network latency ends up being close to your 500ms interval. The other issue is you're using $http which automatically triggers a digest and you're replacing the array every single time regardless of if something changed or not. If you send along the last changed time and in the response indicate if the data has changed you'd have far less "flickering". Use the chrome profiling and timeline tools.
I doubt if getting the data in a more efficient way is going to matter too much it seems like mostly problems with the way the client side code is written currently it just needs to be optimized.
I was looking at socket.io website, and it seems like it only focuses on node.js.
|
0

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.

enter image description here

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

enter image description here

enter image description here

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.

enter image description here

9 Comments

Thank you for the detailed answer, but I really was hoping for a change in how the service is carried out.
@AbdulAmoud the answer is it depends and you need to gather more data to identify what is slow really. I left some suggestions on common problems/solutions but there is no silver bullet.
Nothing is really slow, other than the occasional flickering. I haven't gotten any bad reviews. One thing though, if you make an entry and try to select it, so you could copy it, the select disappears before the user gets the chance to copy and that happens because the entry is basically disappearing and replacing itself. This is actually good for now, but I'm aiming to create apps that will potentially, be used by thousands of people, and this will certainly not do.
500ms to get an empty response is pretty slow my server giving a fairly direct response takes about 50ms if you are expecting things to happen in a given window of time then you need to think of slow in terms of that window. For script execution on the client side more than 16ms of execution per frame means frames are longer than 1/60 a second which means you aren't getting 60fps, time is relative. Regarding the "flickering" if you weren't replacing the elements when the data doesn't change you wouldn't have this issue.
Also regarding "flicker" if you can reproduce the issue you are seeing in a jsfiddle or plnkr or somewhere it can be poked at then I can try to address the specific issue but again no silver bullet it just depends on what you're doing
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.