How to make a real-time collaborative drawing app using HTML5 Canvas, Websockets & Node.JS

1. Real-Time Collaborative Drawing
Friday, 27 September 13

2. About Me
Friday, 27 September 13

3. Friday, 27 September 13

4. node-js-draw.jit.su/
Friday, 27 September 13

5. Lets break this down
Friday, 27 September 13

6. A Web Server
Friday, 27 September 13

7. A Canvas
Friday, 27 September 13

8. Real-time Communication
Friday, 27 September 13

9. Node.js via Express.js
HTML5 Canvas via Paper.js
Websockets via socket.io
Friday, 27 September 13

10. Run it yourself!
Friday, 27 September 13

11. http://node.js.org
Friday, 27 September 13

12. $ git clone https://
github.com/byrichardpowell/
drawing.git
$ cd drawing
Friday, 27 September 13

13. $ npm install
Friday, 27 September 13

14. $ node app.js
Friday, 27 September 13

15. http://127.0.0.1:3000/
Friday, 27 September 13

16. Express.js
Friday, 27 September 13

17. app.js
node_modules
package.json
public
routes
views
Friday, 27 September 13

18. var express = require('express')
, routes = require('./routes')
app.configure(function(){
app.set('port', 3000);
});
app.get('/', routes.index);
var server = http.createServer(app)
.listen(app.get('port'));
app.js
Friday, 27 September 13

19. var server = http.createServer(app).listen(
app.get('port')
);
var io =
require('socket.io').listen( server );
app.js
Friday, 27 September 13

20. socket.on('startPath',function(data,id) {
socket.broadcast.emit('startPath',
data,
id )
})
app.js
Friday, 27 September 13

21. Paper.js
Friday, 27 September 13

22. extends layout
block content
canvas(id="draw",
resize="true",
keepalive="true" )
script(type="text/paperscript",
src="...",
canvas="draw")
/views/index.js
Friday, 27 September 13

23. paperjs.org/tutorials/interaction/working-with-mouse-vectors/
Friday, 27 September 13

24. function onMouseDrag(event) {
var step = event.delta / 2
step.angle += 90
var top = event.middlePoint + step
var bottom = event.middlePoint - step
continuePath( top, bottom, sessionId )
emit("continuePath",
{top: top, bottom: bottom}, sessionId)
}
/public/javascripts/draw.js
Friday, 27 September 13

25. io.on( 'continuePath',
function( data, sessionId ) {
continuePath(data.top,
data.bottom,
sessionId)
view.draw();
})
/public/javascripts/draw.js
Friday, 27 September 13

26. function continuePath(top,bottom,sessionId) {
var path = paths[sessionId]
path.add(top)
path.insert(0, bottom)
}
/public/javascripts/draw.js
Friday, 27 September 13

27. Summarise
Friday, 27 September 13

28. 1. Express.js Serves
the HTML
Friday, 27 September 13

29. 2.A user draws.
Paper.js intercepts the events
and draws
Friday, 27 September 13

30. 3. Socket.io passes
the draw data to
Express.js
Friday, 27 September 13

31. 4. Express Passes
the draw data back
to every other user
Friday, 27 September 13

32. 5. Paper.js draws other peoples
drawings using their sessionId
to keep track of different paths
Friday, 27 September 13

33. Deployment
Friday, 27 September 13

34. www.nodejitsu.com/
Friday, 27 September 13

35. $ npm install jitsu -g
$ jitsu login
Friday, 27 September 13

36. $ jitsu deploy
Friday, 27 September 13

37. Friday, 27 September 13

38. github.com/johnmclear/draw
Friday, 27 September 13

39. www.serverdensity.com/
@byrichardpowell
bit.ly/12devsnode
Friday, 27 September 13