docs.waku.org/docs/guides/js-waku/relay-send-receive.md
LordGhostX 627f7f8a8c
@waku/react docs (#90)
* add @waku/react outline

* add @waku/react hooks docs

* add @waku/react providers docs

* add more snippet comments + fix code indents
2023-07-15 22:54:13 +01:00

3.5 KiB

title
Send and Receive Messages Using Relay

This guide provides detailed steps to set up a Waku node for sending and receiving messages using the Relay protocol.

Create a Relay Node

Set up a Waku node by creating a Relay Node, connecting to network peers, choosing a content topic, and creating an encoder and decoder for message encryption:

import {
    createRelayNode,
    waitForRemotePeer,
    createEncoder,
    createDecoder,
} from "@waku/sdk";

// Create and start a Relay Node
const node = await createRelayNode({
	defaultBootstrap: true, // bootstraps using pre-defined nodes
	emitSelf: true, // emits sent message events to itself
});
await node.start();

// Wait for a successful peer connection
await waitForRemotePeer(node);

// Choose a content topic
const contentTopic = "/relay-guide/1/message/proto";

// Create a message encoder and decoder
const encoder = createEncoder({ contentTopic });
const decoder = createDecoder(contentTopic);

:::info When the emitSelf flag is set to true, the node will emit sent message events to itself and invoke its subscribers. :::

Create a Message Structure

Create your application's message structure using Protobuf's valid message fields:

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"));

:::info Please refer to the Protobuf installation guide for adding the protobufjs package to your project. :::

Send Messages Using Relay

To send messages using the Relay protocol, create a new message object and use the relay.send() function:

// 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 Relay
await node.relay.send(encoder, {
    payload: serializedMessage,
});

Receive Messages Using Relay

To receive messages using the Relay protocol, create a callback function to process the messages and use the relay.subscribe() function:

// 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);
};

// Subscribe to content topics and display new messages
const unsubscribe = await node.relay.subscribe([decoder], callback);

// Use the unsubscribe() function to stop receiving messages
// await unsubscribe();

:::tip Congratulations! You have successfully sent and received messages over the Waku Network using the Relay protocol. Check out the relay-js, relay-reactjs-chat, and relay-angular-chat examples for working demos. :::