waku-org
/
js-waku
mirror of https://github.com/waku-org/js-waku.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add Pure JS example

This commit is contained in:
Franck Royer 2021-10-12 14:13:54 +11:00
parent 6823b98fc0
commit 0d86c91720
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
3 changed files with 96 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
examples/examples.md
View File

@ -6,3 +6,4 @@ Here is the list of the code examples and the features they demonstrate:
- [Ethereum Private Message Web App](eth-pm): Private Messaging, React/TypeScript, Light Push, Signature with Web3, Asymmetric Encryption.
- [Minimal ReactJS Chat App](min-react-js-chat): Group chat, React/JavaScript, Relay, Protobuf using `protons`.
- [Minimal ReactJS Waku Store App](store-reactjs-chat): Waku Store, React/JavaScript, Protobuf using `protons`.
- [Pure Javascript Using Minified Library](unpkg-js-store): Stop retrieving results from Waku Store on condition, Use minified bundle from Unpkg.com, JavaScript.

11
examples/unpkg-js-store/README.md Normal file
View File

@ -0,0 +1,11 @@
# Pure Javascript Using Minified Library
**Demonstrates**:
- Waku Store: Using a condition to stop retrieving results from Waku Store.
- Pure Javascript/HTML.
- Use minified bundle of js from unpkg (todo), no import, no package manager.
This example uses Waku Store to retrieve the latest ping relay message (used for keep alive purposes) and displays its timestamp.
To test the example, simply download the `index.html` file from this folder and open it in a browser.

84
examples/unpkg-js-store/index.html Normal file
View File

@ -0,0 +1,84 @@
<!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>
<script
src='https://unpkg.com/js-waku@0.14.0-rc.0/build/umd/js-waku.min.bundle.js'></script>
<script>
/**
* This example demonstrates how to use the js-waku minified bundle
* available on unpkg.com.
*
* It is a simple scripts that uses Waku Store to retrieve ping relay messages
* and displays the timestamp of the most recent ping relay message.
*
* More explanations are provided in this guide (TODO).
*/
const timestampDiv = document.getElementById('timestamp');
try {
timestampDiv.innerHTML = '<p>Starting waku.</p>';
jswaku.Waku.create({ bootstrap: true }).catch(e => {
timestampDiv.innerHTML = 'Failed to create Waku: ' + e.toString();
}
).then(waku => {
timestampDiv.innerHTML = '<p>Connecting to a peer.</p>';
waku.waitForConnectedPeer()
.catch((e) => {
timestampDiv.innerHTML = 'Failed to connect to peers' + e.toString();
})
.then(() => {
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>';
}
// 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);
waku.store
.queryHistory(['/relay-ping/1/ping/null'], {
callback,
pageDirection: 'backward',
pageSize: 1,
timeFilter: {
startTime,
endTime: new Date()
}
})
.catch((e) => {
timestampDiv.innerHTML = 'Failed to retrieve messages' + e.toString();
});
});
});
} catch (e) {
timestampDiv.innerHTML = 'Failed to start application' + e.toString();
}
</script>
</body>
</html>