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


July said...

Your application is so cool. Would you mind sharing the source code? I would like to use it as a start point for a project(my future website)

Unknown said...

Thanks, July.

I'm still adding features and cleaning up code. At the very least I'll post the drawing surface code on github soon. The backend is pretty basic, just a spring MVC java app that writes to channels and persists to the google data store.

PaTh FiNdEr said...

can you please share the complete source code this application

SkovorodKa said...

Yeah we're all still wait for some API or source of your code.

Unknown said...

Posted the whole thing on github:

comments, issues, pull requests, accepted :)

Unknown said...
This comment has been removed by the author.
hobby16 said...

Hi Luis,
Do you think it's difficult to add code to upload a background image on the whiteboard for annotations ?
BTW, congrats and thanks for your nice work.

Unknown said...

@hobby16 thanks for the feedback!

There's actually a hidden drag and drop image feature right now :)

Only problem is, i have to scale the images down because app engine limits the channel message size, and they tend to fill up the datastore.

hobby16 said...

Hi Luis,
Great ! If you are interrested in being a paid service provider (after some minor customisations, particularly in using CometD instead of Google Channel API) of your Collaborative Whiteboard, please contact me.
You must have my email through your account.

Anonymous said...

Hi! Monteslu, I need your help with this.
Please sene me an email to and I will tell you what my problem is

John Barness said...

Thank you for sharing this info.
I would like to ask you to share the source code, if it's possible, in order to try it on my project connected with the cloud-based application. The one should implement virtual data room solutions.