Real-time collaborative drawing whiteboard in HTML5/JS and websockets?

Question

I'm trying to put together a small(ish) summer school project for some of my advanced students and am researching how to do it best and what to use - hopefully somebody here could point me in the right direction.

What we are interested in is researching if HTML5 came far enough to create a real-time collaborative drawing whiteboard in it - purely by using web technologies without plugins (so CSS, HTML5/DOM and Javascript). What we'd ultimatelly strive for is this - for example have an online canvas/page on a central server displayed on a big screen in the classroom. Then our students/users would take out their smartphones, load the page in their mobile browsers (I'm perfectly ok with limiting this to webkit mobile browsers for now) and draw on their screens with touch/fingers (or on PCs with the mouse - guessing this doesn't make a lot of difference) and it would get updated in real time for everybody - both on their screens and on the central big screen in the classroom.

I'm guessing push/get requests would be too slow for this - could it be solved by websockets? Does anybody have any good JS libraries to recommend for this?

Also what would the ideal (but easier for students to understand) architecture look like. Lets say you have 30 simultaneous users in a clasroom - each of them would connect with websockets to the server and the server would pool/combine all of their requests into one and then return the combined file (some sort of minimal JSON or even just coordinates) for every connected user?

Would websockets and (I'm guessing) canvas be able to take this? So that everything still looks snappy? Are there (jQuery-like) JS libraries available to make our lives easier - or do you think its something thats too complex for a 2-week summer school project?

Solution 1

here's a tutorial describing how to create a multiuser whiteboard with javascript/html5/canvas:

http://www.unionplatform.com/?page_id=2762

the example uses a collaboration framework and server named "union platform". even if you decide to roll your own server and client framework, the messaging in the example should give you an idea of how to structure the code.

for an apples-to-apples speed comparison of websocket vs comet, see: http://www.unionplatform.com/?page_id=2954

in my tests, a basic ping over WebSocket is normally about twice as fast as the ping over http. both websocket and coment are more than fast enough to create a collaborative whiteboard.

Solution 2

Definitely check this out:

http://wesbos.com/html5-canvas-websockets-nodejs/

Solution 3

For the networking side of things, try looking at node.js for the server, along with socket.io for the client.

As for the drawing itself, a few popular choices are processing, raphael and cakejs.

When it comes to the implementation, you may want to look at how networked games deal with similar issues (gamedev.stackexchange.com could be useful).

What you are going to be doing is essentialy the same as a simple top down multiplayer game, with each 'player' in this case being a students fingertip, and the 'level' being the canvas. You need to update the server as to their position and whether or not they are 'shooting' (drawing).

Solution 4

I'm guessing push/get requests would be too slow for this - could it be solved by websockets? Does anybody have any good JS libraries to recommend for this?

If you need real-time infrastructure I've created a list of real-time technologies which might be of use to you. These include hosted service, such as Pusher who I work for, and self-install technologies such as WebSocket and Comet solutions.

WebSocket sounds like the idea choice of technology for you since they have become part of HTML5 and offer the most efficient for of realtime bi-directional communication between a web server and a browser (or other clients).

Also what would the ideal (but easier for students to understand) architecture look like. Lets say you have 30 simultaneous users in a clasroom - each of them would connect with websockets to the server and the server would pool/combine all of their requests into one and then return the combined file (some sort of minimal JSON or even just coordinates) for every connected user?

It sounds like you should probably store the current state somewhere and on the initial load of the application display that state. Then use your real-time infrastructure to send deltas on that state, or if it's a drawing on canvas, just information on the line etc. that has been drawn and information about who drew it.

Would websockets and (I'm guessing) canvas be able to take this? So that everything still looks snappy? Are there (jQuery-like) JS libraries available to make our lives easier - or do you think its something thats too complex for a 2-week summer school project?

Real-time collaborative drawing is most definitely achievable and there have been a number of examples created of this. A google bring up a number of possibilities.

If this technology is completely new to you and you would prefer to concentrate on building the collaborative application then I would consider using a service for your app rather than going through the hassle of learning how to install and configure, or even code, your own infrastructure (I'm not just saying this because I work for such a service. I honestly think it makes the most sense).

View more solutions