6

I'm trying to create a real-time website analytics dashboard which creates an open HTTP connection to the server using jQuery/JavaScript asynchronously to poll the server for updates to the data as and when they occur.

The obvious start for this would be to use an XMLHttpRequest object or jQuery's $.ajax method to send a GET or POST request to the server asynchronously requesting some data.

However, beyond sending one request at a time using a setInterval method every 30 seconds I am not sure how to make the connection to the server persistent. Basically, I only want to send one http request and ensure the connection to the server stays open for polling!

My example code with setInterval is as follows:

<div id="analytics"></div>
<script>
var analytics = document.getElementById('analytics');
setInterval(function(){
    $.ajax({ url: "http://server.com/", success: function(data){
        analytics.innerHTML = data;
    }, dataType: "json"});
}, 30000);
</script>
technojas
  • 269
  • 1
  • 2
  • 7
  • 1
    is there any reason why you need to send only one http request? you may want to look into websockets if you want a persistent connection. – kennypu Dec 25 '12 at 01:35
  • http doesn't work that way – charlietfl Dec 25 '12 at 01:38
  • I guess two reasons I want persistence: (1) it will ensure my updates are more real-time and (2) I think its better performance i.e. less thrashing the server with multiple requests? – technojas Dec 25 '12 at 01:38
  • @technojas as charlietfl said, http isn't like tcp connections etc. and it doesn't work that way. Use websockets if you must have a real connection. on the other hand, I don't think there is anything wrong with sending an ajax request frequently, especially every 30 seconds. – kennypu Dec 25 '12 at 01:39
  • why setInterval if you want a persistent connection? – jermel Dec 25 '12 at 01:40
  • @jermel - I was just showing you my current code. I don't want to use `setInterval`, I'm looking for an alternative which creates persistence. `WebSockets` sounds good - is there an example? – technojas Dec 25 '12 at 01:41
  • 2
    if you are doing long polling, you will need special care on your server side (non-blocking i/o), look at socket.io, or research comet projects for your server – jermel Dec 25 '12 at 01:44
  • Long polling is not a single request technique. One request is issued per cycle in the normal way. The difference with long polling over standard polling is the "respond when new data is available" factor at the server as is useful, for example, in a "chat" app. For an application that requires a regular poll, long polling is an unnecessary complication. – Beetroot-Beetroot Dec 25 '12 at 04:57

1 Answers1

12

After searching online, this was the answer I was looking for which doesn't use sockets.io nor WebSockets but does use jQuery by taking advantage of its complete method to create an artificial loop:

<div id="analytics"></div>
<script>
var analytics = document.getElementById('analytics');
(function poll(){
    $.ajax({ url: "server", success: function(data){
        analytics.innerHTML = data;
    }, dataType: "json", complete: poll, timeout: 30000 });
})();
</script>

Source is Tian Davis from Technoctave: http://techoctave.com/c7/posts/60-simple-long-polling-example-with-javascript-and-jquery

technojas
  • 269
  • 1
  • 2
  • 7
  • 2
    With the code as written above, I think you will find the poll cycle will fail permanently if a timeout occurs. You probably don't want that, so you will need to take measures to ensure it continues, eg. with some sort of custom timeout mechanism rather than the the built-in `timeout:30000` approach. – Beetroot-Beetroot Dec 25 '12 at 05:07
  • 4
    In addition, `poll` will be called as soon as each HTTP response is received - no delay - so the code certainly doesn't meet your non-thrashing requirement. – Beetroot-Beetroot Dec 25 '12 at 05:12
  • 2
    @Beetroot-Beetroot the complete call will occur even after a timeout (error), you must be thinking about success here. – Renaud Aug 07 '13 at 09:12
  • 5
    @Reno, I always think about success. That's what optimists do! – Beetroot-Beetroot Aug 07 '13 at 20:35
  • 3
    This code seems to ignore the timeout value, and calls the loop function crazily. –  Mar 20 '14 at 19:56