display number of message dynamically using javascript or asp.net

Question

I will do my best to explain my problem to avoid people pointing me into different directions.

I got an assignment from business people. I don't know the terminology. It is very similar to email notification, message notification on facebook, notification on social media games.

For example, people are sending 20 email messages 5 minutes ago. the screen will display 20 (see attachment). Now, 3 more messages have arrived, the web page should update the number to 23.

Facebook has similar concepts when our friends like/comment message. The notification changes. Same thing is true on social media game. Any status changes on our game, it will reflect it.

I kind of have idea on how to do it cosmetically (on CSS). How to do it using javascript/asp.net. Do I need to postback in order to refresh the message. I never pay attention to that on facebook/yahoo email/social media games. All I know is something is happening, the webpage is updating the status.

Sorry the question is too broad. If someone can help me to point to the right direction, I appreciate any help

Answer 1

HTML5 introduced a very interesting concept call Server-Sent Events in which server can dynamically connect to the client and send data.

Eg:

var source = new EventSource("demo_sse.asp");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data + "<br>";
};

And on server side you can write,

<%
    Response.ContentType = "text/event-stream"
    Response.Expires = -1
    <!--Writing "data:" is important-->
    Response.Write("data: The server time is: " & now())
    Response.Flush()
%>

However, some old browsers may not support this.

One other way to accomplish this task is to use Ajax call as,

function checkNewMessages(totalMessages){
return $.ajax({
    url: 'demo.asp',
    type: 'GET',
    cache: false,
    data: {
       totalMessages: totalMessage;
    }
});

}

checkNewMessages(totalMessages).success(function (data) {
    // display the data wherever you want
});

    //Checking for new messages every 5 seconds
    setInterval(checkNewMessages(totalMessages,5000));

Whatever you write within your Write() in server side will be displayed here. Now to constantly check for the new messages you can call the above ajax function with the help of setInterval()

Answer 2

There are many ways to do this, depending on how real time you need it to be.

The most common way is to use JavaScript with an XmlHttpRequest to call an ASP.NET page which returns the number of messages, I recommend you use a JSON object for this. The benefit of this approach allows you to request data from the server without the user experiencing a full page refresh. You can use JavaScript to set it to call every x seconds depending on your requirements.

Collectively that is known as AJAX, using a JavaScript library such as JQuery can make this much easier.