Twitter Trends Web App

Live Demo: http://experiments.coderonfire.com/live_twitter_search/

The Idea

Twitter is a fantastic source of real-time information. With millions of active users, receiving information can be difficult. While Twitter does provide search functionality, a site based embedded solution would provide greater flexibility for site owners and could act as secondary information for site visitors. With this in mind I set about coding a real-time twitter application what could filter live tweets and display them in a dynamic waterfall.

Technology

At the core of the application is Twitter's API. Search strings are passed to the API and the latest tweets that contain those keywords are returned. The API is polled every few minutes and newer tweets added to a queue.

Both the AJAX polling and the HTML DOM displaying of the tweets are handled by jQuery. I created an object namespace which contain the variables and methods, this allows for the inclusion of the application with site that has additional JavaScript applications running. The whole application is initiated on page load and the polling starts upon a user search.

As an added bonus, current trending topics are included on the page. These trends are an additional service of the Twitter API provides.

Code

The entire application uses client-side JavaScript to poll a remote server and display the returned results in the client's DOM.

A unique URL is constructed using the API address and search keywords, this is then sent to the Twitter API via a GET request which is handled byjQuery's getJSON method. While cross-domain JavaScript calls can be troublesome, the jQuery getJSON method happily mitigates this issue.

Once the JSON has been received, the tweets are added to an array. Then, using a setInterval, the first tweet in the array is removed and added the to DOM with a dynamic show animation.

To prevent twitter user profile images from 'popping' in due to delayed loading, they are pre-cached upon a successful GET response. To achieve this the images are append to the DOM inside a DIV that is hidden from the users view. Added the images to the DOM causes the client browser to download and cache the image.

I also added 'pause' function to allow users to pause the flow of tweets. At any time the user can click on a tweet and it will pause the flow, highlighting that particular tweet. Clicking on the tweet again willun-pause and return the flow into motion.

Conclusion

Overall I'm happy with how the application turned out. I created it to learn more about the Twitter search API and visualise the real-time nature of the twitter stream, which I achieved. I learnt a lot from the AJAXJSON GET requests, most important was the handling of error responses. Initially I was assuming I would always be receiving 200's but Twitter has a limit to the number of request you can ask from every hour. Therefore, catching error code and gracefully handling them is an important part of any web based application.

Firebug's Net view was invaluable during development, providing detailed insight into variables passed via HTTP GET request and responses. Additionally, using Firebug's built in console.log() method to print variables to the console window helped speed up the debugging process.

Going forward the application could be developed further by integration with CMS Widgets for the likes of Wordpress and iGoogle. Additionally, the search results are not being caches, so the hourly API limit is likely to be hit quickly under heavy use. Creating a intermediate layer that stored the results in a database would elevate this issue.

You can view the application for yourself at http://experiments.coderonfire.com/live_twitter_search/