I’m wanting to create a web app where people can collaborate with a specified image.
For example, if you take a look at this basketball app
https://market.android.com/details?id=com.canica.apps.basket&hl=en
I’m envisioning something similar where people can log in, draw plays etc,
I want updates to happen in real time, so that other people logged in as a team see what others are ‘drawing’.
I was thinking of extending a html canvas drawing app and adding network communication, but I’m not sure where to start looking.
My question is – What technologies should I be looking at for pushing the data out to the users?
Does anyone have suggestions?
You’ve almost answered your own question, especially with your use of HTML5 and JavaScript tag.
You should take a look at WebSockets (what, what and why).
WebSockets allow for bi-directional communication between any client and server. Originally only available in web browsers via JavaScript but there are now a number of WebSocket client libraries available which mean that whilst you can develop with browsers in mind there’s no reason why you client can’t be any device.
A quick search came up with this example. There is also this iPad/iPhone application.
There also appears to be a video tutorial that uses node.js and socket.io here:
http://wesbos.com/html5-canvas-websockets-nodejs/
If you don’t want to worry about installing and maintaining your own realtime infrastructure that also deals with fallback techniques for older web browsers then you might consider using a hosted realtime web service.