ShareJS + RethinkdDB: livedb-rethinkdb

Transcript

1. The beauty of Operational Transformation and a realtime database Jorge Silva · @thejsj · Developer Evangelist @ RethinkDB
2. Overview What is Operational Transformation? ShareJS: A Node.js library for OT RethinkDB: A database for realtime apps livedb-rethinkdb: RethinkDB + ShareJS
3. What is Operational Transformation?
5. A class of algorithms that do multi-site realtime concurrency. Gives you eventual consistency - between multiple users - without retries - without errors - without any data being overwritten http://sharejs.org/
6. Possible applications Collaborative text and code editors Pair programming applications Realtime wikis Any type of concurent editing
7. OT is an important tool for building realtime applications
8. How can I use this in my own projects?
9. Enter ShareJS “ShareJS is an Operational Transform library for NodeJS & browsers. It lets you easily do live concurrent editing in your app.”
10. // WebSocket Connection var ws = new WebSocket(‘ws://localhost:8005’); var shareJS = new window.sharejs.Connection(ws); // Textarea var textareaDoc = shareJS.get(‘documents’, ‘helloworld’); textareaDoc.subscribe(); // Wait for document to be ready textareaDoc.whenReady(function () { setTimeout(function () { if (!textareaDoc.type) { textareaDoc.create(‘text’); } if (textareaDoc.type && textareaDoc.type.name === ‘text’) { var elem = document.getElementById(‘helloworld’); textareaDoc.attachTextarea(elem); } }); }); ShareJS on the client https://github.com/thejsj/sharejs-rethinkdb-example/blob/master/client/index.html#L102-L124
11. // WebSocket Connection var ws = new WebSocket(‘ws://localhost:8005’); var shareJS = new window.sharejs.Connection(ws); // Textarea var textareaDoc = shareJS.get(‘documents’, ‘helloworld’); textareaDoc.subscribe(); // Wait for document to be ready textareaDoc.whenReady(function () { setTimeout(function () { if (!textareaDoc.type) { textareaDoc.create(‘text’); } if (textareaDoc.type && textareaDoc.type.name === ‘text’) { var elem = document.getElementById(‘helloworld’); textareaDoc.attachTextarea(elem); } }); }); ShareJS on the client https://github.com/thejsj/sharejs-rethinkdb-example/blob/master/client/index.html#L102-L124
12. var sharejs = require(‘share’); var livedb = require(‘livedb’); // Connect to the database var db = require(‘livedb-rethinkdb’)({ host: ‘localhost’, port: 28015, db: ‘sharejs’ }); var backend = livedb.client(db); // Attach livedb instances to ShareJS var share = sharejs.server.createClient({ backend: backend }); ShareJS on the server: database https://github.com/thejsj/sharejs-rethinkdb-example/blob/master/server/livedb-client.js
13. var sharejs = require(‘share’); var livedb = require(‘livedb’); // Connect to the database var db = require(‘livedb-rethinkdb’)({ host: ‘localhost’, port: 28015, db: ‘sharejs’ }); var backend = livedb.client(db); // Attach livedb instances to ShareJS var share = sharejs.server.createClient({ backend: backend }); ShareJS on the server: database https://github.com/thejsj/sharejs-rethinkdb-example/blob/master/server/livedb-client.js
14. var wss = new WebSocketServer(); var Duplex = require(‘stream’).Duplex; var share = sharejs.server.createClient({ backend: backend }); // On socket connection wss.on(‘connection’, function () { var stream = new Duplex({ objectMode: true }); stream._write = function (chunk, encoding, callback) { client.send(JSON.stringify(chunk)); return callback(); }; client.on(‘message’, function (data) { return stream.push(JSON.parse(data)); }); return share.listen(stream); }); ShareJS on the server https://github.com/thejsj/sharejs-rethinkdb-example/blob/master/server/socket-handler.js#L8-L49
15. var wss = new WebSocketServer(); var Duplex = require(‘stream’).Duplex; var share = sharejs.server.createClient({ backend: backend }); // On socket connection wss.on(‘connection’, function () { var stream = new Duplex({ objectMode: true }); stream._write = function (chunk, encoding, callback) { client.send(JSON.stringify(chunk)); return callback(); }; client.on(‘message’, function (data) { return stream.push(JSON.parse(data)); }); return share.listen(stream); }); ShareJS on the server https://github.com/thejsj/sharejs-rethinkdb-example/blob/master/server/socket-handler.js#L8-L49
16. Open source database for building realtime applications NoSQL database that stores schemaless JSON documents Distributed database that is easy to scale What is RethinkDB?
17. Subscribe to change notifications from database queries No more polling – the database pushes changes to your app Reduce the amount of plumbing needed to stream live updates Built for realtime
18. var r = require(‘rethinkdb’); r .db(‘share_js’) .table(‘documents’) .filter({ name: ‘helloworld’ }) .run(conn) .then(function (cursor) { // Go through every row returned by the query cursor.each(function (row) { console.log(row); }); }); Changefeeds
19. var r = require(‘rethinkdb’); r .db(‘share_js’) .table(‘documents’) .filter({ name: ‘helloworld’ }) .run(conn) .then(function (cursor) { // Go through every row returned by the query cursor.each(function (row) { console.log(row); }); }); Changefeeds
20. var r = require(‘rethinkdb’); r .db(‘share_js’) .table(‘documents’) .filter({ name: ‘helloworld’ }) .changes() .run(conn) .then(function (cursor) { // Gets fired every time a row changes cursor.each(function (row) { console.log(row); }); }); Changefeeds
21. ShareJS & RethinkDB npm install sharejs livedb livedb-rethinkdb --save
22. Demo http://livedb-rethinkdb.thejsj.com/
23. Access documents
24. Access every single operation
25. Listen for new operations
26. Try it! https://github.com/thejsj/sharejs-rethinkdb-example
27. ShareJS http://sharejs.org/ | https://github.com/share/ShareJS RethinkDB http://rethinkdb.com/ | @rethinkdb livedb-rethinkdb https://github.com/thejsj/livedb-rethinkdb Questions?