Real-time Collaborative drawing: Node, Socket.io & PaperJs12 months ago
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)
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
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.