docs.waku.org/docs/guides/js-waku/quick-start.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

4.4 KiB

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 Relay protocol. Please refer to the installation guide for steps on adding js-waku to your project.

Create a Relay Node

Use the createRelayNode() function to create a Relay Node and interact with the Waku Network:

import { createRelayNode } from "@waku/sdk";

// Create and start a Relay Node
const node = await createRelayNode({ 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. 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:

import { waitForRemotePeer } from "@waku/sdk";

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

The protocols option allows you to specify the protocols that the remote peers should have enabled:

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 for your application and create an encoder for message encryption:

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 (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:

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
npm install protobufjs
yarn add protobufjs

You can also use the protobufjs package via a CDN without installing it on your system:

// Import the CDN
import "https://cdn.jsdelivr.net/npm/protobufjs@latest/dist/protobuf.min.js";
<!-- 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 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"));

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

:::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. :::