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

77 lines
2.3 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>
</head>
<body>
<div><h1>Timestamp of the latest message seen in store</h1></div>
<div id='timestamp'></div>
<script type='module'>
import {
Protocols
} from 'https://unpkg.com/js-waku@0.28.1/bundle/index.js';
import {
createWaku
} from 'https://unpkg.com/js-waku@0.28.1/bundle/lib/create_waku.js'
import {
waitForRemotePeer
} from 'https://unpkg.com/js-waku@0.28.1/bundle/lib/wait_for_remote_peer.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 node = await createWaku({defaultBootstrap: true});
timestampDiv.innerHTML = '<p>Starting waku.</p>';
await node.start();
timestampDiv.innerHTML = '<p>Connecting to a peer.</p>';
await waitForRemotePeer(node, [Protocols.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;
};
const startTime = new Date();
// Only retrieve a week of messages
startTime.setTime(Date.now() - 7 * 24 * 60 * 60 * 1000);
try {
await node.store
.queryOrderedCallback([],
callback,
{
pageDirection: 'backward',
pageSize: 1,
timeFilter: {
startTime,
endTime: new Date()
}
});
} catch (e) {
// Known issue: https://github.com/status-im/nwaku/issues/1157
console.log(e)
}
</script>
</body>
</html>