improve js waku (#96)
* add js-waku feedback * implement more feedback * update presentations
This commit is contained in:
LordGhostX
GitHub
parent
d1f053598a
commit
677718fd12
|
|
@ -50,6 +50,9 @@
|
|||
"reactjs",
|
||||
"XMTP",
|
||||
"permissioned",
|
||||
"Václav",
|
||||
"Pavlín",
|
||||
"Revuelta",
|
||||
],
|
||||
"flagWords": [],
|
||||
"ignorePaths": [
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
title: JavaScript Waku SDK
|
||||
---
|
||||
|
||||
The [JavaScript Waku SDK](https://github.com/waku-org/js-waku) (`js-waku`) provides a TypeScript implementation of the [Waku protocol](/) designed for web browser environments. Developers can seamlessly integrate Waku functionalities into web applications, enabling efficient communication and collaboration among users using the `js-waku` SDK.
|
||||
The [JavaScript Waku SDK](https://github.com/waku-org/js-waku) (`@waku/sdk`) provides a TypeScript implementation of the [Waku protocol](/) designed for web browser environments. Developers can seamlessly integrate Waku functionalities into web applications, enabling efficient communication and collaboration among users using the `@waku/sdk` package.
|
||||
|
||||
## Installation
|
||||
|
||||
Install the `js-waku` SDK using your preferred package manager:
|
||||
Install the `@waku/sdk` package using your preferred package manager:
|
||||
|
||||
```mdx-code-block
|
||||
import Tabs from '@theme/Tabs';
|
||||
|
|
@ -30,26 +30,64 @@ yarn add @waku/sdk
|
|||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
You can also use the `js-waku` SDK via a CDN without installing it on your system:
|
||||
You can also use the `@waku/sdk` package via a CDN without installing it on your system:
|
||||
|
||||
```js
|
||||
import * as waku from "https://unpkg.com/@waku/sdk@latest/bundle/index.js";
|
||||
```
|
||||
|
||||
## Message Structure
|
||||
|
||||
We recommend creating a message structure for your application using [Protocol Buffers](https://protobuf.dev/) for the following reasons:
|
||||
|
||||
1. **Consistency:** Ensures uniform message format for easy parsing and processing.
|
||||
2. **Interoperability:** Facilitates effective communication between different parts of your application.
|
||||
3. **Compatibility:** Allows smooth communication between older and newer app versions.
|
||||
|
||||
To get started, install the `protobufjs` package using your preferred package manager:
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="npm" label="npm">
|
||||
|
||||
```shell
|
||||
npm install protobufjs
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="yarn" label="Yarn">
|
||||
|
||||
```shell
|
||||
yarn add protobufjs
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
You can also use the `protobufjs` package via a CDN without installing it on your system:
|
||||
|
||||
```js
|
||||
// Import the CDN
|
||||
import "https://cdn.jsdelivr.net/npm/protobufjs@latest/dist/protobuf.min.js";
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- Or include the protobufjs script -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/protobufjs@latest/dist/protobuf.min.js"></script>
|
||||
```
|
||||
|
||||
## Getting Started
|
||||
|
||||
Check out the quick start guide and comprehensive tutorials to learn how to build applications using `js-waku`:
|
||||
Check out the quick start guide and comprehensive tutorials to learn how to build applications using `@waku/sdk`:
|
||||
|
||||
| Guide | Description |
|
||||
| - | - |
|
||||
| [Quick Start](/guides/js-waku/quick-start) | Quickly familiarize yourself with `js-waku` by setting up a Waku node and sending messages using the [Light Push](/overview/concepts/protocols#light-push) protocol |
|
||||
| [Send and Receive Messages Using Light Push and Filter](/guides/js-waku/light-send-receive) | Learn how to send and receive messages on light nodes using the [Light Push](/overview/concepts/protocols#light-push) and [Filter](/overview/concepts/protocols#filter) protocols |
|
||||
| [Retrieve Messages Using Store](/guides/js-waku/store-retrieve-messages) | Learn how to retrieve and filter historical messages on light nodes using the [Store](/overview/concepts/protocols#store) protocol |
|
||||
| [Build React DApps Using @waku/react](/guides/js-waku/use-waku-react) | Learn how to use the [@waku/react](https://www.npmjs.com/package/@waku/react) package seamlessly integrate `js-waku` into a React application |
|
||||
| [Bootstrap DApps Using @waku/create-app](/guides/js-waku/use-waku-create-app) | Learn how to use the [@waku/create-app](https://www.npmjs.com/package/@waku/create-app) package to bootstrap your next `js-waku` project from various example templates |
|
||||
| [Build React DApps Using @waku/react](/guides/js-waku/use-waku-react) | Learn how to use the [@waku/react](https://www.npmjs.com/package/@waku/react) package seamlessly integrate `@waku/sdk` into a React application |
|
||||
| [Bootstrap DApps Using @waku/create-app](/guides/js-waku/use-waku-create-app) | Learn how to use the [@waku/create-app](https://www.npmjs.com/package/@waku/create-app) package to bootstrap your next `@waku/sdk` project from various example templates |
|
||||
|
||||
## Get Help and Report Issues
|
||||
|
||||
To engage in general discussions, seek assistance, or stay updated with the latest news, visit the `#support` and `#js-waku-contribute` channels on the [Waku Discord](https://discord.waku.org).
|
||||
|
||||
If you discover bugs or want to suggest new features, do not hesitate to [open an issue](https://github.com/waku-org/js-waku/issues/new/) in the [js-waku repository](https://github.com/waku-org/js-waku). Your feedback and contributions are highly valued and will help improve the `js-waku` SDK.
|
||||
If you discover bugs or want to suggest new features, do not hesitate to [open an issue](https://github.com/waku-org/js-waku/issues/new/) in the [js-waku repository](https://github.com/waku-org/js-waku). Your feedback and contributions are highly valued and will help improve the `@waku/sdk` package.
|
||||
|
|
@ -2,30 +2,56 @@
|
|||
title: Send and Receive Messages Using Light Push and Filter
|
||||
---
|
||||
|
||||
This guide provides detailed steps to create a light node, send messages using the [Light Push protocol](/overview/concepts/protocols#light-push), and receive messages using the [Filter protocol](/overview/concepts/protocols#filter).
|
||||
This guide provides detailed steps to start using the `@waku/sdk` package by setting up a Light Node to send messages using the [Light Push protocol](/overview/concepts/protocols#light-push), and receive messages using the [Filter protocol](/overview/concepts/protocols#filter). Check out the [installation guide](/guides/js-waku/#installation) for steps on adding `@waku/sdk` to your project.
|
||||
|
||||
## Create a Light Node
|
||||
|
||||
Set up a Waku node by creating a light node, connecting to network peers with `Light Push` and `Filter` enabled, choosing a [content topic](/overview/concepts/content-topics), and creating an `encoder` and `decoder` for [message encryption](https://rfc.vac.dev/spec/26/):
|
||||
Use the `createLightNode()` function to create a `Light Node` and interact with the Waku Network:
|
||||
|
||||
```js
|
||||
import {
|
||||
createLightNode,
|
||||
waitForRemotePeer,
|
||||
Protocols,
|
||||
createEncoder,
|
||||
createDecoder,
|
||||
} from "@waku/sdk";
|
||||
import { createLightNode } from "@waku/sdk";
|
||||
|
||||
// Create and start a light node
|
||||
// Create and start a Light Node
|
||||
const node = await createLightNode({ defaultBootstrap: true });
|
||||
await node.start();
|
||||
|
||||
// Use the stop() function to stop a running node
|
||||
// await node.stop();
|
||||
```
|
||||
|
||||
:::info
|
||||
When the `defaultBootstrap` flag is set to `true`, your node will be bootstrapped using [DNS Discovery](/overview/concepts/dns-discovery). The node does not connect to any remote peer or bootstrap node if omitted.
|
||||
:::
|
||||
|
||||
## Connect to Remote Peers
|
||||
|
||||
Use the `waitForRemotePeer()` function to wait for the node to connect with peers on the Waku Network:
|
||||
|
||||
```js
|
||||
import { waitForRemotePeer } from "@waku/sdk";
|
||||
|
||||
// Wait for a successful peer connection
|
||||
await waitForRemotePeer(node);
|
||||
```
|
||||
|
||||
The `protocols` option allows you to specify the [protocols](/overview/concepts/protocols) that the remote peers should have enabled:
|
||||
|
||||
```js
|
||||
import { waitForRemotePeer, Protocols } from "@waku/sdk";
|
||||
|
||||
// Wait for peer connections with specific protocols
|
||||
await waitForRemotePeer(node, [
|
||||
Protocols.LightPush,
|
||||
Protocols.Filter,
|
||||
Protocols.LightPush,
|
||||
Protocols.Filter,
|
||||
]);
|
||||
```
|
||||
|
||||
## Choose a Content Topic
|
||||
|
||||
[Choose a content topic](/overview/concepts/content-topics) for your application and create a message `encoder` and `decoder`:
|
||||
|
||||
```js
|
||||
import { createEncoder, createDecoder } from "@waku/sdk";
|
||||
|
||||
// Choose a content topic
|
||||
const contentTopic = "/light-guide/1/message/proto";
|
||||
|
|
@ -35,6 +61,19 @@ const encoder = createEncoder({ contentTopic });
|
|||
const decoder = createDecoder(contentTopic);
|
||||
```
|
||||
|
||||
The `ephemeral` option allows you to specify whether your messages should be persisted by [Store peers](/guides/js-waku/store-retrieve-messages):
|
||||
|
||||
```js
|
||||
const encoder = createEncoder({
|
||||
contentTopic: contentTopic, // message content topic
|
||||
ephemeral: true, // allows messages to be stored or not
|
||||
});
|
||||
```
|
||||
|
||||
:::info
|
||||
In this example, users send and receive messages on a shared content topic. However, real applications may have users broadcasting messages while others listen or only have 1:1 exchanges. Waku supports all these use cases.
|
||||
:::
|
||||
|
||||
## Create a Message Structure
|
||||
|
||||
Create your application's message structure using [Protobuf's valid message](https://github.com/protobufjs/protobuf.js#usage) fields:
|
||||
|
|
@ -50,7 +89,7 @@ const ChatMessage = new protobuf.Type("ChatMessage")
|
|||
```
|
||||
|
||||
:::info
|
||||
Check out the [Protobuf installation](/guides/js-waku/quick-start#create-a-message-structure) guide for adding the `protobufjs` package to your project.
|
||||
Check out the [Protobuf installation](/guides/js-waku/#message-structure) guide for adding the `protobufjs` package to your project.
|
||||
:::
|
||||
|
||||
## Send Messages Using Light Push
|
||||
|
|
@ -76,7 +115,7 @@ await node.lightPush.send(encoder, {
|
|||
|
||||
## Receive Messages Using Filter
|
||||
|
||||
To receive messages using the `Filter` protocol, create a callback function to process the messages and use the `filter.subscribe()` function:
|
||||
To receive messages using the `Filter` protocol, create a callback function for message processing, then use the `filter.subscribe()` function to subscribe to a `content topic`:
|
||||
|
||||
```js
|
||||
// Create the callback function
|
||||
|
|
|
|||
|
|
@ -1,151 +0,0 @@
|
|||
---
|
||||
title: Quick Start
|
||||
---
|
||||
|
||||
This guide provides quick steps to start using the `js-waku` SDK by setting up a Waku node and sending messages using the [Light Push protocol](/overview/concepts/protocols#light-push). Check out the [installation guide](/guides/js-waku/#installation) for steps on adding `js-waku` to your project.
|
||||
|
||||
## Create a Light Node
|
||||
|
||||
Use the `createLightNode()` function to create a `Light Node` and interact with the Waku Network:
|
||||
|
||||
```js
|
||||
import { createLightNode } from "@waku/sdk";
|
||||
|
||||
// Create and start a Light Node
|
||||
const node = await createLightNode({ defaultBootstrap: true });
|
||||
await node.start();
|
||||
|
||||
// Use the stop() function to stop a running node
|
||||
// await node.stop();
|
||||
```
|
||||
|
||||
:::info
|
||||
When the `defaultBootstrap` flag is set to `true`, your node will be bootstrapped using [pre-defined Waku nodes](/overview/concepts/static-peers). The node does not connect to any remote peer or bootstrap node if omitted.
|
||||
:::
|
||||
|
||||
## Connect to Remote Peers
|
||||
|
||||
Use the `waitForRemotePeer()` function to wait for the node to connect with peers on the Waku Network:
|
||||
|
||||
```js
|
||||
import { waitForRemotePeer } from "@waku/sdk";
|
||||
|
||||
// Wait for a successful peer connection
|
||||
await waitForRemotePeer(node);
|
||||
```
|
||||
|
||||
The `protocols` option allows you to specify the [protocols](/overview/concepts/protocols) that the remote peers should have enabled:
|
||||
|
||||
```js
|
||||
import { waitForRemotePeer, Protocols } from "@waku/sdk";
|
||||
|
||||
// Wait for peer connections with specific protocols
|
||||
await waitForRemotePeer(node, [
|
||||
Protocols.Relay,
|
||||
Protocols.Store,
|
||||
Protocols.LightPush,
|
||||
Protocols.Filter,
|
||||
]);
|
||||
```
|
||||
|
||||
## Choose a Content Topic
|
||||
|
||||
[Choose a content topic](/overview/concepts/content-topics) for your application and create an `encoder` for [message encryption](https://rfc.vac.dev/spec/26/):
|
||||
|
||||
```js
|
||||
import { createEncoder } from "@waku/sdk";
|
||||
|
||||
// Choose a content topic
|
||||
const contentTopic = "/quick-start/1/message/proto";
|
||||
|
||||
// Create a message encoder without encryption
|
||||
const encoder = createEncoder({
|
||||
contentTopic: contentTopic, // message content topic
|
||||
ephemeral: false, // allows messages to be stored or not
|
||||
});
|
||||
```
|
||||
|
||||
:::info
|
||||
When the `ephemeral` flag is set to `true`, your messages will not be stored by `Store` nodes.
|
||||
:::
|
||||
|
||||
## Create a Message Structure
|
||||
|
||||
Create a message structure for your application using [Protocol Buffers](https://protobuf.dev/) (`proto`) for the following reasons:
|
||||
|
||||
1. **Consistency:** Ensures uniform message format for easy parsing and processing.
|
||||
2. **Interoperability:** Facilitates effective communication between different parts of your application.
|
||||
3. **Compatibility:** Allows smooth communication between older and newer app versions.
|
||||
|
||||
To get started, install the `protobufjs` package using your preferred package manager:
|
||||
|
||||
```mdx-code-block
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
```
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="npm" label="npm">
|
||||
|
||||
```shell
|
||||
npm install protobufjs
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="yarn" label="Yarn">
|
||||
|
||||
```shell
|
||||
yarn add protobufjs
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
You can also use the `protobufjs` package via a CDN without installing it on your system:
|
||||
|
||||
```js
|
||||
// Import the CDN
|
||||
import "https://cdn.jsdelivr.net/npm/protobufjs@latest/dist/protobuf.min.js";
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- Or include the protobufjs script -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/protobufjs@latest/dist/protobuf.min.js"></script>
|
||||
```
|
||||
|
||||
Next, create the message structure using [Protobuf's valid message](https://github.com/protobufjs/protobuf.js#usage) fields:
|
||||
|
||||
```js
|
||||
import protobuf from "protobufjs";
|
||||
|
||||
// Create a message structure using Protobuf
|
||||
const ChatMessage = new protobuf.Type("ChatMessage")
|
||||
.add(new protobuf.Field("timestamp", 1, "uint64"))
|
||||
.add(new protobuf.Field("sender", 2, "string"))
|
||||
.add(new protobuf.Field("message", 3, "string"));
|
||||
```
|
||||
|
||||
## Send Messages Using Light Push
|
||||
|
||||
To send messages using the `Light Push` protocol, create a new message object and use the `lightPush.send()` function:
|
||||
|
||||
```js
|
||||
// Create a new message object
|
||||
const protoMessage = ChatMessage.create({
|
||||
timestamp: Date.now(),
|
||||
sender: "Alice",
|
||||
message: "Hello, World!",
|
||||
});
|
||||
|
||||
// Serialize the message using Protobuf
|
||||
const serializedMessage = ChatMessage.encode(protoMessage).finish();
|
||||
|
||||
// Send the message using Light Push
|
||||
await node.lightPush.send(encoder, {
|
||||
payload: serializedMessage,
|
||||
});
|
||||
```
|
||||
|
||||
:::tip Congratulations!
|
||||
You have successfully added decentralized communication features to your project using `js-waku`. To run your application smoothly, you can wrap these functions in JavaScript, React, or any other framework.
|
||||
:::
|
||||
|
|
@ -29,7 +29,7 @@ await waitForRemotePeer(node, [Protocols.Store]);
|
|||
|
||||
## Choose a Content Topic
|
||||
|
||||
[Choose a content topic](/overview/concepts/content-topics) for filtering the messages to retrieve and create a `decoder` for [message decryption](https://rfc.vac.dev/spec/26/):
|
||||
[Choose a content topic](/overview/concepts/content-topics) for filtering the messages to retrieve and create a message `decoder`:
|
||||
|
||||
```js
|
||||
import { createDecoder } from "@waku/sdk";
|
||||
|
|
@ -43,7 +43,7 @@ const decoder = createDecoder(contentTopic);
|
|||
|
||||
## Retrieve Messages
|
||||
|
||||
`js-waku` provides the `queryOrderedCallback()` and `queryGenerator()` functions for querying `Store` nodes and retrieving historical or missed messages. The responses from `Store` nodes are paginated and require you to handle them sequentially, processing each page when received.
|
||||
`@waku/sdk` provides the `queryOrderedCallback()` and `queryGenerator()` functions for querying `Store` nodes and retrieving historical or missed messages. The responses from `Store` nodes are paginated and require you to process each page sequentially.
|
||||
|
||||
### `queryOrderedCallback`
|
||||
|
||||
|
|
@ -60,17 +60,17 @@ const callback = (wakuMessage) => {
|
|||
console.log(wakuMessage);
|
||||
};
|
||||
|
||||
// Set the query options
|
||||
const queryOptions = {};
|
||||
|
||||
// Query the Store peer
|
||||
await node.store.queryOrderedCallback(
|
||||
[decoder],
|
||||
callback,
|
||||
queryOptions,
|
||||
);
|
||||
```
|
||||
|
||||
:::info
|
||||
The `queryOrderedCallback()` function always returns the most recent messages in a page first.
|
||||
:::
|
||||
|
||||
### `queryGenerator`
|
||||
|
||||
The `store.queryGenerator()` function provides more control and flexibility over processing messages retrieved from `Store` nodes through [Async Generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncGenerator). It accepts these parameters:
|
||||
|
|
@ -79,24 +79,26 @@ The `store.queryGenerator()` function provides more control and flexibility over
|
|||
- `options` (optional): [Query options](/guides/js-waku/store-retrieve-messages#store-query-options) to filter the retrieved messages.
|
||||
|
||||
```js
|
||||
// Set the query options
|
||||
const queryOptions = {};
|
||||
|
||||
// Create the store query
|
||||
const storeQuery = node.store.queryGenerator(
|
||||
[decoder],
|
||||
queryOptions,
|
||||
);
|
||||
const storeQuery = node.store.queryGenerator([decoder]);
|
||||
|
||||
// Process the messages
|
||||
for await (const messagesPromises of storeQuery) {
|
||||
// Fulfill all the messages promises
|
||||
const messages = await Promise.all(messagesPromises);
|
||||
// Render the message/payload in your application
|
||||
console.log(messages);
|
||||
// Fulfill the messages promises
|
||||
const messages = await Promise.all(messagesPromises
|
||||
.map(async (p) => {
|
||||
const msg = await p;
|
||||
// Render the message/payload in your application
|
||||
console.log(msg);
|
||||
})
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
:::info
|
||||
The `queryGenerator()` function always returns the oldest messages in a page first.
|
||||
:::
|
||||
|
||||
## Store Query Options
|
||||
|
||||
### `pageDirection`
|
||||
|
|
@ -118,35 +120,12 @@ const queryOptions = {
|
|||
const queryOptions = {
|
||||
pageDirection: PageDirection.FORWARD,
|
||||
};
|
||||
|
||||
// Query the Store peer with options
|
||||
await node.store.queryOrderedCallback([decoder], callback, options);
|
||||
const storeQuery = node.store.queryGenerator([decoder, options]);
|
||||
```
|
||||
|
||||
:::info
|
||||
The `pageDirection` option does not affect the ordering of messages within the page, as the oldest message always returns first.
|
||||
:::
|
||||
|
||||
### `timeFilter`
|
||||
|
||||
The `timeFilter` option specifies a time frame to retrieve messages from. For example, consider a query that retrieves messages from the previous week:
|
||||
|
||||
```js
|
||||
// Get the time frame
|
||||
const endTime = new Date();
|
||||
const startTime = new Date();
|
||||
startTime.setDate(endTime.getDate() - 7);
|
||||
|
||||
// Retrieve a week of messages
|
||||
const queryOptions = {
|
||||
timeFilter: {
|
||||
startTime,
|
||||
endTime,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
:::info
|
||||
If you omit the `timeFilter` option, the query will start from the beginning or end of the history, depending on the [page direction](#pagedirection).
|
||||
:::
|
||||
|
||||
### `cursor`
|
||||
|
||||
The `cursor` option specifies the starting index for retrieving messages. For example, consider a query that retrieves the first page messages and then continues with the next page:
|
||||
|
|
@ -158,9 +137,13 @@ import { waku } from "@waku/sdk";
|
|||
const messages = [];
|
||||
const callback = (wakuMessage) => {
|
||||
messages.push(wakuMessage);
|
||||
// Return "true" to stop retrieving pages
|
||||
// Here, it retrieves only the first page
|
||||
return true;
|
||||
};
|
||||
|
||||
// Retrieve the first page of messages
|
||||
// This retrieves all the messages if "return true" is not present
|
||||
await node.store.queryOrderedCallback(
|
||||
[decoder],
|
||||
callback,
|
||||
|
|
@ -186,16 +169,33 @@ console.log(messages);
|
|||
If you omit the `cursor` option, the query will start from the beginning or end of the history, depending on the [page direction](#pagedirection).
|
||||
:::
|
||||
|
||||
### `peerId`
|
||||
### `timeFilter`
|
||||
|
||||
The `peerId` option specifies the peer to query. A pseudo-random peer is selected from the connected `Store` peers if omitted.
|
||||
The `timeFilter` option specifies a time frame to retrieve messages from. For example, consider a query that retrieves messages from the previous week:
|
||||
|
||||
```js
|
||||
// Get the time frame
|
||||
const endTime = new Date();
|
||||
const startTime = new Date();
|
||||
startTime.setDate(endTime.getDate() - 7);
|
||||
|
||||
// Retrieve a week of messages
|
||||
const queryOptions = {
|
||||
peerId: "[WAKU STORE PEER ID]",
|
||||
timeFilter: {
|
||||
startTime,
|
||||
endTime,
|
||||
},
|
||||
};
|
||||
|
||||
// Query the Store peer with options
|
||||
await node.store.queryOrderedCallback([decoder], callback, options);
|
||||
const storeQuery = node.store.queryGenerator([decoder, options]);
|
||||
```
|
||||
|
||||
:::info
|
||||
The `timeFilter` option significantly reduces message retrieval performance. To optimize it, consider resuming message retrieval using a [cursor](#cursor) that starts from the last seen message.
|
||||
:::
|
||||
|
||||
:::tip Congratulations!
|
||||
You have successfully retrieved and filtered historical messages on a Light Node using the `Store` protocol. Check out the [store-js](https://github.com/waku-org/js-waku-examples/tree/master/examples/store-js) and [store-reactjs-chat](https://github.com/waku-org/js-waku-examples/tree/master/examples/store-reactjs-chat) examples for working demos.
|
||||
:::
|
||||
|
|
@ -2,11 +2,11 @@
|
|||
title: "Bootstrap DApps Using @waku/create-app"
|
||||
---
|
||||
|
||||
This guide provides detailed steps to bootstrap your next `js-waku` project from [various example templates](https://github.com/waku-org/js-waku-examples/tree/master/examples) using the [@waku/create-app](https://www.npmjs.com/package/@waku/create-app) package.
|
||||
This guide provides detailed steps to bootstrap your next `@waku/sdk` project from [various example templates](https://github.com/waku-org/js-waku-examples/tree/master/examples) using the [@waku/create-app](https://www.npmjs.com/package/@waku/create-app) package.
|
||||
|
||||
## Usage
|
||||
|
||||
Initialize a new `js-waku` template using any of the following methods:
|
||||
Initialize a new `@waku/sdk` template using any of the following methods:
|
||||
|
||||
```mdx-code-block
|
||||
import Tabs from '@theme/Tabs';
|
||||
|
|
@ -46,4 +46,6 @@ We welcome and appreciate the contributions of templates for the `@waku/create-a
|
|||
2. Place the template in the `examples` folder in the [js-waku-examples](https://github.com/waku-org/js-waku-examples) repository's root.
|
||||
3. Commit your changes with a detailed message and push them to your forked repository.
|
||||
4. Finally, submit a pull request to the [js-waku-examples](https://github.com/waku-org/js-waku-examples) repository.
|
||||
5. Our team will carefully review and merge your submission upon approval.
|
||||
5. Our team will carefully review and merge your submission upon approval.
|
||||
|
||||
Waku also provides bounties to encourage community members to contribute to the network and earn rewards. To participate in the bounty program, head to <https://github.com/waku-org/bounties>.
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
title: "Build React DApps Using @waku/react"
|
||||
---
|
||||
|
||||
The [@waku/react](https://www.npmjs.com/package/@waku/react) package provides components and UI adapters to integrate `js-waku` into React applications effortlessly. This guide provides detailed steps for using `@waku/react` in your project.
|
||||
The [@waku/react](https://www.npmjs.com/package/@waku/react) package provides components and UI adapters to integrate `@waku/sdk` into React applications effortlessly. This guide provides detailed steps for using `@waku/react` in your project.
|
||||
|
||||
## Install the Dependencies
|
||||
|
||||
|
|
@ -36,14 +36,14 @@ Next, install the `@waku/react` package using your preferred package manager:
|
|||
<TabItem value="npm" label="npm">
|
||||
|
||||
```shell
|
||||
npm install @waku/react
|
||||
npm install @waku/react @waku/sdk
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="yarn" label="Yarn">
|
||||
|
||||
```shell
|
||||
yarn add @waku/react
|
||||
yarn add @waku/react @waku/sdk
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
|
|
@ -120,9 +120,6 @@ function App() {
|
|||
const contentTopic = "/waku-react-guide/1/message/utf8";
|
||||
const encoder = createEncoder({ contentTopic });
|
||||
|
||||
// Wait for the node to finish loading before sending messages
|
||||
// (isLoading === false)
|
||||
|
||||
// Bind push method to a node and encoder
|
||||
const { push } = useLightPush({ node, encoder });
|
||||
|
||||
|
|
@ -134,14 +131,14 @@ function App() {
|
|||
const payload = utf8ToBytes(text);
|
||||
await push({ payload });
|
||||
};
|
||||
sendMessage("Hello, World!");
|
||||
|
||||
// Wait for the node to finish loading before sending messages
|
||||
if (!isLoading) {
|
||||
sendMessage("Hello, World!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
:::info
|
||||
Wait for the node to finish loading before sending messages (`isLoading` === `false`).
|
||||
:::
|
||||
|
||||
## Receive Messages Using Filter
|
||||
|
||||
Use the `useFilterMessages()` hook to receive messages from a [Filter subscription](/guides/js-waku/light-send-receive/#receive-messages-using-filter) and keep it updated:
|
||||
|
|
@ -174,10 +171,11 @@ function App() {
|
|||
// "isLoading" indicates whether the node is still subscribing to Filter
|
||||
|
||||
// Wait for the messages to finish loading before processing them
|
||||
// (isLoading === false)
|
||||
messages.forEach((message) => {
|
||||
console.log(bytesToUtf8(message.payload));
|
||||
});
|
||||
if (!isLoading) {
|
||||
messages.forEach((message) => {
|
||||
console.log(bytesToUtf8(message.payload));
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -209,21 +207,19 @@ function App() {
|
|||
const contentTopic = "/waku-react-guide/1/message/utf8";
|
||||
const decoder = createDecoder(contentTopic);
|
||||
|
||||
// Set the query options
|
||||
const options = {};
|
||||
|
||||
// Query the Store peer
|
||||
const { error, messages, isLoading } = useStoreMessages({ node, decoder, options });
|
||||
const { error, messages, isLoading } = useStoreMessages({ node, decoder });
|
||||
|
||||
// "error" captures any error that occurs during message retrieval
|
||||
// "messages" contains a list of messages retrieved from the Store peer
|
||||
// "isLoading" indicates whether the node is still retrieving messages
|
||||
|
||||
// Wait for the messages to finish retrieving before processing them
|
||||
// (isLoading === false)
|
||||
messages.forEach((message) => {
|
||||
console.log(bytesToUtf8(message.payload));
|
||||
});
|
||||
if (!isLoading) {
|
||||
messages.forEach((message) => {
|
||||
console.log(bytesToUtf8(message.payload));
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -232,5 +228,5 @@ To explore the available query options, check out the [Store Query Options](/gui
|
|||
:::
|
||||
|
||||
:::tip
|
||||
You have successfully integrated `js-waku` into a React application using the `@waku/react` package. Check out the [web-chat](https://github.com/waku-org/js-waku-examples/tree/master/examples/web-chat) example for a working demo.
|
||||
You have successfully integrated `@waku/sdk` into a React application using the `@waku/react` package. Check out the [web-chat](https://github.com/waku-org/js-waku-examples/tree/master/examples/web-chat) example for a working demo.
|
||||
:::
|
||||
|
|
@ -23,7 +23,7 @@ Waku is implemented in multiple SDKs, allowing it to integrate with different la
|
|||
|
||||
| | Description | Documentation |
|
||||
| - | - | - |
|
||||
| [js-waku](https://github.com/waku-org/js-waku) | JavaScript/TypeScript SDK designed for browser environments | [JavaScript Waku SDK](/guides/js-waku/) |
|
||||
| [@waku/sdk](https://github.com/waku-org/js-waku) | JavaScript/TypeScript SDK designed for browser environments | [JavaScript Waku SDK](/guides/js-waku/) |
|
||||
| [nwaku](https://github.com/waku-org/nwaku) | Nim SDK designed for integration with native Nim applications | COMING SOON |
|
||||
| [go-waku](https://github.com/waku-org/go-waku) | Golang SDK designed for integration with Golang applications, includes C bindings for usage in C/C++, C#/Unity, Swift, and Kotlin | COMING SOON |
|
||||
| [waku-rust-bindings](https://github.com/waku-org/waku-rust-bindings) | Rust wrapper using `go-waku` bindings designed for integration in Rust applications | COMING SOON |
|
||||
|
|
@ -43,6 +43,6 @@ Waku provides integrations tailored for mobile applications, enabling Waku to ru
|
|||
| | Description | Documentation |
|
||||
| - | - | - |
|
||||
| JSON-RPC API | `JSON-RPC` API interface provided by `nwaku` and `go-waku` to interact with the Waku Network | COMING SOON |
|
||||
| [@waku/react](https://www.npmjs.com/package/@waku/react) | React components and UI adapters designed for seamless integration with `js-waku` | [Build React DApps Using @waku/react](/guides/js-waku/use-waku-react) |
|
||||
| [@waku/create-app](https://www.npmjs.com/package/@waku/create-app) | Starter kit to bootstrap your next `js-waku` project from various example templates | [Bootstrap DApps Using @waku/create-app](/guides/js-waku/use-waku-create-app) |
|
||||
| [@waku/react](https://www.npmjs.com/package/@waku/react) | React components and UI adapters designed for seamless integration with `@waku/sdk` | [Build React DApps Using @waku/react](/guides/js-waku/use-waku-react) |
|
||||
| [@waku/create-app](https://www.npmjs.com/package/@waku/create-app) | Starter kit to bootstrap your next `@waku/sdk` project from various example templates | [Bootstrap DApps Using @waku/create-app](/guides/js-waku/use-waku-create-app) |
|
||||
| [nwaku-compose](https://github.com/alrevuelta/nwaku-compose) | Pre-configured Docker Compose setup for running and monitoring a `nwaku` node using Prometheus and Grafana | [Run Nwaku with Docker Compose](/guides/nwaku/run-docker-compose) |
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
title: Static Peers
|
||||
---
|
||||
|
||||
Waku applications have the flexibility to embed bootstrap node addresses directly into their codebase. Developers can either use [static peers operated by Status](https://github.com/waku-org/js-waku/blob/master/packages/core/src/lib/predefined_bootstrap_nodes.ts#L45) or [run a node](/guides/nodes-and-sdks#run-a-waku-node).
|
||||
Waku applications have the flexibility to embed bootstrap node addresses directly into their codebase. Developers can either use static peers operated by Status or [run a node](/guides/nodes-and-sdks#run-a-waku-node).
|
||||
|
||||
#### Pros
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,14 @@
|
|||
title: Watch Our Presentations
|
||||
---
|
||||
|
||||
## Waku Workshop: Running Your Own Waku Node
|
||||
|
||||
<iframe class="yt-video" src="https://www.youtube.com/embed/_qjKiy_epSE" title="Waku Workshop: Running Your Own Waku Node by Václav Pavlín" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
|
||||
## Waku Workshop: Getting Started with Waku
|
||||
|
||||
<iframe class="yt-video" src="https://www.youtube.com/embed/dMxs5GcbgG4" title="Waku Workshop: Getting Started with Waku by Alvaro Revuelta" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
|
||||
## Hashing it Out: Decentralized Messaging
|
||||
|
||||
<iframe class="yt-video" src="https://www.youtube.com/embed/vmx_oOb2On0" title="Hashing it Out: Decentralized Messaging by Franck Royer" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
|
|
@ -20,7 +28,7 @@ title: Watch Our Presentations
|
|||
|
||||
## Secureum TrustX - Waku: Enabling a New Dimension for dApps
|
||||
|
||||
<iframe class="yt-video" src="https://www.youtube.com/embed/GXU5Fd6gMVw" title="Secureum TrustX - Waku: Enabling a New Dimension for dApps by Corey Petty" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
<iframe class="yt-video" src="https://www.youtube.com/embed/GXU5Fd6gMVw?start=21700" title="Secureum TrustX - Waku: Enabling a New Dimension for dApps by Corey Petty" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
|
||||
## Waku: Enabling a New Dimension for dApps
|
||||
|
||||
|
|
|
|||
|
|
@ -71,7 +71,6 @@ const sidebars = {
|
|||
id: "guides/js-waku/index",
|
||||
},
|
||||
items: [
|
||||
"guides/js-waku/quick-start",
|
||||
"guides/js-waku/light-send-receive",
|
||||
"guides/js-waku/store-retrieve-messages",
|
||||
"guides/js-waku/use-waku-react",
|
||||
|
|
|
|||
Loading…
Reference in New Issue