js-waku-examples/store-js/index.html

69 lines
2.2 KiB
HTML
Raw Normal View History

2022-09-06 18:31:23 +00:00
<!DOCTYPE html>
2022-12-12 04:59:35 +00:00
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
2022-09-20 00:27:05 +00:00
<title>JS-Waku store script tag example</title>
2023-01-04 20:15:56 +00:00
<link rel="apple-touch-icon" href="./favicon.png" />
<link rel="manifest" href="./manifest.json" />
<link rel="icon" href="./favicon.ico" />
2022-12-12 04:59:35 +00:00
</head>
2022-09-06 18:31:23 +00:00
2022-12-12 04:59:35 +00:00
<body>
<div><h1>Timestamp of the latest message seen in store</h1></div>
<div id="timestamp"></div>
2022-09-06 18:31:23 +00:00
2022-12-12 04:59:35 +00:00
<script type="module">
import {
defaultLibp2p,
defaultPeerDiscovery,
2022-12-16 04:02:23 +00:00
} from "https://unpkg.com/@waku/create@0.0.5/bundle/index.js";
2022-12-12 04:59:35 +00:00
import {
wakuStore,
WakuNode,
2022-12-16 04:02:23 +00:00
waitForRemotePeer,
createDecoder,
} from "https://unpkg.com/@waku/core@0.0.7/bundle/index.js";
2022-09-06 18:31:23 +00:00
2022-12-12 04:59:35 +00:00
/**
* 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");
2022-09-06 18:31:23 +00:00
2022-12-12 04:59:35 +00:00
timestampDiv.innerHTML = "<p>Creating waku.</p>";
2022-11-20 01:31:52 +00:00
2022-12-12 04:59:35 +00:00
const libp2p = await defaultLibp2p(undefined, {
peerDiscovery: [defaultPeerDiscovery()],
});
const store = wakuStore();
const node = new WakuNode({}, libp2p, store);
2022-09-06 18:31:23 +00:00
2022-12-12 04:59:35 +00:00
timestampDiv.innerHTML = "<p>Starting waku.</p>";
await node.start();
2022-09-06 18:31:23 +00:00
2022-12-12 04:59:35 +00:00
timestampDiv.innerHTML = "<p>Connecting to a peer.</p>";
await waitForRemotePeer(node, ["store"]);
2022-09-06 18:31:23 +00:00
2022-12-12 04:59:35 +00:00
timestampDiv.innerHTML = "<p>Retrieving messages.</p>";
const callback = (wakuMessage) => {
2022-09-20 00:27:05 +00:00
// When `backward` direction is passed, first message is the most recent
timestampDiv.innerHTML = wakuMessage.timestamp;
2022-09-06 18:31:23 +00:00
2022-09-20 00:27:05 +00:00
// When returning true, `queryHistory` stops retrieving pages
// In our case, we only want one message, hence one page.
return true;
2022-12-12 04:59:35 +00:00
};
2022-09-06 18:31:23 +00:00
2022-12-12 04:59:35 +00:00
await node.store.queryOrderedCallback(
2022-12-16 04:02:23 +00:00
[createDecoder("/relay-ping/1/ping/null")],
2022-12-12 04:59:35 +00:00
callback,
{ pageDirection: "backward" }
);
</script>
</body>
2022-09-06 18:31:23 +00:00
</html>