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

feat: add button to query from store in light-js #283

Merged
merged 1 commit into from
Nov 7, 2023
Merged

feat: add button to query from store in light-js #283

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
59 changes: 49 additions & 10 deletions examples/light-js/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,13 @@ <h2>Remote Peers</h2>
<br />
<div id="messages"></div>

<div>
<h2>Store</h2>
</div>
<button disabled id="queryStoreButton" type="button">
Retrieve past messages
</button>

<script src="https://unpkg.com/@multiformats/[email protected]/dist/index.min.js"></script>
<script type="module">
import {
Expand All @@ -69,11 +76,12 @@ <h2>Remote Peers</h2>
createDecoder,
utf8ToBytes,
bytesToUtf8,
} from "https://unpkg.com/@waku/[email protected].18/bundle/index.js";
} from "https://unpkg.com/@waku/[email protected].20/bundle/index.js";
import {
enrTree,
DnsNodeDiscovery,
} from "https://unpkg.com/@waku/[email protected]/bundle/index.js";
import { messageHash } from "https://unpkg.com/@waku/[email protected]/bundle/index.js";

const peerIdDiv = document.getElementById("peer-id");
const remotePeerIdDiv = document.getElementById("remote-peer-id");
Expand All @@ -82,6 +90,7 @@ <h2>Remote Peers</h2>
const dialButton = document.getElementById("dial");
const subscribeButton = document.getElementById("subscribe");
const unsubscribeButton = document.getElementById("unsubscribe");
const queryStoreButton = document.getElementById("queryStoreButton");
const messagesDiv = document.getElementById("messages");
const textInput = document.getElementById("textInput");
const sendButton = document.getElementById("sendButton");
Expand All @@ -91,12 +100,19 @@ <h2>Remote Peers</h2>
const ContentTopic = "/js-waku-examples/1/chat/utf8";
const decoder = createDecoder(ContentTopic);
const encoder = createEncoder({ contentTopic: ContentTopic });
let messages = [];
// Each key is a unique identifier for the message. Each value is an obj { text, timestamp }
let messages = {};
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

using a Map might makes your life easier in terms of iterating through.

let unsubscribe;

const updateMessages = (msgs, div) => {
div.innerHTML = "<ul>";
messages.forEach((msg) => (div.innerHTML += "<li>" + msg + "</li>"));
Object.values(msgs)
.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime())
.forEach(
(msg) =>
(div.innerHTML +=
"<li>" + `${msg.text} - ${msg.timestamp}` + "</li>")
);
div.innerHTML += "</ul>";
};

Expand All @@ -114,6 +130,11 @@ <h2>Remote Peers</h2>
statusDiv.innerHTML = "<p>Starting Waku node.</p>";
await node.start();

window.waku = node;
console.info(
"Use window.waku to access the waku node running in the browser directly through the console."
);

// 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
Expand Down Expand Up @@ -142,6 +163,7 @@ <h2>Remote Peers</h2>
textInput.disabled = false;
sendButton.disabled = false;
subscribeButton.disabled = false;
queryStoreButton.disabled = false;
});

statusDiv.innerHTML = "<p>Waku node started.</p>";
Expand All @@ -162,22 +184,40 @@ <h2>Remote Peers</h2>
statusDiv.innerHTML = "<p>Error: invalid multiaddr provided</p>";
throw err;
}
await node.dial(multiaddr, ["filter", "lightpush"]);
await node.dial(multiaddr, ["filter", "lightpush", "store"]);
};

const callback = (wakuMessage) => {
const messageReceivedCallback = (wakuMessage) => {
// create a unique key for the message
const msgHash =
bytesToUtf8(messageHash(ContentTopic, wakuMessage)) +
wakuMessage.proto.timestamp;
const text = bytesToUtf8(wakuMessage.payload);
const timestamp = wakuMessage.timestamp.toString();
messages.push(text + " - " + timestamp);
// store message by its key
messages[msgHash + wakuMessage.proto.timestamp] = {
text,
timestamp: wakuMessage.timestamp,
};
// call function to refresh display of messages
updateMessages(messages, messagesDiv);
};

subscribeButton.onclick = async () => {
unsubscribe = await node.filter.subscribe([decoder], callback);
unsubscribe = await node.filter.subscribe(
[decoder],
messageReceivedCallback
);
unsubscribeButton.disabled = false;
subscribeButton.disabled = true;
};

queryStoreButton.onclick = async () => {
await node.store.queryWithOrderedCallback(
[decoder],
messageReceivedCallback
);
};

unsubscribeButton.onclick = async () => {
await unsubscribe();
unsubscribe = undefined;
Expand All @@ -203,7 +243,6 @@ <h2>Remote Peers</h2>
remoteMultiAddrDiv.value = event.target.value;
});

//
async function getPeers() {
// Display status
statusDiv.innerHTML = "<p>Discovering peers</p>";
Expand Down Expand Up @@ -232,7 +271,7 @@ <h2>Remote Peers</h2>

// Set first peer as selected
peersSelector.options[0].selected = true;
remoteMultiAddrDiv.value = selectElement.options[0].value;
remoteMultiAddrDiv.value = peersSelector.options[0].value;

statusDiv.innerHTML = "<p>Peers discovered</p>";
}
Expand Down
Loading