2021-10-12 03:13:54 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang='en'>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset='UTF-8' />
|
|
|
|
|
<meta content='width=device-width, initial-scale=1.0' name='viewport' />
|
|
|
|
|
<title>JS-Waku unpkg example</title>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div><h1>Timestamp of latest relay ping</h1></div>
|
|
|
|
|
<div id='timestamp'></div>
|
|
|
|
|
|
2022-07-27 02:36:39 +00:00
|
|
|
<script type='module'>
|
|
|
|
|
import {
|
|
|
|
|
createWaku,
|
|
|
|
|
waitForRemotePeer,
|
|
|
|
|
Protocols
|
|
|
|
|
} from '../../dist/bundle.min.js';
|
|
|
|
|
|
2021-10-12 03:13:54 +00:00
|
|
|
/**
|
|
|
|
|
* This example demonstrates how to use the js-waku minified bundle
|
|
|
|
|
* available on unpkg.com.
|
|
|
|
|
*
|
2022-02-11 05:46:41 +00:00
|
|
|
* It is a simple script that uses Waku Store to retrieve ping relay messages
|
2021-10-12 03:13:54 +00:00
|
|
|
* and displays the timestamp of the most recent ping relay message.
|
|
|
|
|
*/
|
|
|
|
|
const timestampDiv = document.getElementById('timestamp');
|
|
|
|
|
|
|
|
|
|
try {
|
2022-07-27 02:36:39 +00:00
|
|
|
timestampDiv.innerHTML = '<p>Creating waku.</p>';
|
|
|
|
|
const node = await createWaku({ bootstrap: { default: true } });
|
|
|
|
|
|
2021-10-12 03:13:54 +00:00
|
|
|
timestampDiv.innerHTML = '<p>Starting waku.</p>';
|
2022-07-27 02:36:39 +00:00
|
|
|
await node.start();
|
2021-10-12 03:13:54 +00:00
|
|
|
|
2022-07-27 02:36:39 +00:00
|
|
|
timestampDiv.innerHTML = '<p>Connecting to a peer.</p>';
|
|
|
|
|
await waitForRemotePeer(node, [Protocols.Store]);
|
|
|
|
|
|
|
|
|
|
timestampDiv.innerHTML = '<p>Retrieving messages.</p>';
|
|
|
|
|
const callback = (wakuMessages) => {
|
|
|
|
|
// Messages are ordered with oldest first
|
|
|
|
|
// even with page direction `backward`
|
|
|
|
|
const latestFirst = wakuMessages.reverse();
|
|
|
|
|
const latestMessage = latestFirst[0];
|
|
|
|
|
if (latestMessage) {
|
|
|
|
|
timestampDiv.innerHTML = latestMessage.timestamp;
|
|
|
|
|
} else {
|
|
|
|
|
timestampDiv.innerHTML = '<p>No ping message available</p>';
|
|
|
|
|
}
|
2021-10-12 03:13:54 +00:00
|
|
|
|
2022-07-27 02:36:39 +00:00
|
|
|
// When returning true, `queryHistory` stops retrieving pages
|
|
|
|
|
// In our case, we only want one message, hence one page.
|
|
|
|
|
return true;
|
|
|
|
|
};
|
2021-10-12 03:13:54 +00:00
|
|
|
|
2022-07-27 02:36:39 +00:00
|
|
|
const startTime = new Date();
|
|
|
|
|
// Only retrieve a week of messages
|
|
|
|
|
startTime.setTime(Date.now() - 7 * 24 * 60 * 60 * 1000);
|
2021-10-12 03:13:54 +00:00
|
|
|
|
2022-07-27 02:36:39 +00:00
|
|
|
await node.store
|
|
|
|
|
.queryHistory(['/relay-ping/1/ping/null'], {
|
|
|
|
|
callback,
|
|
|
|
|
pageDirection: 'backward',
|
|
|
|
|
pageSize: 1,
|
|
|
|
|
timeFilter: {
|
|
|
|
|
startTime,
|
|
|
|
|
endTime: new Date()
|
|
|
|
|
}
|
|
|
|
|
});
|
2021-10-12 03:13:54 +00:00
|
|
|
} catch (e) {
|
2022-07-27 02:36:39 +00:00
|
|
|
timestampDiv.innerHTML = 'Error encountered: ' + e.toString();
|
2021-10-12 03:13:54 +00:00
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
