---
title: Group chat with Waku Relay
---

Waku Relay is a gossip protocol that enables you to send and receive messages. You can find more info on Waku Relay [here](../Concepts/3.md).

Before starting, you need to choose a Content Topic for your dApp. Check out the [How to choose a content topic](../Concepts/2.md) guide to learn more about content topics.

For this guide, we are using a single content topic: `/relay-guide/1/chat/proto`

## 0. Setup a boilerplate app

> This document assumes previous knowledge and experience of working with JavaScript web applications.

To set up a boilerplate React app using CRA, please refer to: [https://reactjs.org/docs/create-a-new-react-app.html](https://reactjs.org/docs/create-a-new-react-app.html)

You can also use vanilla JavaScript, Vue, or any other framework of your choice.

Please refer to [references](#references) to check our reference applications built with Waku Relay for React and vanilla JavaScript.

## 1. Install dependencies

First, you need to install the dependencies for the project. You can use `npm` or `yarn` for this.

npm install js-waku protobufjs

> If you're not using a package manager, you can use minified bundle of waku-js from unpkg.com directly
> Please refer to [references](#references) for more info.

## 2. Importing packages and initializing variables

In this step, you will import the packages you need and initialize the variables.

#### Importing the protobuf library.

Waku v2 protocols use protobuf by default to encode and decode messages.
The usage of how to use protobuf for the scope of this guide will explained in the coming sections.

import protobuf from "protobufjs";

#### Importing the methods required from the js-waku package

import { createPrivacyNode } from "js-waku/lib/create_waku";
import { waitForRemotePeer } from "js-waku/lib/wait_for_remote_peer";
import { DecoderV0, EncoderV0 } from "js-waku/lib/waku_message/version_0";

#### Initializing the content topic

const ContentTopic = `/js-waku-examples/1/chat/proto`;
const Encoder = new EncoderV0(ContentTopic);
const Decoder = new DecoderV0(ContentTopic);

#### Initialize the protobuf schema

const SimpleChatMessage = new protobuf.Type("SimpleChatMessage")
  .add(new protobuf.Field("timestamp", 1, "uint32"))
  .add(new protobuf.Field("text", 2, "string"));

## 3. Creating a Waku node

In this step, you will create a Waku node and connect to the WakuRelay protocol.

const waku = await createPrivacyNode({ defaultBootstrap: true });
await waku.start();
await waitForRemotePeer(waku, ["relay"]);

## 4. Subscribing to messages

In this step, you will subscribe to messages on the content topic you chose.

#### Create a callback function to handle incoming messages

const processIncomingMessages = (wakuMessage) => {
  const { text, timestamp } = SimpleChatMessage.decode(wakuMessage.payload);

  const message = { text, timestamp: new Date().setTime(timestamp) };
};

#### Subscribe to messages

waku.relay.subscribe(Decoder, processIncomingMessages);

## 5. Publishing messages

In this step, you will publish messages to the content topic you chose.

#### Create a function to publish messages

function sendMessage(message, waku, timestamp) {
  const time = timestamp.getTime();

  // Encode to protobuf
  const protoMsg = SimpleChatMessage.create({
    timestamp: time,
    text: message,
  });
  const payload = SimpleChatMessage.encode(protoMsg).finish();

  // Send over Waku Relay
  return waku.relay.send(Encoder, { payload });
}

#### Publish messages

sendMessage(`Here is message #${sendCounter}`, waku, new Date()).then(() =>
  console.log("Message sent")
);

## 6. Run your app

You can wrap these functions in a React component or any other framework of your choice,
and run your app to see the messages being sent and received.

We have created reference applications that can be used as a reference for your application.

## References

- [Implementation of Waku v2 in ReactJS](https://github.com/waku-org/js-waku-examples/tree/master/relay-reactjs-chat)
- [Implementation of Waku v2 in vanilla JavaScript](https://github.com/waku-org/js-waku-examples/tree/master/relay-js)