Updates
This commit is contained in:
parent
4ff9040c90
commit
e41ddd51c1
|
@ -10,18 +10,42 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div><h2>Status</h2></div>
|
<div>
|
||||||
|
<h2>Status</h2>
|
||||||
|
</div>
|
||||||
<div id="status"></div>
|
<div id="status"></div>
|
||||||
|
|
||||||
<div><h2>Local Peer Id</h2></div>
|
<div>
|
||||||
|
<h2>Local Peer Id</h2>
|
||||||
|
</div>
|
||||||
<div id="peer-id"></div>
|
<div id="peer-id"></div>
|
||||||
|
|
||||||
<div><h2>Remote Peer Id</h2></div>
|
<div>
|
||||||
<div id="remote-peer-id"></div>
|
<h2>Select Peer</h2>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button id="getPeersButton" type="button">Refresh Peers</button>
|
||||||
|
<select id="peer-select">
|
||||||
|
<option value=""></option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
<label for="remote-multiaddr">Remote peer's multiaddr</label>
|
<label for="remote-multiaddr">Remote peer's multiaddr</label>
|
||||||
<input id="remote-multiaddr" type="text" value="" />
|
</div>
|
||||||
|
<div style="margin-right: 1em">
|
||||||
|
<input
|
||||||
|
id="remote-multiaddr"
|
||||||
|
type="text"
|
||||||
|
value=""
|
||||||
|
style="width: 100%; max-width: 900px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<button disabled id="dial" type="button">Dial</button>
|
<button disabled id="dial" type="button">Dial</button>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2>Remote Peers</h2>
|
||||||
|
</div>
|
||||||
|
<div id="remote-peer-id"></div>
|
||||||
<br />
|
<br />
|
||||||
<button disabled id="subscribe" type="button">Subscribe with Filter</button>
|
<button disabled id="subscribe" type="button">Subscribe with Filter</button>
|
||||||
<button disabled id="unsubscribe" type="button">
|
<button disabled id="unsubscribe" type="button">
|
||||||
|
@ -61,6 +85,8 @@
|
||||||
const messagesDiv = document.getElementById("messages");
|
const messagesDiv = document.getElementById("messages");
|
||||||
const textInput = document.getElementById("textInput");
|
const textInput = document.getElementById("textInput");
|
||||||
const sendButton = document.getElementById("sendButton");
|
const sendButton = document.getElementById("sendButton");
|
||||||
|
const getPeersButton = document.getElementById("getPeersButton");
|
||||||
|
const peersSelector = document.getElementById("peer-select");
|
||||||
|
|
||||||
const ContentTopic = "/js-waku-examples/1/chat/utf8";
|
const ContentTopic = "/js-waku-examples/1/chat/utf8";
|
||||||
const decoder = createDecoder(ContentTopic);
|
const decoder = createDecoder(ContentTopic);
|
||||||
|
@ -75,7 +101,7 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await searchForPeer(statusDiv, remoteMultiAddrDiv);
|
await getPeers();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log("Failed to find a peer", e);
|
console.log("Failed to find a peer", e);
|
||||||
remoteMultiAddrDiv.value =
|
remoteMultiAddrDiv.value =
|
||||||
|
@ -87,6 +113,37 @@
|
||||||
|
|
||||||
statusDiv.innerHTML = "<p>Starting Waku node.</p>";
|
statusDiv.innerHTML = "<p>Starting Waku node.</p>";
|
||||||
await node.start();
|
await node.start();
|
||||||
|
|
||||||
|
// Queries all peers from libp2p peer store and updates list of connected peers
|
||||||
|
const updatePeersList = async () => {
|
||||||
|
// Generate <p> element with connection string from each peer
|
||||||
|
const peers = await node.libp2p.peerStore.all();
|
||||||
|
const peerIdElements = peers.map((peer) => {
|
||||||
|
const element = document.createElement("p");
|
||||||
|
element.textContent = `${peer.addresses[1].multiaddr}/p2p/${peer.id}`;
|
||||||
|
return element;
|
||||||
|
});
|
||||||
|
// Update elements displaying list of peers
|
||||||
|
remotePeerIdDiv.replaceChildren(...peerIdElements);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Refreshes list of connected peers each time a new one is detected
|
||||||
|
node.store.addLibp2pEventListener("peer:connect", async (event) => {
|
||||||
|
const peerId = event.detail;
|
||||||
|
console.log(`Peer connected with peer id: ${peerId}`);
|
||||||
|
// Wait half a second after receiving event for peer to show up in peer store
|
||||||
|
setTimeout(async () => {
|
||||||
|
updatePeersList();
|
||||||
|
}, 500);
|
||||||
|
|
||||||
|
// Update status
|
||||||
|
statusDiv.innerHTML = `<p>Peer dialed: ${peerId}</p>`;
|
||||||
|
// Enable send and subscribe inputs as we are now connected to a peer
|
||||||
|
textInput.disabled = false;
|
||||||
|
sendButton.disabled = false;
|
||||||
|
subscribeButton.disabled = false;
|
||||||
|
});
|
||||||
|
|
||||||
statusDiv.innerHTML = "<p>Waku node started.</p>";
|
statusDiv.innerHTML = "<p>Waku node started.</p>";
|
||||||
peerIdDiv.innerHTML = "<p>" + node.libp2p.peerId.toString() + "</p>";
|
peerIdDiv.innerHTML = "<p>" + node.libp2p.peerId.toString() + "</p>";
|
||||||
dialButton.disabled = false;
|
dialButton.disabled = false;
|
||||||
|
@ -98,15 +155,14 @@
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
statusDiv.innerHTML = "<p>Dialing peer.</p>";
|
statusDiv.innerHTML = "<p>Dialing peer.</p>";
|
||||||
const multiaddr = MultiformatsMultiaddr.multiaddr(ma);
|
let multiaddr;
|
||||||
|
try {
|
||||||
|
multiaddr = MultiformatsMultiaddr.multiaddr(ma);
|
||||||
|
} catch (err) {
|
||||||
|
statusDiv.innerHTML = "<p>Error: invalid multiaddr provided</p>";
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
await node.dial(multiaddr, ["filter", "lightpush"]);
|
await node.dial(multiaddr, ["filter", "lightpush"]);
|
||||||
await waitForRemotePeer(node, ["filter", "lightpush"]);
|
|
||||||
const peers = await node.libp2p.peerStore.all();
|
|
||||||
statusDiv.innerHTML = "<p>Peer dialed.</p>";
|
|
||||||
remotePeerIdDiv.innerHTML = "<p>" + peers[0].id.toString() + "</p>";
|
|
||||||
textInput.disabled = false;
|
|
||||||
sendButton.disabled = false;
|
|
||||||
subscribeButton.disabled = false;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const callback = (wakuMessage) => {
|
const callback = (wakuMessage) => {
|
||||||
|
@ -139,19 +195,46 @@
|
||||||
textInput.value = null;
|
textInput.value = null;
|
||||||
};
|
};
|
||||||
|
|
||||||
async function searchForPeer(statusNode, multiaddrNode) {
|
getPeersButton.onclick = async () => {
|
||||||
statusDiv.innerHTML = "<p>Discovering peer</p>";
|
await getPeers(statusDiv, remoteMultiAddrDiv);
|
||||||
|
};
|
||||||
|
|
||||||
|
peersSelector.addEventListener("change", function (event) {
|
||||||
|
remoteMultiAddrDiv.value = event.target.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
//
|
||||||
|
async function getPeers() {
|
||||||
|
// Display status
|
||||||
|
statusDiv.innerHTML = "<p>Discovering peers</p>";
|
||||||
|
|
||||||
|
// Clear all options in select element
|
||||||
|
peersSelector.innerHTML = "";
|
||||||
|
|
||||||
|
// Get peers using DNS discovery
|
||||||
|
const defaultNodeCount = 5;
|
||||||
const dnsDiscovery = await DnsNodeDiscovery.dnsOverHttp();
|
const dnsDiscovery = await DnsNodeDiscovery.dnsOverHttp();
|
||||||
const peersIterator = await dnsDiscovery.getNextPeer(
|
const peers = await dnsDiscovery.getPeers([enrTree["TEST"]], {
|
||||||
[enrTree["TEST"]],
|
relay: defaultNodeCount,
|
||||||
{ lightPush: 1, filter: 1 }
|
store: defaultNodeCount,
|
||||||
);
|
filter: defaultNodeCount,
|
||||||
const peerEnr = await peersIterator.next();
|
lightPush: defaultNodeCount,
|
||||||
const ma = peerEnr.value.multiaddrs.map((v) => v.toString())[1];
|
});
|
||||||
const peerId = peerEnr.value.peerId.toString();
|
|
||||||
|
|
||||||
multiaddrNode.value = `${ma}/p2p/${peerId}`;
|
// Create an option element for each peer's multiaddr and append to select element
|
||||||
|
const optionElements = peers.map((peer) => {
|
||||||
|
const optionElement = document.createElement("option");
|
||||||
|
optionElement.value = `${peer.multiaddrs[1]}/p2p/${peer.peerId}`;
|
||||||
|
optionElement.text = `${peer.multiaddrs[1]}/p2p/${peer.peerId}`;
|
||||||
|
return optionElement;
|
||||||
|
});
|
||||||
|
peersSelector.append(...optionElements);
|
||||||
|
|
||||||
|
// Set first peer as selected
|
||||||
|
peersSelector.options[0].selected = true;
|
||||||
|
remoteMultiAddrDiv.value = selectElement.options[0].value;
|
||||||
|
|
||||||
|
statusDiv.innerHTML = "<p>Peers discovered</p>";
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in New Issue