Wednesday, December 15, 2010

Collaborative Whiteboard - Channel API and comet

I thought it would be fun to build something in order to learn the new Google Appengine Channel API.    The Channel API is a way to do a server push, much like comet technologies that have been around for a while.

I've used the excellent comet implementation for a while now and will continue to.  Cometd allows you to setup "channels" (sort of like chat rooms)  and have clients connect and send and receive JSON messages on those channels.  This works really well.  When a user with web browser publishes a JSON object to a channel, the server can do something with it and pass it along to all the other user.

The Google Channel API can achieve the same results, but the architecture is a bit different.  A channel in the Google Channel API, isn't analogous to a chatroom.  It is a one-way connection from the server to an individual client.  So each client establishes their own named channel to an Appengine web app, and the web app stores the names of the channels somewhere (like big table).  Then the browser can do things like post AJAX messages to a servlet on the web app, and the web app can push messages to the named channels that were saved earlier.

Both the Cometd and Channel API approach can allow you to do some really interesting web applications.

Here's a collaborative chat / whiteboard application that uses the Channel API as well as dojo for the user interface:

Collaborative Whiteboard

The whiteboard doesn't use any plugins and most browsers will work. Chrome seems to run it the fastest.  You don't need a password, just give it any username, invite friends and start drawing.  You can also fire up 2 different browser (say firefox, and chrome) to see it working in real time, if no one else is around to draw with you.

Here's a screenshot of it after several different users did some scribbling for a while:

Would love to hear feedback and suggestions here.

you can follow me @monteslu for updates