Building the Realtime User Experience

FriendFeed in Realtime

FriendFeed is a web service that aggregates updates from many different social media sites, social networking sites, and plain old blogs. Not long after the site launched, the developers started introducing realtime features into the site. SUP, as described in the previous chapter, was developed for their realtime needs. Although the site has since been purchased by Facebook, it still has an active community and a full-featured API that will work well for creating a realtime widget.

In building the trending widget, we set up the basic HTML structure along with many of the convenience methods needed to create a basic widget for this application. So to build the FriendFeed widget, we just need to write the code that talks to the server, and we can pass off much of the work to the existing code. To get everything started, modify the Home.init method to look like the following code:

// Get everything started
Home.init = function() {
    // load the trending topics from twitter
    Home.appendJS('http://search.twitter.com/trends.json?callback=Home.catchTrends');

    // Start getting updates from friendfeed
    Home.getFriendFeedUpdates();
};

When everything gets started via the Home.init method, the FriendFeed code will get started as well as the trending code. Add that method as well:

Home.getFriendFeedUpdates = function() { // get updates from friends of "scobleizer" var url = "http://friendfeed-api.com/v2/feed/scobleizer/friends?" + "callback=Home.catchFriendFeedUpdates"; Home.appendJS(url); ...