status-im
/
js-waku
mirror of https://github.com/status-im/js-waku.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #313 from status-im/unpkg-example

This commit is contained in:
Franck Royer 2021-10-13 10:19:21 +11:00 committed by GitHub
parent 6823b98fc0 137c1dfcc0
commit 0db30efc5b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 130 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.cspell.json
View File

@ -40,6 +40,7 @@
"ipfs", "ipfs",
"iwant", "iwant",
"jdev", "jdev",
"jswaku",
"keccak", "keccak",
"lastpub", "lastpub",
"libauth", "libauth",

35
README.md
View File

@ -32,11 +32,42 @@ Install `js-waku` package:
npm install js-waku 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 ### Start a waku node
```ts ```ts
import { Waku } from 'js-waku';
const waku = await Waku.create({ bootstrap: true }); const waku = await Waku.create({ bootstrap: true });
``` ```

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. - [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 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`. - [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.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.

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>