2021-12-10 15:46:13 +00:00
<!DOCTYPE html>
< html lang = "en" dir = "ltr" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta name = "description" content = "Receive and Send Messages Using Waku Relay Waku Relay is a gossip protocol that enables you to send and receive messages . You can find Waku Relay & rsquo ; s specifications on Vac RFC .
Before starting, you need to choose a Content Topic for your dApp. Check out the how to choose a content topic guide to learn more about content topics.
For this guide, we are using a single content topic: /relay-guide/1/chat/proto.
Installation You can install js-waku using your favorite package manager:">
< meta name = "theme-color" content = "#FFFFFF" >
< meta name = "color-scheme" content = "light dark" > < meta property = "og:title" content = "Receive and Send Messages Using Waku Relay" / >
< meta property = "og:description" content = "Receive and Send Messages Using Waku Relay Waku Relay is a gossip protocol that enables you to send and receive messages . You can find Waku Relay & rsquo ; s specifications on Vac RFC .
Before starting, you need to choose a Content Topic for your dApp. Check out the how to choose a content topic guide to learn more about content topics.
For this guide, we are using a single content topic: /relay-guide/1/chat/proto.
Installation You can install js-waku using your favorite package manager:" />
< meta property = "og:type" content = "article" / >
< meta property = "og:url" content = "https://docs.dappconnect.dev/docs/guides/02_relay_receive_send_messages/" / >
< meta property = "article:published_time" content = "2021-12-09T14:00:00+01:00" / >
< meta property = "article:modified_time" content = "2021-12-09T15:27:58+01:00" / >
< title > Receive and Send Messages Using Waku Relay | DappConnect Docs< / title >
< link rel = "manifest" href = "/manifest.json" >
< link rel = "icon" href = "/favicon.png" type = "image/x-icon" >
< link rel = "stylesheet" href = "/book.min.f5334c44f5cf59e95e7e3727937b1ab51209089ee42a7b7b0a2bf524485dab42.css" integrity = "sha256-9TNMRPXPWelefjcnk3satRIJCJ7kKnt7Civ1JEhdq0I=" crossorigin = "anonymous" >
< script defer src = "/flexsearch.min.js" > < / script >
< script defer src = "/en.search.min.1dff71c8a5ea6762b846ee9b751f05265289b826803807a7d75bda5d15e51e80.js" integrity = "sha256-Hf9xyKXqZ2K4Ru6bdR8FJlKJuCaAOAen11vaXRXlHoA=" crossorigin = "anonymous" > < / script >
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
-->
< / head >
< body dir = "ltr" >
< input type = "checkbox" class = "hidden toggle" id = "menu-control" / >
< input type = "checkbox" class = "hidden toggle" id = "toc-control" / >
< main class = "container flex" >
< aside class = "book-menu" >
< div class = "book-menu-content" >
< nav >
< h2 class = "book-brand" >
< a class = "flex align-center" href = "/" > < span > DappConnect Docs< / span >
< / a >
< / h2 >
< div class = "book-search" >
< input type = "text" id = "book-search-input" placeholder = "Search" aria-label = "Search" maxlength = "64" data-hotkeys = "s/" / >
< div class = "book-search-spinner hidden" > < / div >
< ul id = "book-search-results" > < / ul >
< / div >
< ul class = "book-languages" >
< li >
< input type = "checkbox" id = "languages" class = "toggle" / >
< label for = "languages" class = "flex justify-between" >
< a role = "button" class = "flex align-center" >
< img src = "/svg/translate.svg" class = "book-icon" alt = "Languages" / >
English
< / a >
< / label >
< ul >
< li >
< a href = "https://docs.dappconnect.dev/es/" >
Spanish
< / a >
< / li >
< / ul >
< / li >
< / ul >
< ul >
< li >
< a href = "https://docs.dappconnect.dev/docs/introduction/" class = "" > Introduction< / a >
< / li >
< li >
< a href = "https://docs.dappconnect.dev/docs/quick_start/" class = "" > Quick Start< / a >
< / li >
< li >
< a href = "https://docs.dappconnect.dev/docs/guides/" class = "" > Guides< / a >
< ul >
< li >
< a href = "https://docs.dappconnect.dev/docs/guides/01_choose_content_topic/" class = "" > How to Choose a Content Topic< / a >
< / li >
< li >
< a href = "https://docs.dappconnect.dev/docs/guides/02_relay_receive_send_messages/" class = " active" > Receive and Send Messages Using Waku Relay< / a >
< / li >
< li >
< a href = "https://docs.dappconnect.dev/docs/guides/03_store_retrieve_messages/" class = "" > Retrieve Messages Using Waku Store< / a >
< / li >
< li >
< a href = "https://docs.dappconnect.dev/docs/guides/04_encrypt_messages_version_1/" class = "" > Encrypt Messages Using Waku Message Version 1< / a >
< / li >
< li >
< a href = "https://docs.dappconnect.dev/docs/guides/05_sign_messages_version_1/" class = "" > Sign Messages Using Waku Message Version 1< / a >
< / li >
< li >
< a href = "https://docs.dappconnect.dev/docs/guides/06_light_push_send_messages/" class = "" > Send Messages Using Waku Light Push< / a >
< / li >
< li >
< a href = "https://docs.dappconnect.dev/docs/guides/07_reactjs_relay/" class = "" > Receive and Send Messages Using Waku Relay With ReactJS< / a >
< / li >
< li >
< a href = "https://docs.dappconnect.dev/docs/guides/08_reactjs_store/" class = "" > Retrieve Messages Using Waku Store With ReactJS< / a >
< / li >
< / ul >
< / li >
< li >
< a href = "https://docs.dappconnect.dev/docs/examples/" class = "" > Examples< / a >
< / li >
< li >
< a href = "https://docs.dappconnect.dev/docs/crypto_libraries/" class = "" > Cryptographic Libraries< / a >
< / li >
< li >
< a href = "https://docs.dappconnect.dev/docs/waku_protocols/" class = "" > Implemented Waku Protocols< / a >
< / li >
< / ul >
< ul >
2021-12-13 00:29:57 +00:00
< li >
< a href = "https://status-im.github.io/js-waku/docs/" target = "_blank" rel = "noopener" >
JS-Waku API Doc
< / a >
< / li >
2021-12-10 15:46:13 +00:00
< li >
< a href = "https://vac.dev/" target = "_blank" rel = "noopener" >
Vac Team
< / a >
< / li >
< li >
< a href = "https://rfc.vac.dev/" target = "_blank" rel = "noopener" >
Vac RFCs
< / a >
< / li >
< li >
< a href = "https://status.im/" target = "_blank" rel = "noopener" >
Status.im
< / a >
< / li >
< / ul >
< / nav >
< script > ( function ( ) { var menu = document . querySelector ( "aside .book-menu-content" ) ; addEventListener ( "beforeunload" , function ( event ) { localStorage . setItem ( "menu.scrollTop" , menu . scrollTop ) ; } ) ; menu . scrollTop = localStorage . getItem ( "menu.scrollTop" ) ; } ) ( ) ; < / script >
< / div >
< / aside >
< div class = "book-page" >
< header class = "book-header" >
< div class = "flex align-center justify-between" >
< label for = "menu-control" >
< img src = "/svg/menu.svg" class = "book-icon" alt = "Menu" / >
< / label >
< strong > Receive and Send Messages Using Waku Relay< / strong >
< label for = "toc-control" >
< img src = "/svg/toc.svg" class = "book-icon" alt = "Table of Contents" / >
< / label >
< / div >
< aside class = "hidden clearfix" >
< nav id = "TableOfContents" >
< ul >
< li > < a href = "#receive-and-send-messages-using-waku-relay" > Receive and Send Messages Using Waku Relay< / a > < / li >
< li > < a href = "#installation" > Installation< / a > < / li >
< li > < a href = "#create-waku-instance" > Create Waku Instance< / a > < / li >
< li > < a href = "#wait-to-be-connected" > Wait to be connected< / a > < / li >
< li > < a href = "#receive-messages" > Receive messages< / a > < / li >
< li > < a href = "#send-messages" > Send Messages< / a > < / li >
< li > < a href = "#use-protobuf" > Use Protobuf< / a >
< ul >
< li > < a href = "#install-protobuf-library" > Install Protobuf Library< / a > < / li >
< li > < a href = "#protobuf-definition" > Protobuf Definition< / a > < / li >
< li > < a href = "#encode-messages" > Encode Messages< / a > < / li >
< li > < a href = "#decode-messages" > Decode Messages< / a > < / li >
< / ul >
< / li >
< li > < a href = "#conclusion" > Conclusion< / a > < / li >
< / ul >
< / nav >
< / aside >
< / header >
< article class = "markdown" > < h1 id = "receive-and-send-messages-using-waku-relay" > Receive and Send Messages Using Waku Relay< / h1 >
< p > Waku Relay is a gossip protocol that enables you to send and receive messages.
You can find Waku Relay’ s specifications on < a href = "https://rfc.vac.dev/spec/11/" > Vac RFC< / a > .< / p >
< p > Before starting, you need to choose a < em > Content Topic< / em > for your dApp.
Check out the < a href = "/docs/guides/01_choose_content_topic/" > how to choose a content topic guide< / a > to learn more about content topics.< / p >
< p > For this guide, we are using a single content topic: < code > /relay-guide/1/chat/proto< / code > .< / p >
< h1 id = "installation" > Installation< / h1 >
< p > You can install < a href = "https://npmjs.com/package/js-waku" > js-waku< / a > using your favorite package manager:< / p >
< div class = "highlight" > < pre style = "color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4" > < code class = "language-shell" data-lang = "shell" > npm install js-waku
< / code > < / pre > < / div > < h1 id = "create-waku-instance" > Create Waku Instance< / h1 >
< p > In order to interact with the Waku network, you first need a Waku instance:< / p >
< div class = "highlight" > < pre style = "color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4" > < code class = "language-js" data-lang = "js" > < span style = "color:#66d9ef" > import< / span > { < span style = "color:#a6e22e" > Waku< / span > } < span style = "color:#a6e22e" > from< / span > < span style = "color:#e6db74" > ' js-waku' < / span > ;
< span style = "color:#66d9ef" > const< / span > < span style = "color:#a6e22e" > waku< / span > < span style = "color:#f92672" > =< / span > < span style = "color:#a6e22e" > await< / span > < span style = "color:#a6e22e" > Waku< / span > .< span style = "color:#a6e22e" > create< / span > ({ < span style = "color:#a6e22e" > bootstrap< / span > < span style = "color:#f92672" > :< / span > < span style = "color:#66d9ef" > true< / span > });
< / code > < / pre > < / div > < p > Passing the < code > bootstrap< / code > option will connect your node to predefined Waku nodes.
If you want to bootstrap to your own nodes, you can pass an array of multiaddresses instead:< / p >
< div class = "highlight" > < pre style = "color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4" > < code class = "language-js" data-lang = "js" > < span style = "color:#66d9ef" > import< / span > { < span style = "color:#a6e22e" > Waku< / span > } < span style = "color:#a6e22e" > from< / span > < span style = "color:#e6db74" > ' js-waku' < / span > ;
< span style = "color:#66d9ef" > const< / span > < span style = "color:#a6e22e" > waku< / span > < span style = "color:#f92672" > =< / span > < span style = "color:#a6e22e" > await< / span > < span style = "color:#a6e22e" > Waku< / span > .< span style = "color:#a6e22e" > create< / span > ({
< span style = "color:#a6e22e" > bootstrap< / span > < span style = "color:#f92672" > :< / span > [
< span style = "color:#e6db74" > ' /dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm' < / span > ,
< span style = "color:#e6db74" > ' /dns4/node-01.do-ams3.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAmPLe7Mzm8TsYUubgCAW1aJoeFScxrLj8ppHFivPo97bUZ' < / span >
]
});
< / code > < / pre > < / div > < h1 id = "wait-to-be-connected" > Wait to be connected< / h1 >
< p > When using the < code > bootstrap< / code > option, it may take some time to connect to other peers.
To ensure that you have relay peers available to send and receive messages,
use the following function:< / p >
< div class = "highlight" > < pre style = "color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4" > < code class = "language-js" data-lang = "js" > < span style = "color:#a6e22e" > await< / span > < span style = "color:#a6e22e" > waku< / span > .< span style = "color:#a6e22e" > waitForConnectedPeer< / span > ();
< / code > < / pre > < / div > < p > The returned < code > Promise< / code > will resolve once you are connected to a Waku Relay peer.< / p >
< h1 id = "receive-messages" > Receive messages< / h1 >
< p > To receive messages for your app,
you need to register an observer on relay for your app’ s content topic:< / p >
< div class = "highlight" > < pre style = "color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4" > < code class = "language-js" data-lang = "js" > < span style = "color:#66d9ef" > const< / span > < span style = "color:#a6e22e" > processIncomingMessage< / span > < span style = "color:#f92672" > =< / span > (< span style = "color:#a6e22e" > wakuMessage< / span > ) => {
< span style = "color:#a6e22e" > console< / span > .< span style = "color:#a6e22e" > log< / span > (< span style = "color:#e6db74" > `Message Received: < / span > < span style = "color:#e6db74" > ${< / span > < span style = "color:#a6e22e" > wakuMessage< / span > .< span style = "color:#a6e22e" > payloadAsUtf8< / span > < span style = "color:#e6db74" > }< / span > < span style = "color:#e6db74" > `< / span > );
};
< span style = "color:#a6e22e" > waku< / span > .< span style = "color:#a6e22e" > relay< / span > .< span style = "color:#a6e22e" > addObserver< / span > (< span style = "color:#a6e22e" > processIncomingMessage< / span > , [< span style = "color:#e6db74" > ' /relay-guide/1/chat/proto' < / span > ]);
< / code > < / pre > < / div > < h1 id = "send-messages" > Send Messages< / h1 >
< p > You are now ready to send messages.
Let’ s start by sending simple strings as messages.< / p >
< p > To send a message, you need to wrap the message in a < code > WakuMessage< / code > .
When using a basic string payload, you can use the < code > WakuMessage.fromUtf8String< / code > helper:< / p >
< div class = "highlight" > < pre style = "color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4" > < code class = "language-js" data-lang = "js" > < span style = "color:#66d9ef" > import< / span > { < span style = "color:#a6e22e" > WakuMessage< / span > } < span style = "color:#a6e22e" > from< / span > < span style = "color:#e6db74" > ' js-waku' < / span > ;
< span style = "color:#66d9ef" > const< / span > < span style = "color:#a6e22e" > wakuMessage< / span > < span style = "color:#f92672" > =< / span > < span style = "color:#a6e22e" > await< / span > < span style = "color:#a6e22e" > WakuMessage< / span > .< span style = "color:#a6e22e" > fromUtf8String< / span > (< span style = "color:#e6db74" > ' Here is a message' < / span > , < span style = "color:#e6db74" > `/relay-guide/1/chat/proto`< / span > );
< / code > < / pre > < / div > < p > Then, use the < code > relay< / code > module to send the message to our peers,
the message will then be relayed to the rest of the network thanks to Waku Relay:< / p >
< div class = "highlight" > < pre style = "color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4" > < code class = "language-js" data-lang = "js" > < span style = "color:#a6e22e" > await< / span > < span style = "color:#a6e22e" > waku< / span > .< span style = "color:#a6e22e" > relay< / span > .< span style = "color:#a6e22e" > send< / span > (< span style = "color:#a6e22e" > wakuMessage< / span > );
< / code > < / pre > < / div > < h1 id = "use-protobuf" > Use Protobuf< / h1 >
< p > Sending strings as messages in unlikely to cover your dApps needs.< / p >
< p > Waku v2 protocols use < a href = "https://developers.google.com/protocol-buffers/" > protobuf< / a > < a href = "https://rfc.vac.dev/spec/10/" > by default< / a > .< / p >
< p > Let’ s review how you can use protobuf to include structured objects in Waku Messages.< / p >
< p > First, define a data structure.
For this guide, we will use a simple chat message that contains a timestamp and text:< / p >
< div class = "highlight" > < pre style = "color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4" > < code class = "language-js" data-lang = "js" > {
< span style = "color:#a6e22e" > timestamp< / span > < span style = "color:#f92672" > :< / span > Date;
< span style = "color:#a6e22e" > text< / span > < span style = "color:#f92672" > :< / span > < span style = "color:#a6e22e" > string< / span > ;
}
< / code > < / pre > < / div > < p > To encode and decode protobuf payloads, you can use the < a href = "https://www.npmjs.com/package/protons" > protons< / a > package.< / p >
< h2 id = "install-protobuf-library" > Install Protobuf Library< / h2 >
< p > First, install protons:< / p >
< div class = "highlight" > < pre style = "color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4" > < code class = "language-shell" data-lang = "shell" > npm install protons
< / code > < / pre > < / div > < h2 id = "protobuf-definition" > Protobuf Definition< / h2 >
< p > Then define the simple chat message:< / p >
< div class = "highlight" > < pre style = "color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4" > < code class = "language-js" data-lang = "js" > < span style = "color:#66d9ef" > import< / span > < span style = "color:#a6e22e" > protons< / span > < span style = "color:#a6e22e" > from< / span > < span style = "color:#e6db74" > ' protons' < / span > ;
< span style = "color:#66d9ef" > const< / span > < span style = "color:#a6e22e" > proto< / span > < span style = "color:#f92672" > =< / span > < span style = "color:#a6e22e" > protons< / span > (< span style = "color:#e6db74" > `
< / span > < span style = "color:#e6db74" > message SimpleChatMessage {
< / span > < span style = "color:#e6db74" > uint64 timestamp = 1;
< / span > < span style = "color:#e6db74" > string text = 2;
< / span > < span style = "color:#e6db74" > }
< / span > < span style = "color:#e6db74" > `< / span > );
< / code > < / pre > < / div > < p > You can learn about protobuf message definitions here:
< a href = "https://developers.google.com/protocol-buffers/docs/proto" > Protocol Buffers Language Guide< / a > .< / p >
< h2 id = "encode-messages" > Encode Messages< / h2 >
< p > Instead of wrapping an utf-8 string in a Waku Message,
you are going to wrap a protobuf payload.< / p >
< p > First, encode the object:< / p >
< div class = "highlight" > < pre style = "color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4" > < code class = "language-js" data-lang = "js" > < span style = "color:#66d9ef" > const< / span > < span style = "color:#a6e22e" > payload< / span > < span style = "color:#f92672" > =< / span > < span style = "color:#a6e22e" > proto< / span > .< span style = "color:#a6e22e" > SimpleChatMessage< / span > .< span style = "color:#a6e22e" > encode< / span > ({
< span style = "color:#a6e22e" > timestamp< / span > < span style = "color:#f92672" > :< / span > Date.< span style = "color:#a6e22e" > now< / span > (),
< span style = "color:#a6e22e" > text< / span > < span style = "color:#f92672" > :< / span > < span style = "color:#e6db74" > ' Here is a message' < / span >
});
< / code > < / pre > < / div > < p > Then, wrap it in a Waku Message:< / p >
< div class = "highlight" > < pre style = "color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4" > < code class = "language-js" data-lang = "js" > < span style = "color:#66d9ef" > const< / span > < span style = "color:#a6e22e" > wakuMessage< / span > < span style = "color:#f92672" > =< / span > < span style = "color:#a6e22e" > await< / span > < span style = "color:#a6e22e" > WakuMessage< / span > .< span style = "color:#a6e22e" > fromBytes< / span > (< span style = "color:#a6e22e" > payload< / span > , < span style = "color:#a6e22e" > ContentTopic< / span > );
< / code > < / pre > < / div > < p > Now, you can send the message over Waku Relay the same way than before:< / p >
< div class = "highlight" > < pre style = "color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4" > < code class = "language-js" data-lang = "js" > < span style = "color:#a6e22e" > await< / span > < span style = "color:#a6e22e" > waku< / span > .< span style = "color:#a6e22e" > relay< / span > .< span style = "color:#a6e22e" > send< / span > (< span style = "color:#a6e22e" > wakuMessage< / span > );
< / code > < / pre > < / div > < h2 id = "decode-messages" > Decode Messages< / h2 >
< p > To decode the messages received over Waku Relay,
you need to extract the protobuf payload and decode it using < code > protons< / code > .< / p >
< div class = "highlight" > < pre style = "color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4" > < code class = "language-js" data-lang = "js" > < span style = "color:#66d9ef" > const< / span > < span style = "color:#a6e22e" > processIncomingMessage< / span > < span style = "color:#f92672" > =< / span > (< span style = "color:#a6e22e" > wakuMessage< / span > ) => {
< span style = "color:#75715e" > // No need to attempt to decode a message if the payload is absent
< / span > < span style = "color:#75715e" > < / span > < span style = "color:#66d9ef" > if< / span > (< span style = "color:#f92672" > !< / span > < span style = "color:#a6e22e" > wakuMessage< / span > .< span style = "color:#a6e22e" > payload< / span > ) < span style = "color:#66d9ef" > return< / span > ;
< span style = "color:#66d9ef" > const< / span > { < span style = "color:#a6e22e" > timestamp< / span > , < span style = "color:#a6e22e" > text< / span > } < span style = "color:#f92672" > =< / span > < span style = "color:#a6e22e" > proto< / span > .< span style = "color:#a6e22e" > SimpleChatMessage< / span > .< span style = "color:#a6e22e" > decode< / span > (
< span style = "color:#a6e22e" > wakuMessage< / span > .< span style = "color:#a6e22e" > payload< / span >
);
< span style = "color:#a6e22e" > console< / span > .< span style = "color:#a6e22e" > log< / span > (< span style = "color:#e6db74" > `Message Received: < / span > < span style = "color:#e6db74" > ${< / span > < span style = "color:#a6e22e" > text< / span > < span style = "color:#e6db74" > }< / span > < span style = "color:#e6db74" > , sent at < / span > < span style = "color:#e6db74" > ${< / span > < span style = "color:#a6e22e" > timestamp< / span > .< span style = "color:#a6e22e" > toString< / span > ()< span style = "color:#e6db74" > }< / span > < span style = "color:#e6db74" > `< / span > );
};
< / code > < / pre > < / div > < p > Like before, add this callback as an observer to Waku Relay:< / p >
< div class = "highlight" > < pre style = "color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4" > < code class = "language-js" data-lang = "js" > < span style = "color:#a6e22e" > waku< / span > .< span style = "color:#a6e22e" > relay< / span > .< span style = "color:#a6e22e" > addObserver< / span > (< span style = "color:#a6e22e" > processIncomingMessage< / span > , [< span style = "color:#e6db74" > ' /relay-guide/1/chat/proto' < / span > ]);
< / code > < / pre > < / div > < h1 id = "conclusion" > Conclusion< / h1 >
< p > That is it! Now, you know how to send and receive messages over Waku using the Waku Relay protocol.< / p >
< p > Feel free to check out other < a href = "/docs/guides/" > guides< / a > or < a href = "/docs/examples/" > examples< / a > .< / p >
< p > Here is the final code:< / p >
< div class = "highlight" > < pre style = "color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4" > < code class = "language-js" data-lang = "js" > < span style = "color:#66d9ef" > import< / span > { < span style = "color:#a6e22e" > getBootstrapNodes< / span > , < span style = "color:#a6e22e" > Waku< / span > , < span style = "color:#a6e22e" > WakuMessage< / span > } < span style = "color:#a6e22e" > from< / span > < span style = "color:#e6db74" > ' js-waku' < / span > ;
< span style = "color:#66d9ef" > import< / span > < span style = "color:#a6e22e" > protons< / span > < span style = "color:#a6e22e" > from< / span > < span style = "color:#e6db74" > ' protons' < / span > ;
< span style = "color:#66d9ef" > const< / span > < span style = "color:#a6e22e" > proto< / span > < span style = "color:#f92672" > =< / span > < span style = "color:#a6e22e" > protons< / span > (< span style = "color:#e6db74" > `
< / span > < span style = "color:#e6db74" > message SimpleChatMessage {
< / span > < span style = "color:#e6db74" > uint64 timestamp = 1;
< / span > < span style = "color:#e6db74" > string text = 2;
< / span > < span style = "color:#e6db74" > }
< / span > < span style = "color:#e6db74" > `< / span > );
< span style = "color:#66d9ef" > const< / span > < span style = "color:#a6e22e" > wakuNode< / span > < span style = "color:#f92672" > =< / span > < span style = "color:#a6e22e" > await< / span > < span style = "color:#a6e22e" > Waku< / span > .< span style = "color:#a6e22e" > create< / span > ();
< span style = "color:#66d9ef" > const< / span > < span style = "color:#a6e22e" > nodes< / span > < span style = "color:#f92672" > =< / span > < span style = "color:#a6e22e" > await< / span > < span style = "color:#a6e22e" > getBootstrapNodes< / span > ();
< span style = "color:#a6e22e" > await< / span > Promise.< span style = "color:#a6e22e" > all< / span > (< span style = "color:#a6e22e" > nodes< / span > .< span style = "color:#a6e22e" > map< / span > ((< span style = "color:#a6e22e" > addr< / span > ) => < span style = "color:#a6e22e" > waku< / span > .< span style = "color:#a6e22e" > dial< / span > (< span style = "color:#a6e22e" > addr< / span > )));
< span style = "color:#66d9ef" > const< / span > < span style = "color:#a6e22e" > processIncomingMessage< / span > < span style = "color:#f92672" > =< / span > (< span style = "color:#a6e22e" > wakuMessage< / span > ) => {
< span style = "color:#75715e" > // No need to attempt to decode a message if the payload is absent
< / span > < span style = "color:#75715e" > < / span > < span style = "color:#66d9ef" > if< / span > (< span style = "color:#f92672" > !< / span > < span style = "color:#a6e22e" > wakuMessage< / span > .< span style = "color:#a6e22e" > payload< / span > ) < span style = "color:#66d9ef" > return< / span > ;
< span style = "color:#66d9ef" > const< / span > { < span style = "color:#a6e22e" > timestamp< / span > , < span style = "color:#a6e22e" > text< / span > } < span style = "color:#f92672" > =< / span > < span style = "color:#a6e22e" > proto< / span > .< span style = "color:#a6e22e" > SimpleChatMessage< / span > .< span style = "color:#a6e22e" > decode< / span > (
< span style = "color:#a6e22e" > wakuMessage< / span > .< span style = "color:#a6e22e" > payload< / span >
);
< span style = "color:#a6e22e" > console< / span > .< span style = "color:#a6e22e" > log< / span > (< span style = "color:#e6db74" > `Message Received: < / span > < span style = "color:#e6db74" > ${< / span > < span style = "color:#a6e22e" > text< / span > < span style = "color:#e6db74" > }< / span > < span style = "color:#e6db74" > , sent at < / span > < span style = "color:#e6db74" > ${< / span > < span style = "color:#a6e22e" > timestamp< / span > .< span style = "color:#a6e22e" > toString< / span > ()< span style = "color:#e6db74" > }< / span > < span style = "color:#e6db74" > `< / span > );
};
< span style = "color:#a6e22e" > waku< / span > .< span style = "color:#a6e22e" > relay< / span > .< span style = "color:#a6e22e" > addObserver< / span > (< span style = "color:#a6e22e" > processIncomingMessage< / span > , [< span style = "color:#e6db74" > ' /relay-guide/1/chat/proto' < / span > ]);
< span style = "color:#66d9ef" > const< / span > < span style = "color:#a6e22e" > payload< / span > < span style = "color:#f92672" > =< / span > < span style = "color:#a6e22e" > proto< / span > .< span style = "color:#a6e22e" > SimpleChatMessage< / span > .< span style = "color:#a6e22e" > encode< / span > ({
< span style = "color:#a6e22e" > timestamp< / span > < span style = "color:#f92672" > :< / span > Date.< span style = "color:#a6e22e" > now< / span > (),
< span style = "color:#a6e22e" > text< / span > < span style = "color:#f92672" > :< / span > < span style = "color:#e6db74" > ' Here is a message' < / span >
});
< span style = "color:#66d9ef" > const< / span > < span style = "color:#a6e22e" > wakuMessage< / span > < span style = "color:#f92672" > =< / span > < span style = "color:#a6e22e" > await< / span > < span style = "color:#a6e22e" > WakuMessage< / span > .< span style = "color:#a6e22e" > fromBytes< / span > (< span style = "color:#a6e22e" > payload< / span > , < span style = "color:#a6e22e" > ContentTopic< / span > );
< span style = "color:#a6e22e" > await< / span > < span style = "color:#a6e22e" > waku< / span > .< span style = "color:#a6e22e" > relay< / span > .< span style = "color:#a6e22e" > send< / span > (< span style = "color:#a6e22e" > wakuMessage< / span > );
< / code > < / pre > < / div > < / article >
< footer class = "book-footer" >
< div class = "flex flex-wrap justify-between" >
< div > < a class = "flex align-center" href = "https://github.com/vacp2p/docs.dappconnect.dev/commit/89334e6efdcfefe0894f99f92b4b6352003f3aa3" title = 'Last modified by Jakub Sokołowski | 2021/09/12' target = "_blank" rel = "noopener" >
< img src = "/svg/calendar.svg" class = "book-icon" alt = "Calendar" / >
< span > 2021/09/12< / span >
< / a >
< / div >
< div >
< a class = "flex align-center" href = "https://github.com/vacp2p/docs.dappconnect.dev/edit/develop/content/docs/guides/02_relay_receive_send_messages.md" target = "_blank" rel = "noopener" >
< img src = "/svg/edit.svg" class = "book-icon" alt = "Edit" / >
< span > Edit this page< / span >
< / a >
< / div >
< / div >
< script > ( f u n c t i o n ( ) { f u n c t i o n s e l e c t ( e l e m e n t ) { c o n s t s e l e c t i o n = w i n d o w . g e t S e l e c t i o n ( ) ; c o n s t r a n g e = d o c u m e n t . c r e a t e R a n g e ( ) ; r a n g e . s e l e c t N o d e C o n t e n t s ( e l e m e n t ) ; s e l e c t i o n . r e m o v e A l l R a n g e s ( ) ; s e l e c t i o n . a d d R a n g e ( r a n g e ) ; }
document.querySelectorAll("pre code").forEach(code=>{code.addEventListener("click",function(event){select(code.parentElement);if(navigator.clipboard){navigator.clipboard.writeText(code.parentElement.textContent);}});});})();< / script >
< / footer >
< div class = "book-comments" >
< / div >
< label for = "menu-control" class = "hidden book-menu-overlay" > < / label >
< / div >
< aside class = "book-toc" >
< div class = "book-toc-content" >
< nav id = "TableOfContents" >
< ul >
< li > < a href = "#receive-and-send-messages-using-waku-relay" > Receive and Send Messages Using Waku Relay< / a > < / li >
< li > < a href = "#installation" > Installation< / a > < / li >
< li > < a href = "#create-waku-instance" > Create Waku Instance< / a > < / li >
< li > < a href = "#wait-to-be-connected" > Wait to be connected< / a > < / li >
< li > < a href = "#receive-messages" > Receive messages< / a > < / li >
< li > < a href = "#send-messages" > Send Messages< / a > < / li >
< li > < a href = "#use-protobuf" > Use Protobuf< / a >
< ul >
< li > < a href = "#install-protobuf-library" > Install Protobuf Library< / a > < / li >
< li > < a href = "#protobuf-definition" > Protobuf Definition< / a > < / li >
< li > < a href = "#encode-messages" > Encode Messages< / a > < / li >
< li > < a href = "#decode-messages" > Decode Messages< / a > < / li >
< / ul >
< / li >
< li > < a href = "#conclusion" > Conclusion< / a > < / li >
< / ul >
< / nav >
< / div >
< / aside >
< / main >
< / body >
< / html >
