From a0cd14a0c073ba3b978f5c8130497f9a3d34775a Mon Sep 17 00:00:00 2001 From: adbenitez Date: Thu, 6 Jan 2022 16:10:26 -0500 Subject: [PATCH 1/3] use local storage events to communicate between peers --- webxdc.js | 141 +++++++++++++++++++----------------------------------- 1 file changed, 49 insertions(+), 92 deletions(-) diff --git a/webxdc.js b/webxdc.js index 26860b0..8004749 100644 --- a/webxdc.js +++ b/webxdc.js @@ -1,109 +1,66 @@ // debug friend: document.writeln(JSON.stringify(value)); -window.xdcStorage = (() => { - var updatesKey = "__xdcUpdatesKey__"; - var fakeStorage = { - _data: {}, - - setItem: function (id, val) { - return this._data[id] = String(val); - }, - - getItem: function (id) { - return this._data.hasOwnProperty(id) ? this._data[id] : undefined; - }, - - removeItem: function (id) { - return delete this._data[id]; - }, - - clear: function () { - return this._data = {}; - } - }; - var localStorageSupported = () => { - var testKey = "__xdcTestKey__"; - try { - var storage = window.localStorage; - storage.setItem(testKey, "1"); - storage.removeItem(testKey); - return true; - } catch (error) { - return false; - } - }; - var storage = localStorageSupported() ? window.localStorage : fakeStorage; - - return { - getUpdates: () => { - var updatesJSON = storage.getItem(updatesKey); - return updatesJSON ? JSON.parse(updatesJSON) : []; - }, - saveUpdate: (update) => { - var updates = window.xdcStorage.getUpdates(); - updates.push(update); - storage.setItem(updatesKey, JSON.stringify(updates)); - }, - clear: () => { - storage.clear(); - } - }; -})(); - window.webxdc = (() => { var updateListener = () => {}; + var updatesKey = "__xdcUpdatesKey__"; + window.addEventListener('storage', (event) => { + if (event.key == null) { + window.location.reload(); + } else if (event.key == updatesKey) { + var updates = JSON.parse(event.newValue); + updateListener(updates[updates.length-1]); + } + }); return { - selfAddr: () => window.xdcSelfAddr || "device0@local.host", - selfName: () => window.xdcSelfName || "device0", - setUpdateListener: (cb) => (window.xdcUpdateListener = cb), - getAllUpdates: () => {return getXdcRoot().xdcStorage.getUpdates();}, + selfAddr: () => { + var params = new URLSearchParams(window.location.hash.substr(1)); + return params.get("addr") || "device0@local.host"; + }, + selfName: () => { + var params = new URLSearchParams(window.location.hash.substr(1)); + return params.get("name") || "device0"; + }, + setUpdateListener: (cb) => (updateListener = cb), + getAllUpdates: () => { + var updatesJSON = window.localStorage.getItem(updatesKey); + return updatesJSON ? JSON.parse(updatesJSON) : []; + }, sendUpdate: (description, payload) => { // alert(description+"\n\n"+JSON.stringify(payload)); var update = {payload: payload}; - getXdcRoot().xdcStorage.saveUpdate(update); - var all = getAllXdcWindows(); - all.forEach((w) => { - //alert(w.xdcUpdateListener); - w.xdcUpdateListener(update); - }); + updateListener(update); + var updatesJSON = window.localStorage.getItem(updatesKey); + var updates = updatesJSON ? JSON.parse(updatesJSON) : []; + updates.push(update); + window.localStorage.setItem(updatesKey, JSON.stringify(updates)); }, }; })(); -window.allXdcWindows = [window]; -window.xdcUpdateListener = 12; +window.addXdcPeer = () => { + var loc = window.location; + // get next peer ID + var params = new URLSearchParams(loc.hash.substr(1)); + var peerId = Number(params.get("next_peer")) || 1; -var styleControlPanel = 'position: fixed; bottom:1em; left:1em; background-color: #000; opacity:0.8; padding:.5em; font-family: sans-serif; width: 50%;color:#fff;'; -var styleMenuLink = 'color:#fff; text-decoration: none;'; + // open a new window + var peerName = "device" + peerId; + var url = loc.protocol + "//" + loc.host + loc.pathname + "#name=" + peerName + "&addr=" + peerName + "@local.host"; + window.open(url); -function getXdcRoot() { - var test = window; - while (typeof test.xdcRoot != 'undefined') { - test = test.xdcRoot; - } - return test; + // update next peer ID + params.set("next_peer", peerId + 1); + window.location.hash = "#" + params.toString(); } -function getAllXdcWindows() { - var xdcRoot = getXdcRoot(); - return xdcRoot.allXdcWindows; +window.clearXdcStorage = () => { + window.localStorage.clear(); + window.location.reload(); } -function addXdcPeer() { - var xdcChild = window.open(window.location); - var xdcRoot = getXdcRoot(); - xdcChild.xdcRoot = xdcRoot; - xdcChild.xdcSelfName = "device" + getAllXdcWindows().length; - xdcChild.xdcSelfAddr = xdcChild.xdcSelfName + "@local.host"; - xdcRoot.allXdcWindows.push(xdcChild); -} - -function clearXdcStorage() { - getXdcRoot().xdcStorage.clear(); - alert("Done."); -} - -function alterXdcApp() { +window.alterXdcApp = () => { + var styleControlPanel = 'position: fixed; bottom:1em; left:1em; background-color: #000; opacity:0.8; padding:.5em; font-family: sans-serif; width: 50%;color:#fff;'; + var styleMenuLink = 'color:#fff; text-decoration: none;'; var title = document.getElementsByTagName('title')[0]; if (typeof title == 'undefined') { title = document.createElement('title'); @@ -111,15 +68,15 @@ function alterXdcApp() { } title.innerText = window.webxdc.selfAddr(); - if (getXdcRoot() === window) { + if (window.webxdc.selfName() == "device0") { var div = document.createElement('div'); div.innerHTML = '
' + - 'Add Peer | ' + - 'Clear Storage' + + 'Add Peer | ' + + 'Clear Storage' + '
'; document.getElementsByTagName('body')[0].append(div.firstChild); } } -window.addEventListener("load", alterXdcApp); +window.addEventListener("load", window.alterXdcApp); From 841f7f969100e7048eb4b6e783d3ff6042e88cea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Asiel=20D=C3=ADaz=20Ben=C3=ADtez?= Date: Thu, 6 Jan 2022 18:59:55 -0500 Subject: [PATCH 2/3] Update webxdc.js Co-authored-by: bjoern --- webxdc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webxdc.js b/webxdc.js index 8004749..d4e9861 100644 --- a/webxdc.js +++ b/webxdc.js @@ -5,7 +5,7 @@ window.webxdc = (() => { window.addEventListener('storage', (event) => { if (event.key == null) { window.location.reload(); - } else if (event.key == updatesKey) { + } else if (event.key === updatesKey) { var updates = JSON.parse(event.newValue); updateListener(updates[updates.length-1]); } From 9106496e0a9ffc9081aac17d93ab38070d035bef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Asiel=20D=C3=ADaz=20Ben=C3=ADtez?= Date: Thu, 6 Jan 2022 19:00:40 -0500 Subject: [PATCH 3/3] Update webxdc.js Co-authored-by: Lars-Magnus Skog --- webxdc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webxdc.js b/webxdc.js index d4e9861..8ccc8c6 100644 --- a/webxdc.js +++ b/webxdc.js @@ -68,7 +68,7 @@ window.alterXdcApp = () => { } title.innerText = window.webxdc.selfAddr(); - if (window.webxdc.selfName() == "device0") { + if (window.webxdc.selfName() === "device0") { var div = document.createElement('div'); div.innerHTML = '
' +