Tweet
Tweet

Slide 1

Slide 1 text

Images, realtime, and RethinkDB

Slide 2

Slide 2 text

Images, realtime, and RethinkDB http://realtime-photo.thejsj.com

Slide 3

Slide 3 text

Client Database Client Server Client

Slide 4

Slide 4 text

Client Database Client Server Client

Slide 5

Slide 5 text

Client Database Client Server Client

Slide 6

Slide 6 text

Client Database Client Server Client

Slide 7

Slide 7 text

Client Database Client Client Server

Slide 8

Slide 8 text

Client Database Client Server Client

Slide 9

Slide 9 text

el.addEventListener(“drop”, function(evt) { // Get the first file only var file = evt.dataTransfer.files[0]; var data = new FormData(); data.append(‘file’, file); data.append(‘fileName’, file.name); data.append(‘type’, file.type); // Send an HTTP POST request using the jQuery $.post(‘/image’, data); }, false);

Slide 10

Slide 10 text

el.addEventListener(“drop”, function(evt) { // Get the first file only var file = evt.dataTransfer.files[0]; var data = new FormData(); data.append(‘file’, file); data.append(‘fileName’, file.name); data.append(‘type’, file.type); // Send an HTTP POST request using the jQuery $.post(‘/image’, data); }, false);

Slide 11

Slide 11 text

el.addEventListener(“drop”, function(evt) { // Get the first file only var file = evt.dataTransfer.files[0]; var data = new FormData(); data.append(‘file’, file); data.append(‘fileName’, file.name); data.append(‘type’, file.type); // Send an HTTP POST request using the jQuery $.post(‘/image’, data); }, false);

Slide 12

Slide 12 text

el.addEventListener(“drop”, function(evt) { // Get the first file only var file = evt.dataTransfer.files[0]; var data = new FormData(); data.append(‘file’, file); data.append(‘fileName’, file.name); data.append(‘type’, file.type); // Send an HTTP POST request using the jQuery $.post(‘/image’, data); }, false);

Slide 13

Slide 13 text

Client Database Client Server Client

Slide 14

Slide 14 text

app.post(‘/image’, function (req, res) { var form = new multiparty.Form(); form.parse(req, function (err, fields, files) { var imagePath = files.file[0].path; fs.readFile(imagePath, function (err, buff) { var image = { fileName: fields.fileName[0], type: fields.type[0], file: buff }; r .table(‘images’) .insert(image) .run(r.conn) .then(function () { }); }); }); });

Slide 15

Slide 15 text

app.post(‘/image’, function (req, res) { var form = new multiparty.Form(); form.parse(req, function (err, fields, files) { var imagePath = files.file[0].path; fs.readFile(imagePath, function (err, buff) { var image = { fileName: fields.fileName[0], type: fields.type[0], file: buff }; r .table(‘images’) .insert(image) .run(r.conn) .then(function () { }); }); }); });

Slide 16

Slide 16 text

app.post(‘/image’, function (req, res) { var form = new multiparty.Form(); form.parse(req, function (err, fields, files) { var imagePath = files.file[0].path; fs.readFile(imagePath, function (err, buff) { var image = { fileName: fields.fileName[0], type: fields.type[0], file: buff }; r .table(‘images’) .insert(image) .run(r.conn) .then(function () { }); }); }); });

Slide 17

Slide 17 text

app.post(‘/image’, function (req, res) { var form = new multiparty.Form(); form.parse(req, function (err, fields, files) { var imagePath = files.file[0].path; fs.readFile(imagePath, function (err, buff) { var image = { fileName: fields.fileName[0], type: fields.type[0], file: buff }; r .table(‘images’) .insert(image) .run(r.conn) .then(function () { }); }); }); });

Slide 18

Slide 18 text

app.post(‘/image’, function (req, res) { var form = new multiparty.Form(); form.parse(req, function (err, fields, files) { var imagePath = files.file[0].path; fs.readFile(imagePath, function (err, buf) { var image = { fileName: fields.fileName[0], type: fields.type[0], file: buf }; r .table(‘images’) .insert(image) .run(r.conn) .then(function () { }); }); }); }); app.post(‘/image’, function (req, res) { var form = new multiparty.Form(); form.parse(req, function (err, fields, files) { var imagePath = files.file[0].path; fs.readFile(imagePath, function (err, buff) { var image = { fileName: fields.fileName[0], type: fields.type[0], file: buff }; r .table(‘images’) .insert(image) .run(r.conn) .then(function () { }); }); }); });

Slide 19

Slide 19 text

Client Database Client Server Client

Slide 20

Slide 20 text

r .table(‘images’) .changes() .run(conn) .then(function (cursor) { cursor.each(function (err, photo) { // Push images through the socket connection if (photo.new_val !== null) { io.emit(‘Image:update’, photo.new_val); } }); });

Slide 21

Slide 21 text

r .table(‘images’) .changes() .run(conn) .then(function (cursor) { cursor.each(function (err, photo) { // Push images through the socket connection if (photo.new_val !== null) { io.emit(‘Image:update’, photo.new_val); } }); });

Slide 22

Slide 22 text

r .table(‘images’) .changes() .run(conn) .then(function (cursor) { cursor.each(function (err, photo) { // Push images through the socket connection if (photo.new_val !== null) { io.emit(‘Image:update’, photo.new_val); } }); });

Slide 23

Slide 23 text

r .table(‘images’) .changes() .run(conn) .then(function (cursor) { cursor.each(function (err, photo) { // Push images through the socket connection if (photo.new_val !== null) { io.emit(‘Image:update’, photo.new_val); } }); });

Slide 24

Slide 24 text

Client Database Client Client Server

Slide 25

Slide 25 text

var socket = io.connect(‘http://localhost:8000’); socket.on(‘Image:update’, function (image) { var reader = new FileReader(); reader.onload = function(e) { $(‘#images’) .html( ‘’ ); }.bind(this); reader.readAsDataURL(new Blob([image.file])); });

Slide 26

Slide 26 text

var socket = io.connect(‘http://localhost:8000’); socket.on(‘Image:update’, function (image) { var reader = new FileReader(); reader.onload = function(e) { $(‘#images’) .html( ‘’ ); }; reader.readAsDataURL(new Blob([image.file])); });

Slide 27

Slide 27 text

var socket = io.connect(‘http://localhost:8000’); socket.on(‘Image:update’, function (image) { var reader = new FileReader(); reader.onload = function(e) { $(‘#images’) .html( ‘’ ); }.bind(this); reader.readAsDataURL(new Blob([image.file])); }); var socket = io.connect(‘http://localhost:8000’); socket.on(‘Image:update’, function (image) { var reader = new FileReader(); reader.onload = function(e) { $(‘#images’) .html( ‘’ ); }.bind(this); reader.readAsDataURL(new Blob([image.file])); });

Slide 28

Slide 28 text

Thank You Questions? rethinkdb.com / blog.hiphipjorge.com @rethinkdb / @thejsj Thank You Questions? github.com/thejsj/realtime-photo github.com/thejsj/realtime-photo-tutorial rethinkdb.com / blog.hiphipjorge.com @rethinkdb / @thejsj