mirror of https://github.com/waku-org/js-waku.git
Merge pull request #313 from status-im/unpkg-example
This commit is contained in:
Franck Royer
GitHub
commit
0db30efc5b
|
|
@ -40,6 +40,7 @@
|
|||
"ipfs",
|
||||
"iwant",
|
||||
"jdev",
|
||||
"jswaku",
|
||||
"keccak",
|
||||
"lastpub",
|
||||
"libauth",
|
||||
|
|
|
|||
35
README.md
35
README.md
|
|
@ -32,11 +32,42 @@ Install `js-waku` package:
|
|||
npm install js-waku
|
||||
```
|
||||
|
||||
### Import js-waku
|
||||
|
||||
To use js-waku in your application, you can:
|
||||
|
||||
use `import`:
|
||||
|
||||
```js
|
||||
import { Waku } from 'js-waku';
|
||||
|
||||
const waku = await Waku.create();
|
||||
```
|
||||
|
||||
use `require`:
|
||||
|
||||
```js
|
||||
const jsWaku = require('js-waku');
|
||||
|
||||
jsWaku.Waku.create().then(waku => {
|
||||
// ...
|
||||
});
|
||||
```
|
||||
|
||||
Or directly import it in a `<script>` tag:
|
||||
|
||||
```html
|
||||
<script src='https://unpkg.com/js-waku@0.14.0-rc.0/build/umd/js-waku.min.bundle.js'></script>
|
||||
<script>
|
||||
jswaku.Waku.create().then(waku => {
|
||||
// ...
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Start a waku node
|
||||
|
||||
```ts
|
||||
import { Waku } from 'js-waku';
|
||||
|
||||
const waku = await Waku.create({ bootstrap: true });
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.com, 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.
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue