How does Stack Overflow show the updates asynchronously?

Question

On the Stack Overflow site, we can see following updates asynchronously.

Reputation Changes
New question added in question list
New comment added, etc.

As per my understanding, it can be done in XMLHttpRequest (XHR) request asynchronously, maybe with the help of setInterval.

Confusions: In Firefox, no XHR request is coming and even then I can see the above changes asynchronously.

Which kind of implementation is this and how can this be done in ASP.NET MVC?

score 4 · Answer 1 · edited Aug 17 '13 at 13:06

4

This impressive and beautiful stuff is asynchronous calls made from the client to the server using Ajax.

A very simple approach is to use jQuery Ajax to make an asynchronous call inside a setInterval to search for "updates" of a question (this is the question with ID 17779628. We can see on the URL =P). So, the call to the server can pass this ID and a TimeStamp (a date) of the last call made to the server. The server then brings updates that occurred from TimeStamp to DateTime.Now.

I am not sure about the real implementation of Stack Overflow, but I already did a lot of stuff just like this.

Another tip:

There is an improvement. ;) Modern browsers contains implementations of WebSocket. Since sockets are "peer-to-peer" and not "client-server", modern browsers don't need the approach with setInterval. Instead, you can implement a WebSocket opening in JavaScript and then the server can send the updates actively in the moment that it happens (you can use design patterns that include events).

Take a look at CanIUse to see which browsers supports WebSocket.

EDIT

Anyway, I just opened the code for you. The Stack Overflow's JavaScript code uses a singleton design pattern for the JavaScript code. Just take a look at the StackExchange variable in your browser console. That is the heart of the JavaScript code here. As you can see, there is a whole API built upon this StackExchange variable. Now, search for StackExchange.realtime.init('sockets.ny.stackexchange.com:80');

WebSocket initialization

Then, take a look at the implementation of StackExchange.realtime.init at your console. It seems that they support asynchronous updates with WebSocket. This is nice and modern, but only supported by new browser versions. If you need to maintain backward compatibility, you can support both WebSocket (for new) and an Ajax implementation (for old browsers).

Enter image description here

edited Aug 17 '13 at 13:06

Peter Mortensen

30,738
21
105
131

answered Jul 22 '13 at 04:15

Minduca

1,121
9
19

sry, need some time to go through it. Hope u understand. – Imad Alazani Jul 24 '13 at 11:57
No need to hurry =). Take a look at [here](http://stackoverflow.com/questions/5052543/how-to-fire-ajax-request-periodically) for a sample and [here](http://irfandurmus.com/projects/jquery-periodic-updater/) for a plugin that promises to ease your life. – Minduca Jul 24 '13 at 12:12
@Minduca : In your first sentence, `JQuery Ajax` link is present. This is actually creating XHR for each request. On the other hand, if you see console in FireFox, there are a few XHR present while we get some async update for comments/rep/post in Stackoverflow. – Imad Alazani Aug 01 '13 at 12:36
@PKKG, I must say i didn't open the StackOverflow code when i proposed my answer =). I thought that you wanted a similar solution and not exactly the same. Anyway, i just opened the code for you. The StackOverflow's javascript uses a Singleton design pattern for the javascript code. Just take a look at the "StackExchange" variable in your browser console. That is the heart of the javascript here. There is a whole framework built upon this StackExchange variable. Now, search for "StackExchange.realtime.init('sockets.ny.stackexchange.com:80');" – Minduca Aug 02 '13 at 17:21
Then, take a look at the implementation of "StackExchange.realtime.init" at your console. You will see that they only support async updates with WebSockets. This is nice and modern, but only supported by modern browsers. You can support both web sockets and a custom jquery ajax implementation in order to maintain backward compatibility (i will paste this comment as part of the answer). – Minduca Aug 02 '13 at 17:26
@Peter Mortensen, ty for the revision. ;) – Minduca Aug 17 '13 at 19:40

score 1 · Answer 2 · edited Aug 17 '13 at 13:20

1

I imagine they would be using something like SignalR or WebSocket. SignalR will take advantage of WebSocket when available and then fall back to a number of other techniques to achieve the same thing.

edited Aug 17 '13 at 13:20

Peter Mortensen

30,738
21
105
131

answered Jul 22 '13 at 03:49

Nathan Fisher

7,961
3
47
68

Try this with the Nuget Package Manager inside Visual Studio:- Install-Package Microsoft.AspNet.SignalR.Sample – Nathan Fisher Jul 22 '13 at 03:58
Also have a look at the SignalR Github site: https://github.com/SignalR/SignalR/tree/master/samples – Nathan Fisher Jul 22 '13 at 04:00
sry, need some time to go through it. Hope u understand. – Imad Alazani Jul 24 '13 at 11:57

score 0 · Answer 3 · edited May 23 '17 at 11:50

I answered a similar question recently: How do I display real-time information to the user?

As Nathan Fisher said, you'll want to look into Websockets and SignalR.

With regards to you not seeing XHR requests in Firefox, try looking for Websockets instead. In Chrome, I can see a Websocket on every SO page I go to.

Websockets

Notice that is is dealing with information regarding my inbox, my reputation and also while I was writing this answer Nathan Fisher made an edit to his post, so I can see that the page is dealing with that also (I saw "An edit has been made to this post").

How does Stack Overflow show the updates asynchronously?

3 Answers3