How to push new HTML data from the server to the browser without refreshing the page

Question

I have seen many websites (facebook or stack overflow for instance) that will update certain features as new data is generated (new answer on a post for example).

Lets say that there is a new post added to a blog and someone is in the blog in that moment looking at it, the idea is to automatically add the new post to the blog without refreshing or having the user to do any action.

I have thought of executing an AJAX call every 5 seconds or so, but that will make too many requests to the server, and I saw that the websites I mentioned (which renew content) don't make any new requests.

I am really out of ideas of how to achieve this. Is this possible with PHP and AJAX? I've heard of websockets too. Any ideas? Thanks

Answer 1

Great question! There's a few solutions.

There's been a relatively new solution to this call websockets. It's in the HTML5 standard and there's a lot of libraries for it on other languages too.

One of them is sockets.io ( javascript ) - it enables you to keep a consistent, low-latency connection with a server to receive information as it's generated. There's also plenty of plugins for php, c, and python for the server side.

To name a few: libwebsockets ( c++ ), pywebsockets ( python ), and jetty ( javascript )

And for php: http://socketo.me/

Visit this link for more info: http://www.html5rocks.com/en/tutorials/websockets/basics/

Answer 2

You can use HTML5 SSE. But that's not a very good solution.

You can use Comet server that helps in Long AJAX polling. Check out the Ajax Push Engine (APE). It's a combination of Comet Server and a Javascript framework to make AJAX-PUSH or real time streaming possible.

cheers! :)