feat: add button to query from store in light-js
This commit is contained in:
parent
2f455c14c5
commit
e4f4f56d0e
|
@ -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>";
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue