Images, realtime, and RethinkDB

An introduction of using binary data and RethinkDB changefeeds to create a realtime photo drag and drop app.

Transcript

1. Images, realtime, and RethinkDB
2. Images, realtime, and RethinkDB http://realtime-photo.thejsj.com
3. Client Database Client Server Client
4. Client Database Client Server Client
5. Client Database Client Server Client
6. Client Database Client Server Client
7. Client Database Client Client Server
8. Client Database Client Server Client
9. 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);
10. 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);
11. 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);
12. 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);
13. Client Database Client Server Client
14. 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 () { }); }); }); });
15. 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 () { }); }); }); });
16. 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 () { }); }); }); });
17. 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 () { }); }); }); });
18. 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 () { }); }); }); });
19. Client Database Client Server Client
20. 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); } }); });
21. 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); } }); });
22. 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); } }); });
23. 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); } }); });
24. Client Database Client Client Server
25. var socket = io.connect(‘http://localhost:8000’); socket.on(‘Image:update’, function (image) { var reader = new FileReader(); reader.onload = function(e) { $(‘#images’) .html( ‘<img ’ + ‘src=”’ + e.target.result + ‘” />’ ); }.bind(this); reader.readAsDataURL(new Blob([image.file])); });
26. var socket = io.connect(‘http://localhost:8000’); socket.on(‘Image:update’, function (image) { var reader = new FileReader(); reader.onload = function(e) { $(‘#images’) .html( ‘<img ’ + ‘src=”’ + e.target.result + ‘” />’ ); }; reader.readAsDataURL(new Blob([image.file])); });
27. var socket = io.connect(‘http://localhost:8000’); socket.on(‘Image:update’, function (image) { var reader = new FileReader(); reader.onload = function(e) { $(‘#images’) .html( ‘<img ’ + ‘src=”’ + e.target.result + ‘” />’ ); }.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( ‘<img ’ + ‘src=”’ + e.target.result + ‘” />’ ); }.bind(this); reader.readAsDataURL(new Blob([image.file])); });
28. 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