Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

up to synced box movement in the freestyle example

  • Loading branch information...
commit c77950a25600d481c361c861e38232479fb6d359 1 parent c4facdb
@substack authored
Showing with 873 additions and 2 deletions.
  1. +3 −0  example/freestyle/00.js
  2. +5 −0 example/freestyle/01.js
  3. +6 −0 example/freestyle/02.js
  4. +7 −0 example/freestyle/03.js
  5. +8 −0 example/freestyle/04.js
  6. +9 −0 example/freestyle/05.js
  7. +10 −0 example/freestyle/06.js
  8. +11 −0 example/freestyle/07.js
  9. +2 −0  example/freestyle/08_server.js
  10. +8 −0 example/freestyle/09_server.js
  11. +12 −0 example/freestyle/10_server.js
  12. +14 −0 example/freestyle/11_server.js
  13. +18 −0 example/freestyle/12_server.js
  14. +21 −0 example/freestyle/13_server.js
  15. +27 −0 example/freestyle/14_server.js
  16. +29 −0 example/freestyle/15_server.js
  17. +31 −0 example/freestyle/16_server.js
  18. +39 −0 example/freestyle/17_server.js
  19. +45 −0 example/freestyle/18_server.js
  20. +49 −0 example/freestyle/19_server.js
  21. +26 −0 example/freestyle/20_server.js
  22. +26 −0 example/freestyle/21_server.js
  23. +33 −0 example/freestyle/22_server.js
  24. +33 −0 example/freestyle/23_server.js
  25. +62 −0 example/freestyle/24_server.js
  26. +9 −0 example/freestyle/25.js
  27. +9 −0 example/freestyle/26.js
  28. +2 −0  example/freestyle/27_browser.js
  29. +6 −0 example/freestyle/28_browser.js
  30. +9 −0 example/freestyle/29_browser.js
  31. +14 −0 example/freestyle/30_browser.js
  32. +17 −0 example/freestyle/31_browser.js
  33. +21 −0 example/freestyle/32_browser.js
  34. +17 −0 example/freestyle/33_browser_box.js
  35. +17 −0 example/freestyle/34_browser_box.js
  36. +26 −0 example/freestyle/35_browser_box.js
  37. +30 −0 example/freestyle/36_browser_box.js
  38. +45 −0 example/freestyle/37_browser_box.js
  39. +25 −0 example/freestyle/38_browser.js
  40. +29 −0 example/freestyle/39_browser.js
  41. +45 −0 example/freestyle/browser/box.js
  42. +17 −0 example/freestyle/static/index.html
  43. +1 −2  slides.markdown
