Server polling with JavaScript

Question

What is best practise for polling server with JavaScript for application that needs to refresh data very rapidly? I'm using jQuery for front-end and Java Spring Framework for backend.

Example of refreshed data could be list of items that are getting updated very rapidly (every 1 second).

Answer 1

You may want to use jQuery's Ajax functions to poll the server every second or so. Then the server can respond with instructions to the browser in near real-time.

You can also consider long polling instead of the above, to reduce the latency without increasing the frequency of the polls.

Quoting Comet Daily: The Long-Polling Technique:

The long-polling Comet technique is a technique that optimizes traditional polling to reduce latency.

Traditional polling sends an XMLHttpRequest to the server in fixed intervals. For example, open a new XMLHttpRequest every 15 seconds, receive an immediate response, and close the connection.

Long-polling sends a request to the server, but a response is not returned to the client until one is available. As soon as the connection is closed, either due to a response being received by the client or if a request times out, a new connection is initiated. The result is a significant reduction in latency because the server usually has a connection established when it is ready to return information to return to the client.

In addition to the above, I also suggest that you check out the accepted answer to the following Stack Overflow post for a detailed description of the long polling technique:

• How does facebook, gmail send the real time notification?

Answer 2

I second Daniel's suggestion to use long-poll or push. Check out

• CometD Bayeux Ajax Push

CometD is a scalable HTTP-based event routing bus that uses a Ajax Push technology pattern known as Comet. The term 'Comet' was coined by Alex Russell in his post Comet: Low Latency Data for the Browser.

They have a page explaining how to get that work with Spring:

• http://cometd.org/documentation/cometd-java/server/services/integration-spring

Answer 3

As of 2018 you should use the fetch function with promise syntax:

<script type="text/javascript">
setInterval(function(){
  fetch("your_serverside_script.php") // Any output from the script will go to the "result" div
  .then(response => response.text())
  .catch(error => document.getElementById("result").innerHTML = error)
  .then(response => document.getElementById("result").innerHTML = response)
}, 1000); // Poll every 1000ms
</script>

<div id="result">result will appear here</div>