Simple long polling example with JavaScript and jQuery

Question

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>

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
– kennypu, Commented Dec 25, 2012 at 1:35
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
– technojas, Commented Dec 25, 2012 at 1: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
– kennypu, Commented Dec 25, 2012 at 1:39
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
– jermel, Commented Dec 25, 2012 at 1:44

technojas · Accepted Answer · 2012-12-25 01:51:00Z

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

answered Dec 25, 2012 at 1:51

technojas

2691 gold badge2 silver badges7 bronze badges

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

5 Comments

Beetroot-Beetroot Over a year ago

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 Over a year ago

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.

Renaud Over a year ago

@Beetroot-Beetroot the complete call will occur even after a timeout (error), you must be thinking about success here.

Beetroot-Beetroot Over a year ago

@Reno, I always think about success. That's what optimists do!

user520655 Over a year ago

This code seems to ignore the timeout value, and calls the loop function crazily.

Collectives™ on Stack Overflow

Simple long polling example with JavaScript and jQuery

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related