think pink: Announcing Chatrbox

Announcing Chatrbox

As you all may have noticed, I’ve been playing around with some cool live-action stuff. At FOWA London, I built a live Twitter feed. The original idea was to build an app to complement HelloApp, a .NET site built by Carsonified for the FOWA conference. I was planning on using standard every-day Twitter polling to get the tweets from attendees, to get a “real-time feed” of the FOWA tweets. Along the way, I discovered two things; One: the Twitter Streaming API, which allows users to pull tweets straight off the Twitter “firehose” live-as-you-can-be, and Two: a way to stream content to the browser.

The secret behind all this is a great Rails plugin called Juggernaut – a push server that sends Javascript to the page using a Flash bridge. Built by Alex MacCaw, it’s a clever way of doing Comet-style long polling, but without the hackiness of long-polling requests. As much as I hate Flash, it’s great for opening sockets and streaming data – something I’m looking forward to with Websockets in HTML5. Long story short, tweets went from your phone to the big screen instantly. No polling, no waiting, just pure Twitter streaming fun. It was absolute madness – turns out it’s crazy to watch 700 people start posting their thoughts onto a massive projector screen. I even got dragged on-stage.

So why this belated post? As you may or may not know, I’ve just launched a new app: Chatrbox. Featuring the stunning design work of @dizzyup, it’s a live-action IM chatroom, featuring Twitter authentication and login. You can create rooms, invite your friends via DM, and talk to people like it’s 1999 and you’re hanging out in a Yahoo! chat room.

On the technical side, there isn’t much to the back-end. Messages are passed in and out using a very simple JSON API, and saved in a DB along with rooms. Messages are passed to the user using Juggernaut, and then rendered into HTML using jQuery. There’s a backup polling system for the iPhone, or browsers without Flash. Twitter is only for authentication, and for inviting others to join in.

The cool part, I think, is the front-end. I’ve been taking advantage of jQuery as usual, and it’s been seriously fun. Before now, most of the Javascript i’ve hacked together has been fairly procedural – except for my Snake plugin, which I rewrote in OO code (I should definitely release that as a plugin some day). This, though, was a lot of fun. Safari and Firefox both have ridiculously fast Javascript engines, which means that you’re free to pretty much do what you want in Javascript. The code behind the app is all-Rails, the code in front is all-Javascript. We don’t need no steenking templates! In fact, there are no HTML templates for messages whatsoever. Everything’s handled by Javascript.

Javascript as a templating language is great for post-render updates. I don’t have to tell the UI where a message should go – it looks at the message’s room_id and inserts it accordingly – which means I can have “unread messages” notifications pop up. Instead of using the HTML as a database, and jQuery as a query system, pulling stuff out by class and ID, I can do it backwards – maintain my data in Javascript objects, and render to HTML.

Unfortunately, this means that the app doesn’t degrade. If you’re not using Javascript, it just plain won’t work. I can’t see myself ever making it degrade, either – it’s not that kind of site. Short of an all-Flash UI, there’s just no feasible way to do chat without it. If you want to disable Javascript, that’s fine – but you’re going to re-enable it if you want my stuff to work. Javascript is just as necessary as CSS.

So there you have it – a fun, interesting, Twitter-based chat room. I’m planning on adding file-uploading, private rooms, and a few other cool features that may or may not be paid-for. For now, though, I’ll be happy if everyone gives it a go. Also, don’t forget to leave a comment below; it makes me happy when people comment :)