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.
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.