diff --git a/docs/guides/js-waku/light-send-receive.md b/docs/guides/js-waku/light-send-receive.md index c14585db..8012b3ff 100644 --- a/docs/guides/js-waku/light-send-receive.md +++ b/docs/guides/js-waku/light-send-receive.md @@ -24,6 +24,23 @@ await node.start(); When the `defaultBootstrap` parameter is set to `true`, your node will be bootstrapped using the [default bootstrap method](/guides/js-waku/configure-discovery#default-bootstrap-method). Have a look at the [Bootstrap Nodes and Discover Peers](/guides/js-waku/configure-discovery) guide to learn more methods to bootstrap nodes. ::: +A node needs to know how to route messages. In order to do that you can use standard pubsub topic (`/waku/2/default-waku/proto`). If your project uses a different pubsub topic, you can configure this by providing a set of [content topics](/learn/concepts/content-topics) for the node to use with the `contentTopics` parameter or by using the `ShardInfo` parameter: + +```js +// Create node with content topics +const node = await createLightNode({ + defaultBootstrap: true, + contentTopics: [/*set of content topics*/], +}); + +// Create node with custom shard info +const shardInfo = { clusterId: 3, shards: [1, 2] }; +const node = await createLightNode({ + defaultBootstrap: true, + shardInfo: shardInfo, +}); +``` + ## Connect to remote peers Use the `waitForRemotePeer()` function to wait for the node to connect with peers on the Waku Network: @@ -41,15 +58,12 @@ The `protocols` parameter allows you to specify the [protocols](/learn/concepts/ import { waitForRemotePeer, Protocols } from "@waku/sdk"; // Wait for peer connections with specific protocols -await waitForRemotePeer(node, [ - Protocols.LightPush, - Protocols.Filter, -]); +await waitForRemotePeer(node, [Protocols.LightPush, Protocols.Filter]); ``` ## Choose a content topic -[Choose a content topic](/learn/concepts/content-topics) for your application and create a message `encoder` and `decoder`: +Choose a [content topic](/learn/concepts/content-topics) for your application and create a message `encoder` and `decoder`: ```js import { createEncoder, createDecoder } from "@waku/sdk"; @@ -66,9 +80,23 @@ The `ephemeral` parameter allows you to specify whether messages should **NOT** ```js const encoder = createEncoder({ - contentTopic: contentTopic, // message content topic - ephemeral: true, // allows messages NOT be stored on the network + contentTopic: contentTopic, // message content topic + ephemeral: true, // allows messages NOT be stored on the network +}); +``` + +The `pubsubTopicShardInfo` parameter allows you to configure a different shared pubsub topic for your `encoder` and `decoder`: + +```js +// Create the shard info +const shardInfo = { clusterId: 3, shard: 1 }; + +// Create encoder and decoder with custom shard info +const encoder = createEncoder({ + contentTopic: contentTopic, + pubsubTopicShardInfo: shardInfo, }); +const decoder = createDecoder(contentTopic, shardInfo); ``` :::info @@ -83,10 +111,10 @@ Create your application's message structure using [Protobuf's valid message](htt 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")); +const DataPacket = new protobuf.Type("DataPacket") + .add(new protobuf.Field("timestamp", 1, "uint64")) + .add(new protobuf.Field("sender", 2, "string")) + .add(new protobuf.Field("message", 3, "string")); ``` :::info @@ -99,18 +127,18 @@ To send messages over the Waku Network using the `Light Push` protocol, create a ```js // Create a new message object -const protoMessage = ChatMessage.create({ - timestamp: Date.now(), - sender: "Alice", - message: "Hello, World!", +const protoMessage = DataPacket.create({ + timestamp: Date.now(), + sender: "Alice", + message: "Hello, World!", }); // Serialise the message using Protobuf -const serialisedMessage = ChatMessage.encode(protoMessage).finish(); +const serialisedMessage = DataPacket.encode(protoMessage).finish(); // Send the message using Light Push await node.lightPush.send(encoder, { - payload: serialisedMessage, + payload: serialisedMessage, }); ``` @@ -121,11 +149,11 @@ To receive messages using the `Filter` protocol, create a callback function for ```js // Create the callback function const callback = (wakuMessage) => { - // Check if there is a payload on the message - if (!wakuMessage.payload) return; - // Render the messageObj as desired in your application - const messageObj = ChatMessage.decode(wakuMessage.payload); - console.log(messageObj); + // Check if there is a payload on the message + if (!wakuMessage.payload) return; + // Render the messageObj as desired in your application + const messageObj = DataPacket.decode(wakuMessage.payload); + console.log(messageObj); }; // Create a Filter subscription @@ -140,6 +168,16 @@ if (error) { await subscription.subscribe([decoder], callback); ``` +The `pubsubTopicShardInfo` parameter allows you to configure a different shared pubsub topic for your `Filter` subscription: + +```js +// Create the shard info +const shardInfo = { clusterId: 3, shard: 1 }; + +// Create Filter subscription with custom shard info +const subscription = await node.filter.createSubscription(shardInfo); +``` + You can use the `subscription.unsubscribe()` function to stop receiving messages from a content topic: ```js @@ -148,4 +186,4 @@ await subscription.unsubscribe([contentTopic]); :::tip Congratulations! You have successfully sent and received messages over the Waku Network using the `Light Push` and `Filter` protocols. Have a look at the [light-js](https://github.com/waku-org/js-waku-examples/tree/master/examples/light-js) and [light-chat](https://github.com/waku-org/js-waku-examples/tree/master/examples/light-chat) examples for working demos. -::: \ No newline at end of file +::: diff --git a/docs/guides/js-waku/use-waku-react.md b/docs/guides/js-waku/use-waku-react.md index 163e14e3..974af9ac 100644 --- a/docs/guides/js-waku/use-waku-react.md +++ b/docs/guides/js-waku/use-waku-react.md @@ -118,7 +118,7 @@ function App() { const decoder = createDecoder(contentTopic); // Create a message structure using Protobuf - const ChatMessage = new protobuf.Type("ChatMessage") + const DataPacket = new protobuf.Type("DataPacket") .add(new protobuf.Field("timestamp", 1, "uint64")) .add(new protobuf.Field("message", 2, "string")); @@ -223,13 +223,13 @@ function App() { // Create a new message object const timestamp = Date.now(); - const protoMessage = ChatMessage.create({ + const protoMessage = DataPacket.create({ timestamp: timestamp, message: inputMessage }); // Serialise the message and push to the network - const payload = ChatMessage.encode(protoMessage).finish(); + const payload = DataPacket.encode(protoMessage).finish(); const { recipients, errors } = await push({ payload, timestamp }); // Check for errors @@ -258,7 +258,7 @@ function App() { useEffect(() => { setMessages(filterMessages.map((wakuMessage) => { if (!wakuMessage.payload) return; - return ChatMessage.decode(wakuMessage.payload); + return DataPacket.decode(wakuMessage.payload); })); }, [filterMessages]); } @@ -283,7 +283,7 @@ function App() { const allMessages = storeMessages.concat(filterMessages); setMessages(allMessages.map((wakuMessage) => { if (!wakuMessage.payload) return; - return ChatMessage.decode(wakuMessage.payload); + return DataPacket.decode(wakuMessage.payload); })); }, [filterMessages, storeMessages]); } @@ -295,4 +295,4 @@ To explore the available Store query options, have a look at the [Retrieve Messa :::tip You have successfully integrated `@waku/sdk` into a React application using the `@waku/react` package. Have a look at the [web-chat](https://github.com/waku-org/js-waku-examples/tree/master/examples/web-chat) example for a working demo and the [Building a Tic-Tac-Toe Game with Waku](https://blog.waku.org/tictactoe-tutorial) tutorial to learn more. -::: \ No newline at end of file +:::