Real-time collaborative drawing

  • 1,674 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,674
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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