Merge pull request #283 from waku-org/adklempner/light-js-store-query
feat: add button to query from store in light-js
This commit is contained in:
commit
73ca3ab4e9
|
@ -60,6 +60,13 @@
|
||||||
<br />
|
<br />
|
||||||
<div id="messages"></div>
|
<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 src="https://unpkg.com/@multiformats/multiaddr@12.1.1/dist/index.min.js"></script>
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import {
|
import {
|
||||||
|
@ -69,11 +76,12 @@
|
||||||
createDecoder,
|
createDecoder,
|
||||||
utf8ToBytes,
|
utf8ToBytes,
|
||||||
bytesToUtf8,
|
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 {
|
import {
|
||||||
enrTree,
|
enrTree,
|
||||||
DnsNodeDiscovery,
|
DnsNodeDiscovery,
|
||||||
} from "https://unpkg.com/@waku/dns-discovery@0.0.16/bundle/index.js";
|
} 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 peerIdDiv = document.getElementById("peer-id");
|
||||||
const remotePeerIdDiv = document.getElementById("remote-peer-id");
|
const remotePeerIdDiv = document.getElementById("remote-peer-id");
|
||||||
|
@ -82,6 +90,7 @@
|
||||||
const dialButton = document.getElementById("dial");
|
const dialButton = document.getElementById("dial");
|
||||||
const subscribeButton = document.getElementById("subscribe");
|
const subscribeButton = document.getElementById("subscribe");
|
||||||
const unsubscribeButton = document.getElementById("unsubscribe");
|
const unsubscribeButton = document.getElementById("unsubscribe");
|
||||||
|
const queryStoreButton = document.getElementById("queryStoreButton");
|
||||||
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");
|
||||||
|
@ -91,12 +100,19 @@
|
||||||
const ContentTopic = "/js-waku-examples/1/chat/utf8";
|
const ContentTopic = "/js-waku-examples/1/chat/utf8";
|
||||||
const decoder = createDecoder(ContentTopic);
|
const decoder = createDecoder(ContentTopic);
|
||||||
const encoder = createEncoder({ contentTopic: 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;
|
let unsubscribe;
|
||||||
|
|
||||||
const updateMessages = (msgs, div) => {
|
const updateMessages = (msgs, div) => {
|
||||||
div.innerHTML = "<ul>";
|
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>";
|
div.innerHTML += "</ul>";
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -114,6 +130,11 @@
|
||||||
statusDiv.innerHTML = "<p>Starting Waku node.</p>";
|
statusDiv.innerHTML = "<p>Starting Waku node.</p>";
|
||||||
await node.start();
|
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
|
// Queries all peers from libp2p peer store and updates list of connected peers
|
||||||
const updatePeersList = async () => {
|
const updatePeersList = async () => {
|
||||||
// Generate <p> element with connection string from each peer
|
// Generate <p> element with connection string from each peer
|
||||||
|
@ -142,6 +163,7 @@
|
||||||
textInput.disabled = false;
|
textInput.disabled = false;
|
||||||
sendButton.disabled = false;
|
sendButton.disabled = false;
|
||||||
subscribeButton.disabled = false;
|
subscribeButton.disabled = false;
|
||||||
|
queryStoreButton.disabled = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
statusDiv.innerHTML = "<p>Waku node started.</p>";
|
statusDiv.innerHTML = "<p>Waku node started.</p>";
|
||||||
|
@ -162,22 +184,40 @@
|
||||||
statusDiv.innerHTML = "<p>Error: invalid multiaddr provided</p>";
|
statusDiv.innerHTML = "<p>Error: invalid multiaddr provided</p>";
|
||||||
throw err;
|
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 text = bytesToUtf8(wakuMessage.payload);
|
||||||
const timestamp = wakuMessage.timestamp.toString();
|
// store message by its key
|
||||||
messages.push(text + " - " + timestamp);
|
messages[msgHash + wakuMessage.proto.timestamp] = {
|
||||||
|
text,
|
||||||
|
timestamp: wakuMessage.timestamp,
|
||||||
|
};
|
||||||
|
// call function to refresh display of messages
|
||||||
updateMessages(messages, messagesDiv);
|
updateMessages(messages, messagesDiv);
|
||||||
};
|
};
|
||||||
|
|
||||||
subscribeButton.onclick = async () => {
|
subscribeButton.onclick = async () => {
|
||||||
unsubscribe = await node.filter.subscribe([decoder], callback);
|
unsubscribe = await node.filter.subscribe(
|
||||||
|
[decoder],
|
||||||
|
messageReceivedCallback
|
||||||
|
);
|
||||||
unsubscribeButton.disabled = false;
|
unsubscribeButton.disabled = false;
|
||||||
subscribeButton.disabled = true;
|
subscribeButton.disabled = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
queryStoreButton.onclick = async () => {
|
||||||
|
await node.store.queryWithOrderedCallback(
|
||||||
|
[decoder],
|
||||||
|
messageReceivedCallback
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
unsubscribeButton.onclick = async () => {
|
unsubscribeButton.onclick = async () => {
|
||||||
await unsubscribe();
|
await unsubscribe();
|
||||||
unsubscribe = undefined;
|
unsubscribe = undefined;
|
||||||
|
@ -203,7 +243,6 @@
|
||||||
remoteMultiAddrDiv.value = event.target.value;
|
remoteMultiAddrDiv.value = event.target.value;
|
||||||
});
|
});
|
||||||
|
|
||||||
//
|
|
||||||
async function getPeers() {
|
async function getPeers() {
|
||||||
// Display status
|
// Display status
|
||||||
statusDiv.innerHTML = "<p>Discovering peers</p>";
|
statusDiv.innerHTML = "<p>Discovering peers</p>";
|
||||||
|
@ -232,7 +271,7 @@
|
||||||
|
|
||||||
// Set first peer as selected
|
// Set first peer as selected
|
||||||
peersSelector.options[0].selected = true;
|
peersSelector.options[0].selected = true;
|
||||||
remoteMultiAddrDiv.value = selectElement.options[0].value;
|
remoteMultiAddrDiv.value = peersSelector.options[0].value;
|
||||||
|
|
||||||
statusDiv.innerHTML = "<p>Peers discovered</p>";
|
statusDiv.innerHTML = "<p>Peers discovered</p>";
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue