javascript - 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?

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.