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

This commit is contained in:
Arseniy Klempner 2023-11-01 17:39:41 -07:00
parent 2f455c14c5
commit e4f4f56d0e
No known key found for this signature in database
GPG Key ID: 59967D458EFBF01B
1 changed files with 49 additions and 10 deletions

View File

@ -60,6 +60,13 @@
<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/multiaddr@12.1.1/dist/index.min.js"></script>
<script type="module">
import {
@ -69,11 +76,12 @@
createDecoder,
utf8ToBytes,
bytesToUtf8,
} from "https://unpkg.com/@waku/sdk@0.0.18/bundle/index.js";
} from "https://unpkg.com/@waku/sdk@0.0.20/bundle/index.js";
import {
enrTree,
DnsNodeDiscovery,
} from "https://unpkg.com/@waku/dns-discovery@0.0.16/bundle/index.js";
import { messageHash } from "https://unpkg.com/@waku/message-hash@0.1.8/bundle/index.js";
const peerIdDiv = document.getElementById("peer-id");
const remotePeerIdDiv = document.getElementById("remote-peer-id");
@ -82,6 +90,7 @@
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");
@ -91,12 +100,19 @@
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 = {};
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>";
};
@ -114,6 +130,11 @@
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
@ -142,6 +163,7 @@
textInput.disabled = false;
sendButton.disabled = false;
subscribeButton.disabled = false;
queryStoreButton.disabled = false;
});
statusDiv.innerHTML = "<p>Waku node started.</p>";
@ -162,22 +184,40 @@
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;
@ -203,7 +243,6 @@
remoteMultiAddrDiv.value = event.target.value;
});
//
async function getPeers() {
// Display status
statusDiv.innerHTML = "<p>Discovering peers</p>";
@ -232,7 +271,7 @@
// 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>";
}