67 lines
2.1 KiB
HTML
67 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<title>JS-Waku store script tag example</title>
|
|
<link rel="apple-touch-icon" href="./favicon.png" />
|
|
<link rel="manifest" href="./manifest.json" />
|
|
<link rel="icon" href="./favicon.ico" />
|
|
</head>
|
|
|
|
<body>
|
|
<div><h1>Timestamp of the latest message seen in store</h1></div>
|
|
<div id="timestamp"></div>
|
|
|
|
<script type="module">
|
|
import {
|
|
defaultLibp2p,
|
|
defaultPeerDiscovery,
|
|
WakuNode,
|
|
waitForRemotePeer,
|
|
createDecoder,
|
|
waku
|
|
} from "https://unpkg.com/@waku/sdk@0.0.18/bundle/index.js";
|
|
|
|
/**
|
|
* This example demonstrates how to use the js-waku minified bundle
|
|
* available on unpkg.com.
|
|
*
|
|
* It is a simple script that uses Waku Store to retrieve ping relay messages
|
|
* and displays the timestamp of the most recent ping relay message.
|
|
*/
|
|
const timestampDiv = document.getElementById("timestamp");
|
|
|
|
timestampDiv.innerHTML = "<p>Creating waku.</p>";
|
|
|
|
const libp2p = await defaultLibp2p(undefined, {
|
|
peerDiscovery: [defaultPeerDiscovery()],
|
|
});
|
|
const store = waku.wakuStore();
|
|
const node = new WakuNode({}, libp2p, store);
|
|
|
|
timestampDiv.innerHTML = "<p>Starting waku.</p>";
|
|
await node.start();
|
|
|
|
timestampDiv.innerHTML = "<p>Connecting to a peer.</p>";
|
|
await waitForRemotePeer(node, ["store"]);
|
|
|
|
timestampDiv.innerHTML = "<p>Retrieving messages.</p>";
|
|
const callback = (wakuMessage) => {
|
|
// When `backward` direction is passed, first message is the most recent
|
|
timestampDiv.innerHTML = wakuMessage.timestamp;
|
|
|
|
// When returning true, `queryHistory` stops retrieving pages
|
|
// In our case, we only want one message, hence one page.
|
|
return true;
|
|
};
|
|
|
|
await node.store.queryOrderedCallback(
|
|
[createDecoder("/relay-ping/1/ping/null")],
|
|
callback,
|
|
{ pageDirection: "backward" }
|
|
);
|
|
</script>
|
|
</body>
|
|
</html>
|