Building a RSS Reader – Part 2

This is a continuation from my previous post. If you haven’t checked it out, you can go to this link.

Now that we have successfully retrieved a feed from the web. It’s time to add more functionality and user interface to this application.

We will have a single JavaScript file to hold all the methods to retrieve feeds from the website dynamically and periodically. Let’s call this file FeedManager.js.

Feed Manager

First we will need some global variables for our entire application.

// Holds all the Feeds Information accessible to the application
var feeds = [];

// Holds all the cached feeds data
var cached = {};

// Points to the information of the currently active feed
var currentFeed;

The code is pretty self explanatory and documented. We will keep the feeds information such as its URL and Name inside the feeds array. Since the information is to be periodically updated, we will also maintain a cached version of the downloaded feed so as to minimize downloads.

Now we will define some methods to interact with the list. Before we proceed, let’s define what a feed is. As this will be very important later.

var feed = {
		title: title of the feed
		link: url of the feed
		lastUpdated: time in millisecond of last updation
		failed: Is the last updation failed?
		autoUpdate: Should the feed be auto-updated?
		interval: time in millisecond after which the feed should be auto-updated.

Now we move on to add() method which will take title and URL of the feed as input and insert a feed object to the list.

var add = function(title, url) {
	var feed = {
		title: title,
		link: url,
		lastUpdated: 0,
		failed: false,
		autoUpdate: true,
		interval: 15*60*1000


	var id = feeds.length-1;

	currentFeed = id;


	feed.updater = setInterval(function() {
	}, feed.interval);

	return id;

Don’t worry about the sync() method right now. As this will be defined later. Next we move on to the updateInterval() method to provide dynamic updation of auto-update interval for a specific feed. Notice how the add() method returns the location of feed inside the list. We will use this location to refer to this feed from now on.

var updateInterval = function(id, int) {
	if(typeof feeds[id] != "undefined") {
		toggleAutoUpdate(id, true);

		feeds[id].interval = int;
		feeds[id].autoUpdate = true;

		feeds[id].updater = setInterval(function() {
		}, feeds[id].interval);

Now since the auto-update interval is changed, we will assume that user wants the feed to auto-update. Hence we have set the auto-update on with toggleAutoUpdate() method.

var toggleAutoUpdate = function(id, flag) {
	if(typeof feeds[id] != "undefined") {
		if(feeds[id].autoUpdate || (typeof flag != "undefined" && flag)) {
			feeds[id].autoUpdate = false;
			return true;
		} else {
			updateInterval(id, feeds[id].interval);
			return false;

Next, we define a method to remove a feed from the list. let’s call it remove() for obvious reasons.

var remove = function(id) {
	if(typeof feeds[id] != "undefined") {
		delete feeds[id];

Next we define a method to retrieve the feeds from a website. Remember the code in the last post. Let’s call it fetchFeed() method.

var fetchFeed = function(id) {
	var url = feeds[id].link;

        // wait for 120 seconds before sending another request
	var threshold = 60000; 

Now we do one of two things. First we check whether we can use our cached copy of the feed. If the threshold hasn’t been crossed and cached copy is available, we will just show the cached feeds using method showFeed(). If any of above condition fails, we will have no option but to retrieve a new copy of the feed.

	if(currentTime() - feeds[id].lastUpdated < threshold && typeof cached[url] != "undefined") {

		// Use previous collected results
		if(currentFeed == id)
			showFeed(id, cached[url]);

	} else {
		new Ajax(url, function(result) {
			feeds[id].failed = false;
			feeds[id].lastUpdated = currentTime();

			if(currentFeed == id)
				showFeed(id, result);

			saveFeed(url, result);
		}, function(err) {
			feeds[id].failed = true;

In the previous methods, we used three methods showFeed(), currentTime() and saveFeed(). showFeed() method is dependent on the UI of the application, hence we will define it when we start with UI.

// Cached the feed
var saveFeed = function(url, data) {
	cached[url] = data;

// Returns current time in milliseconds
var currentTime = function() {
	return (new Date()).getTime();

Finally, we define sync() method. This is responsible for calling the fetchFeed() method. If a valid ID is provided to the method, it will update that feed otherwise all the feeds are updated.

var sync = function(id) {
	if(typeof id != "undefined" && typeof feeds[id] != "undefined") {
	} else {
		for(id in feeds) {

This is it for now. In the next post, we will build the UI of the application.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s