Real-time Collaborative drawing: Node, Socket.io & PaperJs

Recently I’ve spent a little time playing with 3 really exciting technologies: nodejs, websockets via socket.io and HTML5 Canvas via paper.js. The result is very crude, but could probably be described as a real-time collaborative drawing tool.  Check out a new and improved version by @johnmcclear.  The old version died as I didn’t update my nodejitsu account.

These are really cool technologies, so I wanted to write a little about my experiences with them.

A collaborative drawing from the app. There were 11 artists connected at the time

NodeJS & Node Package Manager (NPM)

The quick description of Nodejs is javascript on the server. Because javascript is asynchronous and event driven Nodejs is great for data intensive real-time applications. Its not going to be everything to every project, but it is ideal for a real-time collaborative drawing application. If you are interested in node I’d recommend the video Introduction to Node.js with Ryan Dahl

NPM is a command line interface for managing node packages. What this means is that installing frameworks, libraries or dependencies is just a few key strokes away. I found NPM to be really intuitive and very similar to working with Ruby Gems in the Command Line.

Express Framework for Nodejs

Express is the aspect of this project that I’ve probably had the least contact with. But I can say that Express:

• was easy to install, and configure
• followed a familiar MVC structure
• Kept of the magic out of the way by putting complexity out of harms way

One aspect of Express I particularly liked was its use of the Jade Templating Engine (think haml for javascript). I’ve not had much experience using templating engines so at first I was a little sceptical. But I found Jade to be very intuitive and very quickly it was saving me time over writing the full markup. Jade is another way in which developers and designers can save time and saving time should be what frameworks are all about right?

Paper.js

Paper JS is a library for HTML5’s Canvas and a very good one because it provides an easy to understand API for common canvas concepts such as co-ordinates (Points), Dimensions (Size), Transformations (Matrix), Paths, colours and many many more. Because Paper makes the common concepts in canvas really easy, PaperJS is a dream to work with.

Paper.js makes drawing  onto HTML5 Canvas really easy

Websockets With Socket.io

Websockets allow a continuous connection between the server and the browser. This connection allows data to be between browser and server and then onto other connected browsers. In the case of draw stuff when a user finishes dragging, I send the co-ordinates they dragged to the server, which then sends it to everyone else. This is the real meat of what makes draw stuff work.

Real-time communication has been possible for a while now. But the fact that Socket.io runs in the browser and on the server has made real-time communication feel easy, even fun! The consistant API and language between server and client are a dream to work with.

Node.js, Socket.io, PaperJS: Serious fun

I hope an obvious recurring theme throughout this post is fun. Thats because these 3 technologies are serious fun to play with. More than just being fun I suspect that real-time is increasingly going to become the norm (is it already?). That means that the designers and developers who can gain experience implementing real-time are going to be at a major advantage.

I’ve not decided where to push this weekend hack project yet, but I do have a number of exciting ideas. If you fancy exploring them with me feel free to checkout the repository on github and tweet or email me if you want to plan a hack day around it.

Update

I presented on Draw Stuff at javascript NorthEast in Newcastle.  You may find the blog post Presenting at jsNortheast interesting (slides included).

The old version died as I didn’t update my nodejitsu account.  A new and improved version  has been released by @johnmcclear.  You can find the repository on gitHub.