Implementing a news feed system in Java EE and jquery

I am going to implement a news feed notification system where I will show new items on my webpage. Like this: http://jsfiddle.net/8ND53/.

I will be calling a Servlet say every 5 seconds to get updates and the servlet will return items in json format. That seems very simple, but how do I manage that all on the server side?

What I think is:

I have to keep track of the last item (by date) sent to a user so that next time I can fetch new items from the DB.

Is their any standard way of doing such things?

Solution

Just an idea!

I will assume that you make a bean, dao and service layers from your db table that contains the feeds.

At first moment when the page that will retrieve the feeds loads, get all your feeds from a java function and then fill your div with your feeds.

Get the feeds count from your feed container. Now pass the count through jQuery $.post and then to your servlet. To achive this, do the following:

e.g:

//Find divs inside the parent div that will contain your feeds
function getCount(){
  return $('#feedContainer').children().find('div').size().toString();
}

//Don't forget to pass it to your jQuery post like this 
//(Please, continue reading to understand where to put this)
$.post('/servlet', count:getCount(), function(data){ //manage your new feeds });

Your servlet will receive something like this:

e.g:

String count = request.getParameter("count");

Now that you have the count, verify or just parse as an Integer and then do a list in java. I suppose you have a function to get all your feeds from DB.

e.g:

//Parse it as integer
int feedCountFromUI = Integer.valueOf(count);

//Do a list and call your function to get all feeds from DB.
MyService myService = new MyService();
List<MyBean> feeds = myService.getAll();

//JSON variable
JSONObject result = new JSONObject();

//Fill your JSON variable
for(MyBean mb : feeds) {
   //Build a json with your feeds and fill result
}

Suppose that now you have a JSON Object variable called result in your servlet with your feed values filled in the for done above. Now get the count from your list declared as feeds (from above too).

int feedCountFromDB = feeds.size();

You are now close to finish, compare the 2 counts. If the feedCountFromDB it's more than the feedCountFromUI, means that there are new feeds to load.

if(feedCountFromDB > feedCountFromUI){
  //Send your json variable (result) to your jquery post callback
  out.println(result);
} else {
  //Means there is nothing new, print 0
  out.println(0);
}

At this point you just need to fill your feed container with the last feed every 5 seconds like this:

(You can add also your jQuery animate function from your jsFiddle at this point)

setInterval(function(){
  $.post('/servlet', count:getCount(), function(data){ 
     //If data has feeds (it's not 0)
     if(data != 0) {
       var lastFeed = data[data.length - 1];
       $('#feedContainer').append('<div>' + lastFeed.title + '<br/>' +   lastFeed.description + '</div>';
     }
  });
}, 5000);

This will always check the count from your web interface and then compare it with the count from DB each 5 seconds to get your new feed.

Hope this helps :-)