How do real time updates work?

Question

Now a days real time updates are common in most popular sites which have heavy usages.

• StackExchange
• Facebook
• Twitter

I'm wondering how do these "real time updates" work? I'm just looking for a general bird's view perspective. I suspect that the JS can't be calling the server every X seconds for an update and then appending that to the <ul>. Is a notification sent from the server went to pull more content?

Would be great if there is a simple how to article that explains this with a demo?

Declan

Two words: web sockets – Sleekit

That's HTML5. – Enuresis

One word: WebSocket – Incoherence

Answer 1

Stack Overflow is using Web Sockets for real time updates. If you take a look in the source code (2012 source code), you would see:

StackExchange.ready(function () {
    StackExchange.realtime.init('ws://sockets.ny.stackexchange.com');
    StackExchange.realtime.subscribeToInboxNotifications();
    StackExchange.realtime.subscribeToReputationNotifications('1');
});

But note that some Opera versions do not support WebSocket. (not until Opera 10.70)

However Facebook does not seem to be using Web Sockets, and I think they are just using simple XHR with a technique called long polling, which the server holds on to the connection until there is new information, and then respond to the request. If you open up the developer tools you can see that there is always one request which has a status of pending.

It is indeed, sending a request every ~60 seconds.

Myongmyopia

Answer 2

It seems that Twitter also uses simple XHR (1 minute intervals) for their "real time updates".

Orthogonal

Answer 3

Facebook uses long polling/Comet. So it makes a connection and waits for a response, if no response, then it times out and tries again. The timeout is around 40 secs. That's how it does most of the instant updating. However they use a combination of techniques. More on long polling here.

http://en.wikipedia.org/wiki/Comet_(programming)

Petrifaction