mirror of
https://github.com/amark/gun.git
synced 2025-03-30 15:08:33 +00:00
infinite scrolling example, panic test wip
This commit is contained in:
Martti Malmi
parent
a89ca678bb
commit
811a1b8963
113
examples/infinite-scroll/InfiniteScrollWindow.js
Normal file
113
examples/infinite-scroll/InfiniteScrollWindow.js
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
28
examples/infinite-scroll/index.html
Normal file
28
examples/infinite-scroll/index.html
Normal file
@ -0,0 +1,28 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Infinite scroll example</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
|
||||
<link rel="stylesheet" type="text/css" href="./style.css">
|
||||
<script src="/jquery.js"></script>
|
||||
<script src="/gun.js"></script>
|
||||
<script src="./InfiniteScrollWindow.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<form id="generate">
|
||||
<input type="text" id="number" placeholder="Number of posts"/>
|
||||
<button>Generate</button>
|
||||
</form>
|
||||
<div id="top-buttons">
|
||||
<button id="top">Top</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="container" style="padding-top: 0px; padding-bottom: 0px"></div>
|
||||
|
||||
<button id="bottom">Bottom</button>
|
||||
|
||||
<script src="./index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
164
examples/infinite-scroll/index.js
Normal file
164
examples/infinite-scroll/index.js
Normal file
@ -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 = $("<div>").addClass('post').attr('id', 'post' + n).css({visibility: 'hidden'});
|
||||
el.append($('<b>').attr('id', 'date' + n));
|
||||
el.append($('<span>').attr('id', 'text' + n));
|
||||
el.append($('<img>').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});
|
||||
}
|
||||
});
|
||||
77
examples/infinite-scroll/style.css
Normal file
77
examples/infinite-scroll/style.css
Normal file
@ -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;
|
||||
}
|
||||
30
test/panic/infinite-scroll/index.html
Normal file
30
test/panic/infinite-scroll/index.html
Normal file
@ -0,0 +1,30 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Infinite scroll example</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
|
||||
<link rel="stylesheet" type="text/css" href="./style.css">
|
||||
<script src="/jquery.js"></script>
|
||||
<script src="/gun.js"></script>
|
||||
<script src="./InfiniteScrollWindow.js"></script>
|
||||
<script src='panic.js'></script>
|
||||
<script>panic.server(location.origin)</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<form id="generate">
|
||||
<input type="text" id="number" placeholder="Number of posts"/>
|
||||
<button>Generate</button>
|
||||
</form>
|
||||
<div id="top-buttons">
|
||||
<button id="top">Top</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="container" style="padding-top: 0px; padding-bottom: 0px"></div>
|
||||
|
||||
<button id="bottom">Bottom</button>
|
||||
|
||||
<script src="./index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
255
test/panic/infinite-scroll/index.js
Normal file
255
test/panic/infinite-scroll/index.js
Normal file
@ -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("<button id='allopen' onclick='allopen()'>Open All Browsers</button>");
|
||||
// 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 = $("<div>").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 = $("<div>").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.
|
||||
Loading…
x
Reference in New Issue
Block a user