diff --git a/examples/infinite-scroll/InfiniteScrollWindow.js b/examples/infinite-scroll/InfiniteScrollWindow.js new file mode 100644 index 00000000..54dc9bee --- /dev/null +++ b/examples/infinite-scroll/InfiniteScrollWindow.js @@ -0,0 +1,113 @@ +const DEFAULT_OPTIONS = { + size: 20, + stickTo: 'top', +}; + +class InfiniteScrollWindow { + constructor(gunNode, opts = {}) { + this.opts = Object.assign(DEFAULT_OPTIONS, opts); + this.elements = new Map(); + this.node = gunNode; + this.center = this.opts.startAt; + this.updateListeners(); + } + + updateListeners() { + this.upSubscription && this.upSubscription.off(); + this.downSubscription && this.downSubscription.off(); + if (this.center) { + this.node.get({ '.': { '>': this.center, '<': '\uffff' }}).map().on((val, key, a, eve) => { + this.upSubscription = eve; + this._addElement(key, val); + }); + this.node.get({ '.': { '<': this.center, '>' : '', '-': true }}).map().on((val, key, a, eve) => { + this.downSubscription = eve; + this._addElement(key, val); + }); + } else { + this.node.get({ '.': { '<': '\uffff', '>': '', '-': this.opts.stickTo === 'top' }}).map().on((val, key, a, eve) => { + this.upSubscription = eve; + this._addElement(key, val); + }); + } + } + + _getSortedKeys() { + this.sortedKeys = this.sortedKeys || [...this.elements.keys()].sort(); + return this.sortedKeys; + } + + _upOrDown(n, up) { + this.opts.stickTo = null; + const keys = this._getSortedKeys(); + n = n || (keys.length / 2); + n = up ? n : -n; + const half = Math.floor(keys.length / 2); + const newMiddleIndex = Math.max(Math.min(half + n, keys.length - 1), 0); + if (this.center !== keys[newMiddleIndex]) { + this.center = keys[newMiddleIndex]; + this.updateListeners(); + } + return this.center; + } + + up(n) { + return this._upOrDown(n, true); + } + + down(n) { + return this._upOrDown(n, false); + } + + _topOrBottom(top) { + this.opts.stickTo = top ? 'top' : 'bottom'; + this.center = null; + this.updateListeners(); + } + + top() { + this._topOrBottom(true); + } + + bottom() { + this._topOrBottom(false); + } + + _addElement(key, val) { + if (!val || this.elements.has(key)) return; + const add = () => { + this.elements.set(key, val); + this.sortedKeys = [...this.elements.keys()].sort(); + const sortedElements = this.sortedKeys.map(k => this.elements.get(k)); + this.opts.onChange && this.opts.onChange(sortedElements); + }; + const keys = this._getSortedKeys(); + if (keys.length < this.opts.size) { + add(); + } else { + if (this.opts.stickTo === 'top' && key > keys[0]) { + this.elements.delete(keys[0]); + add(); + } else if (this.opts.stickTo === 'bottom' && key < keys[keys.length - 1]) { + this.elements.delete(keys[keys.length - 1]); + add(); + } else if (this.center) { + if (keys.indexOf(this.center) < (keys.length / 2)) { + if (key < keys[keys.length - 1]) { + this.elements.delete(keys[keys.length - 1]); + add(); + } + } else { + if (key > keys[0]) { + delete this.elements.delete(keys[0]); + add(); + } + } + } + } + } + + getElements() { + return this.elements; + } +} diff --git a/examples/infinite-scroll/index.html b/examples/infinite-scroll/index.html new file mode 100644 index 00000000..0d6d0f49 --- /dev/null +++ b/examples/infinite-scroll/index.html @@ -0,0 +1,28 @@ + + + Infinite scroll example + + + + + + + + +
+
+ + +
+
+ +
+
+ +
+ + + + + + diff --git a/examples/infinite-scroll/index.js b/examples/infinite-scroll/index.js new file mode 100644 index 00000000..c7c4579a --- /dev/null +++ b/examples/infinite-scroll/index.js @@ -0,0 +1,164 @@ +const gun = new Gun(); + +const size = 20; +const gunNode = gun.get('posts'); + +function debounce(func, wait, immediate) { + var timeout; + return function() { + var context = this, args = arguments; + var later = function() { + timeout = null; + if (!immediate) func.apply(context, args); + }; + var callNow = immediate && !timeout; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + if (callNow) func.apply(context, args); + }; +}; + +let topSentinelPreviousY = 0; +let topSentinelPreviousRatio = 0; +let bottomSentinelPreviousY = 0; +let bottomSentinelPreviousRatio = 0; +let previousUpIndex = previousDownIndex = -1; + +const render = elements => { + const t = new Date(); + elements.reverse().forEach((data, j) => { + var date = new Date(data.date); + $('#date' + j).text(date.toLocaleDateString() + ' ' + date.toLocaleTimeString()); + $('#text' + j).text(data.text); + $('#img' + j).attr('src', _getCatImg(date.getTime())); + $('#post' + j).css({visibility: 'visible'}); + }); + console.log('rendering took', new Date().getTime() - t.getTime(), 'ms'); +}; + +const onChange = debounce(render, 20); + +const scroller = new InfiniteScrollWindow(gunNode, {size, stickTo: 'top', onChange}); + +const initList = () => { + for (var n = 0; n < size; n++) { + var el = $("
").addClass('post').attr('id', 'post' + n).css({visibility: 'hidden'}); + el.append($('').attr('id', 'date' + n)); + el.append($('').attr('id', 'text' + n)); + el.append($('').attr('id', 'img' + n).attr('height', 100).attr('width', 100)); + $('#container').append(el); + } +} + +const _getCatImg = (n) => { + const url = "https://source.unsplash.com/collection/139386/100x100/?sig="; + return url + n % 999999; +}; + +const getNumFromStyle = numStr => Number(numStr.substring(0, numStr.length - 2)); + +const adjustPaddings = isScrollDown => { + const container = document.getElementById("container"); + const currentPaddingTop = getNumFromStyle(container.style.paddingTop); + const currentPaddingBottom = getNumFromStyle(container.style.paddingBottom); + const remPaddingsVal = 198 * (size / 2); // TODO: calculate element heights + if (isScrollDown) { + container.style.paddingTop = currentPaddingTop + remPaddingsVal + "px"; + container.style.paddingBottom = currentPaddingBottom === 0 ? "0px" : currentPaddingBottom - remPaddingsVal + "px"; + console.log(container.style.paddingTop, container.style.paddingBottom); + + } else { + container.style.paddingBottom = currentPaddingBottom + remPaddingsVal + "px"; + container.style.paddingTop = currentPaddingTop === 0 ? "0px" : currentPaddingTop - remPaddingsVal + "px"; + console.log(container.style.paddingTop, container.style.paddingBottom); + } +} + +const topSentCallback = entry => { + const container = document.getElementById("container"); + + const currentY = entry.boundingClientRect.top; + const currentRatio = entry.intersectionRatio; + const isIntersecting = entry.isIntersecting; + + // conditional check for Scrolling up + if ( + currentY > topSentinelPreviousY && + isIntersecting && + currentRatio >= topSentinelPreviousRatio && + scroller.center !== previousUpIndex && // stop if no new results were received + scroller.opts.stickTo !== 'top' + ) { + previousUpIndex = scroller.center; + adjustPaddings(false); // TODO: if top margin 0, increase it + scroller.up(size / 2); + } + topSentinelPreviousY = currentY; + topSentinelPreviousRatio = currentRatio; +} + +const botSentCallback = entry => { + const currentY = entry.boundingClientRect.top; + const currentRatio = entry.intersectionRatio; + const isIntersecting = entry.isIntersecting; + + // conditional check for Scrolling down + if ( + currentY < bottomSentinelPreviousY && + currentRatio > bottomSentinelPreviousRatio && + isIntersecting && + scroller.center !== previousDownIndex && // stop if no new results were received + scroller.opts.stickTo !== 'bottom' + ) { + previousDownIndex = scroller.center; + adjustPaddings(true); + scroller.down(size / 2); + } + bottomSentinelPreviousY = currentY; + bottomSentinelPreviousRatio = currentRatio; +} + +const initIntersectionObserver = () => { + const options = { + //rootMargin: '190px', + } + + const callback = entries => { + entries.forEach(entry => { + if (entry.target.id === 'post0') { + topSentCallback(entry); + } else if (entry.target.id === `post${size - 1}`) { + botSentCallback(entry); + } + }); + } + + var observer = new IntersectionObserver(callback, options); + observer.observe(document.querySelector("#post0")); + observer.observe(document.querySelector(`#post${size - 1}`)); +} + +initList(size); +initIntersectionObserver(); + +$('#top').click(() => { + scroller.top(); + $('#container').css({'padding-top': 0, 'padding-bottom': 0}); + $(document.body).animate({ scrollTop: 0 }, 500); +}); +$('#bottom').click(() => { + scroller.bottom(); + $('#container').css({'padding-top': 0, 'padding-bottom': 0}); + $(document.body).animate({ scrollTop: $("#container").height() }, 500); +}); + +$('#generate').submit(e => { + e.preventDefault(); + const day = 24 * 60 * 60 * 1000; + const year = 365 * day; + const n = Number($('#number').val()); + for (let i = 0; i < n; i++) { + const d = new Date(40 * year + i * day).toISOString(); + gunNode.get(d).put({text: 'Hello world!', date: d}); + } +}); diff --git a/examples/infinite-scroll/style.css b/examples/infinite-scroll/style.css new file mode 100644 index 00000000..66513e89 --- /dev/null +++ b/examples/infinite-scroll/style.css @@ -0,0 +1,77 @@ +html, body { + margin: 0; + padding: 0; +} + +body { + padding-top: 65px; +} + +header { + background: rgba(255,255,255,0.75); + padding: 15px; +} + +header { + position: fixed; + top: 0; left: 0; right: 0; +} + +#bottom { + position: fixed; + right: 15px; + bottom: 15px; +} + +input { + border: 0; + background-color: #efefef; + padding: 15px; + border-radius: 50px; +} + +button { + background-color: #4a4f9d; + border: 0; + padding: 15px; + color: white; + border-radius: 50px; +} + +input, button { + outline: none; + opacity: 1; +} + +input:focus, button:focus, button:hover { + opacity: 0.8; +} + +button:hover { + cursor: pointer; +} + +#top-buttons, form { + display: inline-block; + margin: 0; +} + +#top-buttons { + float: right; +} + +.post { + margin: 15px; + padding: 15px; + background-color: #9de1fe; + border-radius: 5px; +} + +.post b { + margin-right: 5; +} + +.post img { + display: block; + margin: 10px 0; +} diff --git a/test/panic/infinite-scroll/index.html b/test/panic/infinite-scroll/index.html new file mode 100644 index 00000000..b7da61fd --- /dev/null +++ b/test/panic/infinite-scroll/index.html @@ -0,0 +1,30 @@ + + + Infinite scroll example + + + + + + + + + + +
+
+ + +
+
+ +
+
+ +
+ + + + + + diff --git a/test/panic/infinite-scroll/index.js b/test/panic/infinite-scroll/index.js new file mode 100644 index 00000000..a416436a --- /dev/null +++ b/test/panic/infinite-scroll/index.js @@ -0,0 +1,255 @@ +var config = { + IP: require('ip').address(), + port: 8765, + servers: 1, + browsers: 1, + each: 1500, + wait: 1, + route: { + '/': __dirname + '/index.html', + '/scroller.js': __dirname + '/../../../examples/infinite-scroll/scroller.js', + '/gun.js': __dirname + '/../../../gun.js', + '/jquery.js': __dirname + '/../../../examples/jquery.js' + } +} + +/* + Welcome, person! + You have found the test that causes gun to PANIC with load! + Above are options to configure, the only ones useful are: + - browsers // number of browsers you want to load test across. + - each // the number of messages each browser should sync. + This test is less than 200 lines of code (without comments)! + However, if you aren't familiar with PANIC - you are in for a surprise! + I'm Plublious, and I shall be your guide! +*/ + +// First we need to create a PANIC server. +// Each device/browser in the distributed system we are testing connects to it. +// It then coordinates these clients to cause chaos in the distributed system. +// Cool huh? +var panic = require('panic-server'); +panic.server().on('request', function(req, res){ // Static server + config.route[req.url] && require('fs').createReadStream(config.route[req.url]).pipe(res); +}).listen(config.port); // Start panic server. + +// In order to tell the clients what to do, +// We need a way to reference all of them. +var clients = panic.clients; + +// Some of the clients may be NodeJS servers on different machines. +// PANIC manager is a nifty tool that lets us remotely spawn them. +var manager = require('panic-manager')(); +manager.start({ + clients: Array(config.servers).fill().map(function(u, i){ // Create a bunch of servers. + return { + type: 'node', + port: config.port + (i + 1) // They'll need unique ports to start their servers on, if we run the test on 1 machine. + } + }), + panic: 'http://' + config.IP + ':' + config.port // Auto-connect to our panic server. +}); + +// Now lets divide our clients into "servers" and "browsers". +var servers = clients.filter('Node.js'); +var browsers = clients.excluding(servers); + +// Sweet! Now we can start the tests. +// PANIC works with Mocha and other testing libraries! +// So it is easy to use PANIC. + +describe("Load test "+ config.browsers +" browser(s) across "+ config.servers +" server(s)!", function(){ + + // We'll have to manually launch the browsers, + // So lets up the timeout so we have time to do that. + this.timeout(5 * 60 * 1000); + + it("Servers have joined!", function(){ + // Alright, lets wait until enough gun server peers are connected. + return servers.atLeast(config.servers); + }); + + it("GUN has spawned!", function(){ + // Once they are, we need to actually spin up the gun server. + var tests = [], i = 0; + servers.each(function(client){ + // for each server peer, tell it to run this code: + tests.push(client.run(function(test){ + // NOTE: Despite the fact this LOOKS like we're in a closure... + // it is not! This code is actually getting run + // in a DIFFERENT machine or process! + var env = test.props; + // As a result, we have to manually pass it scope. + test.async(); + // Clean up from previous test. + try{ require('fs').unlinkSync(env.i+'data.json') }catch(e){} + var server = require('http').createServer(function(req, res){ + res.end("I am "+ env.i +"!"); + }); + // Launch the server and start gun! + var Gun = require('gun'); + // Attach the server to gun. + var gun = Gun({file: env.i+'data', web: server, localStorage: false}); + server.listen(env.config.port + env.i, function(){ + // This server peer is now done with the test! + // It has successfully launched. + test.done(); + }); + }, {i: i += 1, config: config})); + }); + // NOW, this is very important: + // Do not proceed to the next test until + // every single server (in different machines/processes) + // have ALL successfully launched. + return Promise.all(tests); + }); + + it(config.browsers +" browser(s) have joined!", function(){ + // Okay! Cool. Now we can move on to the next step... + console.log("PLEASE OPEN http://"+ config.IP +":"+ config.port +" IN "+ config.browsers +" BROWSER(S)!"); + // Which is to manually open up a bunch of browser tabs + // and connect to the PANIC server in the same way + // the NodeJS servers did. + + // However! We're gonna cheat... + browsers.atLeast(1).then(function(){ + // When there is at least one browser opened, tell it to run this code: + browsers.run(function(test){ + // NOTE: This closure is now being run IN THE BROWSER. + // This code is not server side code, despite the fact + // that we've written it on the server. It is not. + // Mind blowing, right? + var env = test.props; + // Like before, we had to manually pass it some scope. + $('body').prepend(""); + // All right, lets cheat by making a button + // that will automatically open all the + // remaining browser tabs for us + // so we don't have to do it manually. + window.allopen = function(i){ + $('#allopen').remove(); + if(env.config.browsers <= i){ return } + i = i || 1; + var win = window.open(location, '_blank'); + win.focus(); + setTimeout(function(){allopen(i+1)},0); + } + }, {config: config}); + }); + // Cool! Once that is done... + // WAIT until all those browser tabs + // have connected to the PANIC server + // THEN move onto the next step + // where we will cause chaos! + return browsers.atLeast(config.browsers); + }); + + it("Data was saved and synced across all browsers!", function(){ + // This is where it gets good! + var tests = [], ids = {}, i = 0; + // Let us create a list of all the browsers IDs connected. + // This will later let each browser check against every other browser. + browsers.each(function(client, id){ + ids[id] = 1; + }); + browsers.each(function(client, id){ + // for every browser, run the following code: + tests.push(client.run(function(test){ + //var audio = new Audio('https://www.nasa.gov/mp3/640170main_Roger%20Roll.mp3');audio.addEventListener('ended', function() {this.currentTime = 0;this.play();}, false);audio.play(); // testing if audio prevents Chrome throttle? + localStorage.clear(); // Clean up anything from before. + var env = test.props; + // Get access to the "outer scope" which has the browser IDs + // as well as other configuration information. + test.async(); + // Now we want to connect to every gun server peer... + var peers = [], i = env.config.servers; + while(i--){ + // For the total number of servers listed in the configuration + // Add their URL into an array. + peers.push('http://'+ env.config.IP + ':' + (env.config.port + (i + 1)) + '/gun'); + } + // Pass all the servers we want to connect to into gun. + //var gun = Gun(); + var gun = Gun(peers); + // Now we want to create a list + // of all the messages that WILL be sent + // according to the expected configuration. + // This is equal to... + var num = 0, total = 0, check = Gun.obj.map(env.ids, function(v,id,t){ + // for each browser ID + // they will be saving X number of messages each. + var i = env.config.each; + while(i--){ + // So add a deterministic key we can check against. + t(id + (i + 1), 1); + // And count up the total number of messages we expect for all. + total += 1; + } + }); + // Note, this `check` hash table now looks something like this: + // {alice1: 1, alice2: 1, alice3: 1, bob1: 1, bob2: 1, bob3: 1} + var report = $("
").css({position: 'fixed', top: 0, right: 0, background: 'white', padding: 10}).text(num +" / "+ total +" Verified").prependTo('body'); + // Add a nifty UI that tells us how many messages have been verified. + // FINALLY, tell gun to subscribe to every record + // that is is/will be saved to this table. + + var size = 20; + for (var n = 0; n < size; n++) { + var el = $("
").css({margin: 30, padding: 15, 'background-color': '#9de1fe'}).attr('id', 'post' + n).hide(); + $(log).append(el); + } + + + + // But we have to actually tell the browser to save data! + /* + var i = 0, to = setInterval(function go(){ + // Cool, make a recursive function + // that keeps going until we've saved each message. + if(env.config.each <= i){ + clearTimeout(to); + return; + } + //to = setTimeout(go, env.config.wait * Math.random()); // add a little jitter. + i += 1; + var year = 365 * 24 * 60 * 60 * 1000; + var d = new Date(40 * year + Math.floor(Math.random() * 10 * year)).toISOString(); + // And actually save the data with gun, + // as a record added to one big 'test' table. + gun.get('posts').get(d).put({text: 'Hello world, ' + d + '!', date: d, id: env.id + i}); + }, env.config.wait); */ + }, {i: i += 1, id: id, ids: ids, config: config})); + }); + // YAY! We're finally done. + // IF AND ONLY IF + // EVERY SINGLE BROWSER + // HAS VERIFIED + // EVERY OTHER BROWSERS' data. + // If they are ALL done, go to the next step. + return Promise.all(tests); + }); + + after("Everything shut down.", function(){ + // which is to shut down all the browsers. + browsers.run(function(){ + setTimeout(function(){ + location.reload(); + }, 15 * 1000); + }); + // And shut down all the servers. + return servers.run(function(){ + process.exit(); + }); + }); +}) +// THE END! +// Congrats, wasn't that epic? +// Or still confused how a single 200 LOC test file +// Is running correctness verification tests +// across an entire distributed system of devices/browsers? +// Well, jump on https://gitter.im/amark/gun ! + +// Think adding tests like this to your work place would be bomb awesome? +// We totally sell PANIC training, licenses, and support! +// Please reach out to hi@gunDB.io if you are interested +// in purchasing consulting or services for PANIC.