CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-4xmlhttprequest
Chamaququm
Chamaququm

Reputation: 6728

How does Stack Overflow show the updates asynchronously?

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

  1. Reputation Changes
  2. New question added in question list
  3. 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?

Upvotes: 2

Views: 232

Answers (3)

Nathan Fisher
Nathan Fisher

Reputation: 7941

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.

Upvotes: 1

Minduca
Minduca

Reputation: 1181

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

Upvotes: 4

Rowan Freeman
Rowan Freeman

Reputation: 16348

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").

Upvotes: 0

Related Questions