View
3  example/freestyle/00.js
@@ -0,0 +1,3 @@
+/* streaming webapp that:
+
+*/
View
5 example/freestyle/01.js
@@ -0,0 +1,5 @@
+/* streaming webapp that:
+
+ * synchronizes state across all users
+
+*/
View
6 example/freestyle/02.js
@@ -0,0 +1,6 @@
+/* streaming webapp that:
+
+ * synchronizes state across all users
+ * listens for server events
+
+*/
View
7 example/freestyle/03.js
@@ -0,0 +1,7 @@
+/* streaming webapp that:
+
+ * synchronizes state across all users
+ * listens for server events
+ * has an rpc control interface
+
+*/
View
8 example/freestyle/04.js
@@ -0,0 +1,8 @@
+/* streaming webapp that:
+
+ * synchronizes state across all users
+ * listens for server events
+ * has an rpc control interface
+ * runs multiple streams over mux-demux
+
+*/
View
9 example/freestyle/05.js
@@ -0,0 +1,9 @@
+/* streaming webapp that:
+
+ * synchronizes state across all users
+ * listens for server events
+ * has an rpc control interface
+ * runs multiple streams over mux-demux
+ * in node and the browser
+
+*/
View
10 example/freestyle/06.js
@@ -0,0 +1,10 @@
+/* streaming webapp that:
+
+ * synchronizes state across all users
+ * listens for server events
+ * has an rpc control interface
+ * runs multiple streams over mux-demux
+ * in node and the browser
+ * load balanced across multiple web servers
+
+*/
View
11 example/freestyle/07.js
@@ -0,0 +1,11 @@
+/* streaming webapp that:
+
+ * synchronizes state across all users
+ * listens for server events
+ * has an rpc control interface
+ * runs multiple streams over mux-demux
+ * in node and the browser
+ * load balanced across multiple web servers
+
+ OK GO.
+*/
View
2  example/freestyle/08_server.js
@@ -0,0 +1,2 @@
+var Model = require('scuttlebutt/model');
+var model = new Model;
View
8 example/freestyle/09_server.js
@@ -0,0 +1,8 @@
+var Model = require('scuttlebutt/model');
+var model = new Model;
+
+var http = require('http');
+var server = http.createServer(function (req, res) {
+ // ...
+});
+server.listen(Number(process.argv[2]));
View
12 example/freestyle/10_server.js
@@ -0,0 +1,12 @@
+var Model = require('scuttlebutt/model');
+var model = new Model;
+
+function createStream () {
+ return model.createStream();
+}
+
+var http = require('http');
+var server = http.createServer(function (req, res) {
+ // ...
+});
+server.listen(Number(process.argv[2]));
View
14 example/freestyle/11_server.js
@@ -0,0 +1,14 @@
+var Model = require('scuttlebutt/model');
+var model = new Model;
+
+function createStream () {
+ return model.createStream();
+}
+
+var http = require('http');
+var server = http.createServer(function (req, res) {
+ if (req.url === '/stream') {
+ req.pipe(createStream()).pipe(res);
+ }
+});
+server.listen(Number(process.argv[2]));
View
18 example/freestyle/12_server.js
@@ -0,0 +1,18 @@
+var Model = require('scuttlebutt/model');
+var model = new Model;
+
+var emitStream = require('emit-stream');
+var EventEmitter = require('events').EventEmitter;
+var emitter = new EventEmitter;
+
+function createStream () {
+ return model.createStream();
+}
+
+var http = require('http');
+var server = http.createServer(function (req, res) {
+ if (req.url === '/stream') {
+ req.pipe(createStream()).pipe(res);
+ }
+});
+server.listen(Number(process.argv[2]));
View
21 example/freestyle/13_server.js
@@ -0,0 +1,21 @@
+var Model = require('scuttlebutt/model');
+var model = new Model;
+
+var emitStream = require('emit-stream');
+var EventEmitter = require('events').EventEmitter;
+var emitter = new EventEmitter;
+
+function createStream () {
+ var MuxDemux = require('mux-demux');
+ var mdm = new MuxDemux;
+
+ return model.createStream();
+}
+
+var http = require('http');
+var server = http.createServer(function (req, res) {
+ if (req.url === '/stream') {
+ req.pipe(createStream()).pipe(res);
+ }
+});
+server.listen(Number(process.argv[2]));
View
27 example/freestyle/14_server.js
@@ -0,0 +1,27 @@
+var Model = require('scuttlebutt/model');
+var model = new Model;
+
+var emitStream = require('emit-stream');
+var EventEmitter = require('events').EventEmitter;
+var emitter = new EventEmitter;
+
+function createStream () {
+ var MuxDemux = require('mux-demux');
+ var mdm = new MuxDemux;
+
+ var ms = model.createStream();
+
+ process.nextTick(function () {
+ ms.pipe(mdm.createStream('state')).pipe(ms);
+ });
+
+ return mdm;
+}
+
+var http = require('http');
+var server = http.createServer(function (req, res) {
+ if (req.url === '/stream') {
+ req.pipe(createStream()).pipe(res);
+ }
+});
+server.listen(Number(process.argv[2]));
View
29 example/freestyle/15_server.js
@@ -0,0 +1,29 @@
+var Model = require('scuttlebutt/model');
+var model = new Model;
+
+var emitStream = require('emit-stream');
+var EventEmitter = require('events').EventEmitter;
+var emitter = new EventEmitter;
+
+function createStream () {
+ var MuxDemux = require('mux-demux');
+ var mdm = new MuxDemux;
+
+ var ms = model.createStream();
+ var es = emitStream(emitter);
+
+ process.nextTick(function () {
+ ms.pipe(mdm.createStream('state')).pipe(ms);
+ es.pipe(mdm.createStream('events')).pipe(es);
+ });
+
+ return mdm;
+}
+
+var http = require('http');
+var server = http.createServer(function (req, res) {
+ if (req.url === '/stream') {
+ req.pipe(createStream()).pipe(res);
+ }
+});
+server.listen(Number(process.argv[2]));
View
31 example/freestyle/16_server.js
@@ -0,0 +1,31 @@
+var Model = require('scuttlebutt/model');
+var model = new Model;
+
+var emitStream = require('emit-stream');
+var EventEmitter = require('events').EventEmitter;
+var emitter = new EventEmitter;
+
+function createStream () {
+ var MuxDemux = require('mux-demux');
+ var mdm = new MuxDemux;
+
+ var ms = model.createStream();
+ var es = emitStream(emitter);
+
+ process.nextTick(function () {
+ ms.pipe(mdm.createStream('state')).pipe(ms);
+ es.pipe(mdm.createStream('events')).pipe(es);
+ model.set('connections', (model.get('connections') || 0) + 1);
+ });
+
+ return mdm;
+}
+
+var http = require('http');
+var server = http.createServer(function (req, res) {
+ if (req.url === '/stream') {
+ req.pipe(createStream()).pipe(res);
+ emitter.emit('join', req.socket.address());
+ }
+});
+server.listen(Number(process.argv[2]));
View
39 example/freestyle/17_server.js
@@ -0,0 +1,39 @@
+var Model = require('scuttlebutt/model');
+var model = new Model;
+
+var emitStream = require('emit-stream');
+var EventEmitter = require('events').EventEmitter;
+var emitter = new EventEmitter;
+
+function createStream () {
+ var MuxDemux = require('mux-demux');
+ var mdm = new MuxDemux;
+
+ var ms = model.createStream();
+ var es = emitStream(emitter);
+
+ process.nextTick(function () {
+ ms.pipe(mdm.createStream('state')).pipe(ms);
+ es.pipe(mdm.createStream('events')).pipe(es);
+ model.set('connections', (model.get('connections') || 0) + 1);
+ });
+
+ mdm.on('close', function () {
+ model.set('connections', model.get('connections') - 1);
+ });
+
+ return mdm;
+}
+
+var http = require('http');
+var server = http.createServer(function (req, res) {
+ if (req.url === '/stream') {
+ req.pipe(createStream()).pipe(res);
+ emitter.emit('join', req.socket.address());
+
+ req.on('end', function () {
+ emitter.emit('part', req.socket.address());
+ });
+ }
+});
+server.listen(Number(process.argv[2]));
View
45 example/freestyle/18_server.js
@@ -0,0 +1,45 @@
+var Model = require('scuttlebutt/model');
+var model = new Model;
+
+var emitStream = require('emit-stream');
+var EventEmitter = require('events').EventEmitter;
+var emitter = new EventEmitter;
+
+function createStream () {
+ var MuxDemux = require('mux-demux');
+ var mdm = new MuxDemux;
+
+ var ms = model.createStream();
+ var es = emitStream(emitter);
+
+ process.nextTick(function () {
+ ms.pipe(mdm.createStream('state')).pipe(ms);
+ es.pipe(mdm.createStream('events')).pipe(es);
+ model.set('connections', (model.get('connections') || 0) + 1);
+ });
+
+ mdm.on('close', function () {
+ model.set('connections', model.get('connections') - 1);
+ });
+
+ return mdm;
+}
+
+var http = require('http');
+var server = http.createServer(function (req, res) {
+ if (req.url === '/stream') {
+ req.pipe(createStream()).pipe(res);
+ emitter.emit('join', req.socket.address());
+
+ req.on('end', function () {
+ emitter.emit('part', req.socket.address());
+ });
+ }
+});
+server.listen(Number(process.argv[2]));
+
+var request = require('request');
+process.argv.slice(3).map(Number).forEach(function (port) {
+ var r = request.put('http://localhost:' + port + '/stream');
+ r.pipe(createStream()).pipe(r);
+});
View
49 example/freestyle/19_server.js
@@ -0,0 +1,49 @@
+var Model = require('scuttlebutt/model');
+var model = new Model;
+
+model.on('update', function (key, value) {
+ console.log(key + ' => ' + value);
+});
+
+var emitStream = require('emit-stream');
+var EventEmitter = require('events').EventEmitter;
+var emitter = new EventEmitter;
+
+function createStream () {
+ var MuxDemux = require('mux-demux');
+ var mdm = new MuxDemux;
+
+ var ms = model.createStream();
+ var es = emitStream(emitter);
+
+ process.nextTick(function () {
+ ms.pipe(mdm.createStream('state')).pipe(ms);
+ es.pipe(mdm.createStream('events')).pipe(es);
+ model.set('connections', (model.get('connections') || 0) + 1);
+ });
+
+ mdm.on('close', function () {
+ model.set('connections', model.get('connections') - 1);
+ });
+
+ return mdm;
+}
+
+var http = require('http');
+var server = http.createServer(function (req, res) {
+ if (req.url === '/stream') {
+ req.pipe(createStream()).pipe(res);
+ emitter.emit('join', req.socket.address());
+
+ req.on('end', function () {
+ emitter.emit('part', req.socket.address());
+ });
+ }
+});
+server.listen(Number(process.argv[2]));
+
+var request = require('request');
+process.argv.slice(3).map(Number).forEach(function (port) {
+ var r = request.put('http://localhost:' + port + '/stream');
+ r.pipe(createStream()).pipe(r);
+});
View
26 example/freestyle/20_server.js
@@ -0,0 +1,26 @@
+// ...
+
+var http = require('http');
+var server = http.createServer(function (req, res) {
+ if (req.url === '/stream') {
+ req.pipe(createStream()).pipe(res);
+ emitter.emit('join', req.socket.address());
+
+ req.on('end', function () {
+ emitter.emit('part', req.socket.address());
+ });
+ }
+});
+server.listen(Number(process.argv[2]));
+
+var shoe = require('shoe');
+var sock = shoe(function (stream) {
+
+});
+sock.install(server, '/sock');
+
+var request = require('request');
+process.argv.slice(3).map(Number).forEach(function (port) {
+ var r = request.put('http://localhost:' + port + '/stream');
+ r.pipe(createStream()).pipe(r);
+});
View
26 example/freestyle/21_server.js
@@ -0,0 +1,26 @@
+// ...
+
+var http = require('http');
+var server = http.createServer(function (req, res) {
+ if (req.url === '/stream') {
+ req.pipe(createStream()).pipe(res);
+ emitter.emit('join', req.socket.address());
+
+ req.on('end', function () {
+ emitter.emit('part', req.socket.address());
+ });
+ }
+});
+server.listen(Number(process.argv[2]));
+
+var shoe = require('shoe');
+var sock = shoe(function (stream) {
+ stream.pipe(createStream()).pipe(stream);
+});
+sock.install(server, '/sock');
+
+var request = require('request');
+process.argv.slice(3).map(Number).forEach(function (port) {
+ var r = request.put('http://localhost:' + port + '/stream');
+ r.pipe(createStream()).pipe(r);
+});
View
33 example/freestyle/22_server.js
@@ -0,0 +1,33 @@
+// ...
+
+var http = require('http');
+var ecstatic = require('ecstatic')(__dirname + '/static');
+var server = http.createServer(function (req, res) {
+ if (req.url === '/stream') {
+ req.pipe(createStream()).pipe(res);
+ emitter.emit('join', req.socket.address());
+
+ req.on('end', function () {
+ emitter.emit('part', req.socket.address());
+ });
+ }
+ else ecstatic(req, res)
+});
+server.listen(Number(process.argv[2]));
+
+var shoe = require('shoe');
+var sock = shoe(function (stream) {
+ stream.pipe(createStream()).pipe(stream);
+
+ emitter.emit('join', stream.address);
+ stream.on('end', function () {
+ emitter.emit('part', stream.address);
+ });
+});
+sock.install(server, '/sock');
+
+var request = require('request');
+process.argv.slice(3).map(Number).forEach(function (port) {
+ var r = request.put('http://localhost:' + port + '/stream');
+ r.pipe(createStream()).pipe(r);
+});
View
33 example/freestyle/23_server.js
@@ -0,0 +1,33 @@
+// ...
+
+var http = require('http');
+var ecstatic = require('ecstatic')(__dirname + '/static');
+var server = http.createServer(function (req, res) {
+ if (req.url === '/stream') {
+ req.pipe(createStream()).pipe(res);
+ emitter.emit('join', req.socket.address());
+
+ req.on('end', function () {
+ emitter.emit('part', req.socket.address());
+ });
+ }
+ else ecstatic(req, res)
+});
+server.listen(Number(process.argv[2]));
+
+var shoe = require('shoe');
+var sock = shoe(function (stream) {
+ stream.pipe(createStream()).pipe(stream);
+
+ emitter.emit('join', stream.address);
+ stream.on('end', function () {
+ emitter.emit('part', stream.address);
+ });
+});
+sock.install(server, '/sock');
+
+var request = require('request');
+process.argv.slice(3).map(Number).forEach(function (port) {
+ var r = request.put('http://localhost:' + port + '/stream');
+ r.pipe(createStream()).pipe(r);
+});
View
62 example/freestyle/24_server.js
@@ -0,0 +1,62 @@
+var Model = require('scuttlebutt/model');
+var model = new Model;
+
+model.on('update', function (key, value) {
+ console.log(key + ' => ' + value);
+});
+
+var emitStream = require('emit-stream');
+var EventEmitter = require('events').EventEmitter;
+var emitter = new EventEmitter;
+
+function createStream () {
+ var MuxDemux = require('mux-demux');
+ var mdm = new MuxDemux;
+
+ var ms = model.createStream();
+ var es = emitStream(emitter);
+
+ process.nextTick(function () {
+ ms.pipe(mdm.createStream('state')).pipe(ms);
+ es.pipe(mdm.createStream('events')).pipe(es);
+ model.set('connections', (model.get('connections') || 0) + 1);
+ });
+
+ mdm.on('close', function () {
+ model.set('connections', model.get('connections') - 1);
+ });
+
+ return mdm;
+}
+
+var http = require('http');
+var ecstatic = require('ecstatic')(__dirname + '/static');
+var server = http.createServer(function (req, res) {
+ if (req.url === '/stream') {
+ req.pipe(createStream()).pipe(res);
+ emitter.emit('join', req.socket.address());
+
+ req.on('end', function () {
+ emitter.emit('part', req.socket.address());
+ });
+ }
+ else ecstatic(req, res)
+});
+server.listen(Number(process.argv[2]));
+
+var shoe = require('shoe');
+var sock = shoe(function (stream) {
+ stream.pipe(createStream()).pipe(stream);
+
+ emitter.emit('join', stream.address);
+ stream.on('end', function () {
+ emitter.emit('part', stream.address);
+ });
+});
+sock.install(server, '/sock');
+
+var request = require('request');
+process.argv.slice(3).map(Number).forEach(function (port) {
+ var r = request.put('http://localhost:' + port + '/stream');
+ r.pipe(createStream()).pipe(r);
+});
View
9 example/freestyle/25.js
@@ -0,0 +1,9 @@
+/* streaming webapp that:
+
+ * synchronizes state across all users
+ * listens for server events
+ * has an rpc control interface
+ * runs multiple streams over mux-demux
+ * in node and the browser
+ * load balanced across multiple web servers
+*/
View
9 example/freestyle/26.js
@@ -0,0 +1,9 @@
+/* streaming webapp that:
+
+ X synchronizes state across all users
+ X listens for server events
+ * has an rpc control interface
+ X runs multiple streams over mux-demux
+ * in node and the browser
+ X load balanced across multiple web servers
+*/
View
2  example/freestyle/27_browser.js
@@ -0,0 +1,2 @@
+var MuxDemux = require('mux-demux');
+var md = new MuxDemux;
View
6 example/freestyle/28_browser.js
@@ -0,0 +1,6 @@
+var MuxDemux = require('mux-demux');
+var md = new MuxDemux;
+
+md.on('connection', function (c) {
+ console.dir(c.meta);
+});
View
9 example/freestyle/29_browser.js
@@ -0,0 +1,9 @@
+var MuxDemux = require('mux-demux');
+var md = new MuxDemux;
+
+md.on('connection', function (c) {
+ console.dir(c.meta);
+});
+
+var shoe = require('shoe');
+md.pipe(shoe('/sock')).pipe(md);
View
14 example/freestyle/30_browser.js
@@ -0,0 +1,14 @@
+var MuxDemux = require('mux-demux');
+var md = new MuxDemux;
+
+md.on('connection', function (c) {
+ if (c.meta === 'state') {
+
+ }
+ else if (c.meta === 'events') {
+
+ }
+});
+
+var shoe = require('shoe');
+md.pipe(shoe('/sock')).pipe(md);
View
17 example/freestyle/31_browser.js
@@ -0,0 +1,17 @@
+var MuxDemux = require('mux-demux');
+var md = new MuxDemux;
+
+var Model = require('scuttlebutt/model');
+var model = new Model;
+
+md.on('connection', function (c) {
+ if (c.meta === 'state') {
+ c.pipe(model.createStream()).pipe(c);
+ }
+ else if (c.meta === 'events') {
+
+ }
+});
+
+var shoe = require('shoe');
+md.pipe(shoe('/sock')).pipe(md);
View
21 example/freestyle/32_browser.js
@@ -0,0 +1,21 @@
+var MuxDemux = require('mux-demux');
+var md = new MuxDemux;
+
+var Model = require('scuttlebutt/model');
+var model = new Model;
+
+var createBox = require('./browser/box');
+var box = createBox();
+box.appendTo(document.body);
+
+md.on('connection', function (c) {
+ if (c.meta === 'state') {
+ c.pipe(model.createStream()).pipe(c);
+ }
+ else if (c.meta === 'events') {
+
+ }
+});
+
+var shoe = require('shoe');
+md.pipe(shoe('/sock')).pipe(md);
View
17 example/freestyle/33_browser_box.js
@@ -0,0 +1,17 @@
+var EventEmitter = require('events').EventEmitter;
+var inherits = require('inherits');
+
+module.exports = function () {
+ return new Box;
+};
+
+function Box () {
+ this.element = document.createElement('div');
+}
+
+inherits(Box, EventEmitter);
+
+Box.prototype.move = function (pos) {
+ this.x = this.element.style.left = pos.x;
+ this.y = this.element.style.top = pos.y;
+};
View
17 example/freestyle/34_browser_box.js
@@ -0,0 +1,17 @@
+var EventEmitter = require('events').EventEmitter;
+var inherits = require('inherits');
+
+module.exports = function () {
+ return new Box;
+};
+
+function Box () {
+ this.element = document.createElement('div');
+}
+
+inherits(Box, EventEmitter);
+
+Box.prototype.move = function (pos) {
+ this.x = this.element.style.left = pos.x;
+ this.y = this.element.style.top = pos.y;
+};
View
26 example/freestyle/35_browser_box.js
@@ -0,0 +1,26 @@
+var EventEmitter = require('events').EventEmitter;
+var inherits = require('inherits');
+
+module.exports = function () {
+ return new Box;
+};
+
+function Box () {
+ var div = this.element = document.createElement('div');
+
+ div.addEventListener('mouseup', function (ev) {
+ });
+
+ div.addEventListener('mousemove', function (ev) {
+ });
+
+ div.addEventListener('mousedown', function (ev) {
+ });
+}
+
+inherits(Box, EventEmitter);
+
+Box.prototype.move = function (pos) {
+ this.x = this.element.style.left = pos.x;
+ this.y = this.element.style.top = pos.y;
+};
View
30 example/freestyle/36_browser_box.js
@@ -0,0 +1,30 @@
+var EventEmitter = require('events').EventEmitter;
+var inherits = require('inherits');
+
+module.exports = function () {
+ return new Box;
+};
+
+function Box () {
+ var div = this.element = document.createElement('div');
+ var pressed = false;
+
+ div.addEventListener('mousedown', function (ev) {
+ pressed = true;
+ });
+
+ div.addEventListener('mousemove', function (ev) {
+
+ });
+
+ div.addEventListener('mouseup', function (ev) {
+ pressed = false;
+ });
+}
+
+inherits(Box, EventEmitter);
+
+Box.prototype.move = function (pos) {
+ this.x = this.element.style.left = pos.x;
+ this.y = this.element.style.top = pos.y;
+};
View
45 example/freestyle/37_browser_box.js
@@ -0,0 +1,45 @@
+var EventEmitter = require('events').EventEmitter;
+var inherits = require('inherits');
+
+module.exports = function () {
+ return new Box;
+};
+
+function Box () {
+ var self = this;
+ var div = self.element = document.createElement('div');
+ var pressed = false;
+
+ div.addEventListener('mousedown', function (ev) {
+ pressed = {
+ x : ev.clientX - (self.x || 100),
+ y : ev.clientY - (self.y || 100)
+ };
+ });
+
+ div.addEventListener('mousemove', function (ev) {
+ if (!pressed) return;
+
+ var pos = {
+ x : ev.clientX - pressed.x,
+ y : ev.clientY - pressed.y
+ };
+ self.move(pos);
+ self.emit('position', pos);
+ });
+
+ div.addEventListener('mouseup', function (ev) {
+ pressed = false;
+ });
+}
+
+inherits(Box, EventEmitter);
+
+Box.prototype.move = function (pos) {
+ this.x = this.element.style.left = pos.x;
+ this.y = this.element.style.top = pos.y;
+};
+
+Box.prototype.appendTo = function (target) {
+ target.appendChild(this.element);
+};
View
25 example/freestyle/38_browser.js
@@ -0,0 +1,25 @@
+var MuxDemux = require('mux-demux');
+var md = new MuxDemux;
+
+var Model = require('scuttlebutt/model');
+var model = new Model;
+
+var createBox = require('./browser/box');
+var box = createBox();
+box.appendTo(document.body);
+
+model.on('update', function (key, value) {
+ if (key === 'position') box.move(value);
+});
+
+md.on('connection', function (c) {
+ if (c.meta === 'state') {
+ c.pipe(model.createStream()).pipe(c);
+ }
+ else if (c.meta === 'events') {
+
+ }
+});
+
+var shoe = require('shoe');
+md.pipe(shoe('/sock')).pipe(md);
View
29 example/freestyle/39_browser.js
@@ -0,0 +1,29 @@
+var MuxDemux = require('mux-demux');
+var md = new MuxDemux;
+
+var Model = require('scuttlebutt/model');
+var model = new Model;
+
+var createBox = require('./browser/box');
+var box = createBox();
+box.appendTo(document.body);
+
+model.on('update', function (key, value) {
+ if (key === 'position') box.move(value);
+});
+
+box.on('position', function (pos) {
+ model.set('position', pos);
+});
+
+md.on('connection', function (c) {
+ if (c.meta === 'state') {
+ c.pipe(model.createStream()).pipe(c);
+ }
+ else if (c.meta === 'events') {
+
+ }
+});
+
+var shoe = require('shoe');
+md.pipe(shoe('/sock')).pipe(md);
View
45 example/freestyle/browser/box.js
@@ -0,0 +1,45 @@
+var EventEmitter = require('events').EventEmitter;
+var inherits = require('inherits');
+
+module.exports = function () {
+ return new Box;
+};
+
+function Box () {
+ var self = this;
+ var div = self.element = document.createElement('div');
+ var pressed = false;
+
+ div.addEventListener('mousedown', function (ev) {
+ pressed = {
+ x : ev.clientX - (self.x || 100),
+ y : ev.clientY - (self.y || 100)
+ };
+ });
+
+ div.addEventListener('mousemove', function (ev) {
+ if (!pressed) return;
+
+ var pos = {
+ x : ev.clientX - pressed.x,
+ y : ev.clientY - pressed.y
+ };
+ self.move(pos);
+ self.emit('position', pos);
+ });
+
+ div.addEventListener('mouseup', function (ev) {
+ pressed = false;
+ });
+}
+
+inherits(Box, EventEmitter);
+
+Box.prototype.move = function (pos) {
+ this.x = this.element.style.left = pos.x;
+ this.y = this.element.style.top = pos.y;
+};
+
+Box.prototype.appendTo = function (target) {
+ target.appendChild(this.element);
+};
View
17 example/freestyle/static/index.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+<style>
+ div {
+ position: absolute;
+ left: 100;
+ top: 100;
+ background-color: rgb(50,50,200);
+ height: 100px;
+ width: 100px;
+ }
+</style>
+</head>
+<body>
+<script src="bundle.js"></script>
+</body>
+</html>
View
3  slides.markdown
@@ -139,8 +139,7 @@ let's build a streaming webapp that:
* has an rpc control interface
* all as streams over mux-demux
* in node and the browser
-
-FROM SCRATCH. OK GO.
+* across multiple servers
![eof](images/freestyle.png)
Please sign in to comment.
Something went wrong with that request. Please try again.