Real-time collaborative drawing
Upcoming SlideShare
Loading in...5
×
 

Real-time collaborative drawing

on

  • 1,971 views

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

Statistics

Views

Total Views
1,971
Views on SlideShare
1,971
Embed Views
0

Actions

Likes
1
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Real-time collaborative drawing Real-time collaborative drawing Presentation Transcript

  • Real-Time Collaborative Drawing Friday, 27 September 13
  • About Me Friday, 27 September 13
  • Friday, 27 September 13
  • node-js-draw.jit.su/ Friday, 27 September 13
  • Lets break this down Friday, 27 September 13
  • A Web Server Friday, 27 September 13
  • A Canvas Friday, 27 September 13
  • Real-time Communication Friday, 27 September 13
  • Node.js via Express.js HTML5 Canvas via Paper.js Websockets via socket.io Friday, 27 September 13
  • Run it yourself! Friday, 27 September 13
  • http://node.js.org Friday, 27 September 13
  • $ git clone https:// github.com/byrichardpowell/ drawing.git $ cd drawing Friday, 27 September 13
  • $ npm install Friday, 27 September 13
  • $ node app.js Friday, 27 September 13
  • http://127.0.0.1:3000/ Friday, 27 September 13
  • Express.js Friday, 27 September 13
  • app.js node_modules package.json public routes views Friday, 27 September 13
  • 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
  • var server = http.createServer(app).listen( app.get('port') ); var io = require('socket.io').listen( server ); app.js Friday, 27 September 13
  • socket.on('startPath',function(data,id) { socket.broadcast.emit('startPath', data, id ) }) app.js Friday, 27 September 13
  • Paper.js Friday, 27 September 13
  • 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
  • paperjs.org/tutorials/interaction/working-with-mouse-vectors/ Friday, 27 September 13
  • 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
  • io.on( 'continuePath', function( data, sessionId ) { continuePath(data.top, data.bottom, sessionId) view.draw(); }) /public/javascripts/draw.js Friday, 27 September 13
  • function continuePath(top,bottom,sessionId) { var path = paths[sessionId] path.add(top) path.insert(0, bottom) } /public/javascripts/draw.js Friday, 27 September 13
  • Summarise Friday, 27 September 13
  • 1. Express.js Serves the HTML Friday, 27 September 13
  • 2.A user draws. Paper.js intercepts the events and draws Friday, 27 September 13
  • 3. Socket.io passes the draw data to Express.js Friday, 27 September 13
  • 4. Express Passes the draw data back to every other user Friday, 27 September 13
  • 5. Paper.js draws other peoples drawings using their sessionId to keep track of different paths Friday, 27 September 13
  • Deployment Friday, 27 September 13
  • www.nodejitsu.com/ Friday, 27 September 13
  • $ npm install jitsu -g $ jitsu login Friday, 27 September 13
  • $ jitsu deploy Friday, 27 September 13
  • Friday, 27 September 13
  • github.com/johnmclear/draw Friday, 27 September 13
  • www.serverdensity.com/ @byrichardpowell bit.ly/12devsnode Friday, 27 September 13