Twitter like new tweet count notification in ASP.Net

Question

I have very limited knowledge in jQuery. I need to develop a page which should show the count of new message posted. In twitter and stackoverflow websites, I have seen a div which shows the count of new tweet/questions posted and while clicking on it, the newer ones are shown on the top. Below added are the sample images:

Please suggest whether it can be attained using jQuery or Ajax. Thanks

Answer 1

Those examples look like push rather than pull behaviors. By this I mean that the server is saying to the page 'hey there is a new tweet in this tag' rather than the page asking 'is there any new tweet? No not yet? OK, I'll ask again in 5sec'.

Since you are on ASP.NET, you can easily push notifications from server to client by using the good SignalR library.

You still have to detect on the server that there are new 'things' and send a message (with signalR) to the matching clients. And also handle the message on the client and show a piece of UI.

Answer 2

As you are using ASP.NET, you can use an UpdatePanel to help handle making the call and updating your content. Note that the UpdatePanel uses AJAX, and can be set to automatically update on a specified time interval.

What I would do, if I were you, is use the UpdatePanel to call a method that makes a request to the Twitter API and grabs all of the new tweets that you have not already grabbed. Then count the number of tweets returned and, if that number is greater than zero, I would display the "X tweets with new activity", or whatever counter message you are looking to show.

If you are not strong with jQuery, this may be the best solution for you, as you could get away with using the UpdatePanel and a Repeater to render out your tweets, and update the ones displayed when clicking a button/link/etc, with or without postback (whichever is your preference for this implementation).

Important Side-Note

Note that Twitter API v1.1 requires you to use oAuth Tokens, which should not be included in AJAX calls. You should only be using server-side code to make requests to the Twitter API, and, thus, this solution is likely to be the best for you, as you can write your request code in the code-behind (thus keeping your Twitter keys and tokens safe), and call it using the UpdatePanel.

Update

I am not usually one to promote my own libraries on Stack, but if you need help with making the request to Twitter's API using oAuth, take a look at my C# library for Twitter requests. The documentation includes instructions for setting up oAuth access on Twitter and is very verbose in helping you make calls with the library. It also includes MSDN-style documentation for the library, itself, an example request, and full IntelliSense for all classes, methods, and properties. If nothing else, it should help you set up your requests. If you have any trouble with it, let me know and I can help you out.

Answer 3

You need to retrieve the new messages using a $.ajax call which you repeat every few minutes or so using setTimeout. But for that ajax call to work you have to have some sort of API endpoint you can retrieve the data from.

This is not just something you can build by dropping in a jQuery plugin somewhere and be done with it. You need to have knowledge about Javascript, jQuery and your specific API before you can do anything. Try checking out the jQuery basic tutoorial.