Ajax Long Polling to your RESTful API

Hello!

Whether your developing a mobile or web based application, keeping on top of constantly changing data is a challenge on its own. Sometimes its necessary to make repeated calls to your API to pull updates at regular intervals.

We wrote a previous blog post describing how to use Ajax to pull JSON data via a RESTful web API (click here to read it).

Somewhat extending that sentiment a bit, we would like to walk through the process of creating an Ajax “polling” process that repeatedly polls the API to pull data over and over again. This will allow you to receive, process and manipulate or display the data as it changes.

The context through which we are using this process is to display changes made to a google map via geo-location updates to a centralized API server that processes updates and returns them to the end users. This particular context is within an Angular Javascript based framework, but it really can be used anywhere that supports Ajax + Javascript.

Here’s the first part of the polling process :

               (function poll() {
                setTimeout(function() {
                           $.ajax({
                                  url: "https://yoursite.com/request",
                                  headers: {
                                  'Content-Type': 'application/x-www-form-urlencoded'
                                  },
                                  type: "GET",
                                  success: function(data) {

What we’re doing above is defining a “poll” function that will essentially be calling itself at set intervals. Within the function there will be a “success” and “error” function nested within. Those functions can be utilized to execute additional checks and balances in order to ensure the data is sanitized and to catch any subsequent errors at every step of the way.

For example, in the “success” function, you could do something like this :

       success: function(data) {
           // check if null return (no results from API)
           if (data == null) {
               // do something if no data is returned, perhaps display static info, reset some arrays or display an error message
          } else { 
               $.each(data, function(index, element) {
                   arrayName.push(element.whatever);
          }
       }

What were doing is checking if the data pulled from the Ajax request is null. If its null, we can do various things such as clear variables or display an error message perhaps. If its not empty, then we will iterate what we will be expecting to be an array of data. We then “push” each iteration into our own array apty named arrayName.

The next step is key. Because we are pulling data at polling intervals, its possible that we will see data that already exists in our array (or ultimately wherever we would be internally storing the data). What we want to do is implement a check within the poll to see if the data returned actually matches what we might already have. If a match happens, then we probably want to ignore it. This is more of a requirement specific to our needs in the context of our project, but I thought to include it here because its interesting and hopefully useful to others.

for (var i = 0; i < arrayName.length; i++) {
    // check if new data received matches what is in internal array
    if (arrayName[i][0] === element.whatever1 && arrayName[i][1] === element.whatever2) {
        console.log('data received is already in array .. skipping');
    } else {
        console.log('new data received! processing ...');
    }

What I'm doing above (in the context of google maps) is checking the latitude and longitude of our internal array against the iterated data. As such, we need to check both the latitude and longitude at the same time (you need both to plot a point on a map, obviously).

You could easily rewrite the above code to only check one element instead of two.

The last part of the code snippet simply defines the polling interval variables such as "timeout" and the actual polling interval (all in milliseconds) :

       }
    })
  }

 },
     dataType: "json",
     complete: poll,
     timeout: 2000
 })
}, 3000);
})();

Pretty straightforward! Find the entire code snippet below , for your reference :

              (function poll() {
                setTimeout(function() {
                           $.ajax({
                                  url: "https://yoursite.com/request",
                                  headers: {
                                  'Content-Type': 'application/x-www-form-urlencoded'
                                  },
                                  type: "GET",
                                  success: function(data) {

                                  // check if null return (no results from API)
                                  if (data == null) {
                                        console.log('no data!');
                                  } else {
                                        $.each(data, function(index, element) {
                                               arrayName.push([element.whatever1, element.whatever2]);
                                               // cycle through internal array to see if match, or existing coordinates
                                               for (var i = 0; i < arrayName.length; i++) {
                                                    // check if new data received matches what is in internal array
                                                    if (arrayName[i][0] === element.whatever1 && arrayName[i][1] === element.whatever2) {
                                                        console.log('data received is already in array .. skipping');
                                                    } else {
                                                        console.log('new data!');
                                                    }
                                               }
                                         })
                                  }

                                  },
                                  dataType: "json",
                                  complete: poll,
                                  timeout: 2000
                                  })
                           }, 3000);
                })();

Subscribe
Notify of
guest

4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
irach11 .
irach11 .
5 years ago

Hi,
a question.
I’m struggling to get the idea to code a polling piece to check if new message came out aka livechat. The idea is to check via ajax if a new post with a subject and body with specific keywords comes, and add it to the top. if not, don’t add anything and check it again. Pretty much like in the code here. Any code snippets highly appreciated. JS is not my strongest suit :-(. I’m guessing I have to compare strings, new response vs latest existing, create a new

  • element and add textnode…
  • shift8web
    shift8web
    5 years ago
    Reply to  irach11 .

    Check lines 15-20 in the last snippet of the post. Instead of pushing the element to an array, you could do some pattern matching conditional logic :

    var res = element.match(/keyword/g);

    If variable “res” contains any matches then you can execute your subsequent code

    irach11 .
    irach11 .
    5 years ago
    Reply to  shift8web

    sorry for confusion.
    what I need is to check if the new post is posted, if it’s, pop it at the top of old message (like new

  • New message here
  • ), maybe, using append().
    If the post match the old one, don’t do anything.
    The question is:
    – what is the logic to compare old message and new message and parameters that needed to be passed when polling with Ajax?
    – and can I use just get() method and how?
    – the key words to match is another story… I have to write the part when the user is typing in search box, look for matching keywords in existing posts, compare messages and pop them as suggestions every, let’s say 3 sec with Ajax… –> it’s the whole idea..
    I decided to find pieces and put all together. Your blog is the closest whatever I’ve found…at least getting Ajax piece…
    Thank you.

    MalcomXWasRight
    MalcomXWasRight
    5 years ago

    这篇文章是惊人的