Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: select peer to dial from drop down #282

Merged
merged 1 commit into from
Nov 2, 2023
Merged

feat: select peer to dial from drop down #282

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 110 additions & 27 deletions examples/light-js/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,42 @@
</head>

<body>
<div><h2>Status</h2></div>
<div>
<h2>Status</h2>
</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><h2>Remote Peer Id</h2></div>
<div id="remote-peer-id"></div>

<label for="remote-multiaddr">Remote peer's multiaddr</label>
<input id="remote-multiaddr" type="text" value="" />
<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>
</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>

<div>
<h2>Remote Peers</h2>
</div>
<div id="remote-peer-id"></div>
<br />
<button disabled id="subscribe" type="button">Subscribe with Filter</button>
<button disabled id="unsubscribe" type="button">
Expand Down Expand Up @@ -61,6 +85,8 @@
const messagesDiv = document.getElementById("messages");
const textInput = document.getElementById("textInput");
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 decoder = createDecoder(ContentTopic);
Expand All @@ -75,7 +101,7 @@
};

try {
await searchForPeer(statusDiv, remoteMultiAddrDiv);
await getPeers();
} catch (e) {
console.log("Failed to find a peer", e);
remoteMultiAddrDiv.value =
Expand All @@ -87,6 +113,37 @@

statusDiv.innerHTML = "<p>Starting Waku node.</p>";
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>";
peerIdDiv.innerHTML = "<p>" + node.libp2p.peerId.toString() + "</p>";
dialButton.disabled = false;
Expand All @@ -98,15 +155,14 @@
return;
}
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 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) => {
Expand Down Expand Up @@ -139,19 +195,46 @@
textInput.value = null;
};

async function searchForPeer(statusNode, multiaddrNode) {
statusDiv.innerHTML = "<p>Discovering peer</p>";
getPeersButton.onclick = async () => {
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 peersIterator = await dnsDiscovery.getNextPeer(
[enrTree["TEST"]],
{ lightPush: 1, filter: 1 }
);
const peerEnr = await peersIterator.next();
const ma = peerEnr.value.multiaddrs.map((v) => v.toString())[1];
const peerId = peerEnr.value.peerId.toString();

multiaddrNode.value = `${ma}/p2p/${peerId}`;
const peers = await dnsDiscovery.getPeers([enrTree["TEST"]], {
relay: defaultNodeCount,
store: defaultNodeCount,
filter: defaultNodeCount,
lightPush: defaultNodeCount,
});

// 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>
</body>
Expand Down
Loading