Home arrow AJAX & Prototype arrow Build A Better Twitter Chat Client Than Chamillionaire

Build A Better Twitter Chat Client Than Chamillionaire

Tuesday evening, August 4th, the musician Chamillionaire launched a live, first showing video on his website along with a Twitter-based chat client. While the Twitter chat client worked from a data perspective, based on what the code showed it looks like most browsers would crash.

By: Dev Shed
Rating: starstarstarstarstar / 1
August 04, 2009

print this article



Chamillionaire, known for his song, "Ridin' Dirty", announced a live event on his website located at http://www.chamillionaire.com/live.html.  While traffic spiked, the site appeared to be functioning slowly but fine.  However, a clever implementation of a twitter chat client may have ruined the evening in the long run for thousands of fans.

The site uses twitter's api to establish a user's identity, then allows them to tweet live, linking it to the hashtag "#chamillionaire".  The chat client then pulls live data down from the twitter server and shows it in a chronological order.  Thus, the site has effectively created a chat client with only api calls and twitter as it's backbone.

Great and innovative so far.  However, two major problems exist with this implementation-

1:  The chat window does not scroll, nor does it offer any kind of history.  With literally hundreds of tweets going by in seconds, it's impossible to see your own twitter chats appear in the client.  The right thing to do would be to limit the window to the past 100 tweets and allow scrolling of some sort, or a paginated cache to see what conversatons are going on.

2:  The code, via AJAX, actually manipulates the DOM to insert new twitter chats into the client.  Not a problem, except no other list items (the tag used in this chat client) are being deleted.  At some point, depending on each person's memory and cpu, the browser will crash due to 1000's of list items being added to the DOM.  The right implementation of this twitter client, for AJAX, would be to set a maximum number of rows and for every new DOM list item (<li>) tag added, an old one would be deleted or removed from the stack.

For more information:

Twitter's API Guide - Twitter
jQuery - PHP, AJAX and the Twitter's API - Steve Reynolds

>>> More AJAX & Prototype Articles          >>> More By Dev Shed

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates


Dev Shed Tutorial Topics: