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" >
2022-01-11 09:09:21 +00:00
< 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 .
2021-12-10 15:46:13 +00:00
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.
2022-01-11 09:09:21 +00:00
For this guide, we are using a single content topic: /relay-guide/1/chat/proto.">
2021-12-10 15:46:13 +00:00
< 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" / >
2022-01-11 09:09:21 +00:00
< 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 .
2021-12-10 15:46:13 +00:00
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.
2022-01-11 09:09:21 +00:00
For this guide, we are using a single content topic: /relay-guide/1/chat/proto." />
2021-12-10 15:46:13 +00:00
< meta property = "og:type" content = "article" / >
2022-01-11 09:09:21 +00:00
< meta property = "og:url" content = "https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/" / > < meta property = "article:section" content = "docs" / >
2021-12-10 15:46:13 +00:00
< meta property = "article:published_time" content = "2021-12-09T14:00:00+01:00" / >
2022-01-27 00:19:14 +00:00
< meta property = "article:modified_time" content = "2022-01-24T12:17:00+11:00" / >
2022-01-11 09:09:21 +00:00
2022-01-27 00:19:14 +00:00
< title > Receive and Send Messages Using Waku Relay | Waku Connect Docs< / title >
2021-12-10 15:46:13 +00:00
< link rel = "manifest" href = "/manifest.json" >
< link rel = "icon" href = "/favicon.png" type = "image/x-icon" >
2022-01-11 09:09:21 +00:00
< link rel = "stylesheet" href = "/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity = "sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin = "anonymous" >
2021-12-10 15:46:13 +00:00
< script defer src = "/flexsearch.min.js" > < / script >
2022-01-27 00:19:14 +00:00
< script defer src = "/en.search.min.342db369b6a06ae4be84eda73ad08c0914f079f996313e0a0c1f709574dff631.js" integrity = "sha256-NC2zabagauS+hO2nOtCMCRTwefmWMT4KDB9wlXTf9jE=" crossorigin = "anonymous" > < / script >
2021-12-10 15:46:13 +00:00
<!--
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" >
2022-01-27 00:19:14 +00:00
< a class = "flex align-center" href = "/" > < span > Waku Connect Docs< / span >
2021-12-10 15:46:13 +00:00
< / 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 >
2022-01-10 15:07:23 +00:00
2021-12-10 15:46:13 +00:00
< 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 >
2022-01-10 15:07:23 +00:00
< a href = "https://docs.wakuconnect.dev/es/" >
Español
< / a >
< / li >
< li >
< a href = "https://docs.wakuconnect.dev/pt/" >
Português
2021-12-10 15:46:13 +00:00
< / a >
< / li >
< / ul >
< / li >
< / ul >
< ul >
< li >
2022-01-10 15:07:23 +00:00
< a href = "https://docs.wakuconnect.dev/docs/introduction/" class = "" > Introduction< / a >
< / li >
< li >
< a href = "https://docs.wakuconnect.dev/docs/quick_start/" class = "" > Quick Start< / a >
2021-12-10 15:46:13 +00:00
< / li >
< li >
2022-01-10 15:07:23 +00:00
< a href = "https://docs.wakuconnect.dev/docs/use_cases/" class = "" > Use Cases< / a >
2021-12-10 15:46:13 +00:00
< / li >
< li >
2022-01-12 03:43:06 +00:00
< a href = "https://docs.wakuconnect.dev/docs/presentations/" class = "" > Presentations & Videos< / a >
< / li >
< li >
2022-01-10 15:07:23 +00:00
< a href = "https://docs.wakuconnect.dev/docs/guides/" class = "" > Guides< / a >
2021-12-10 15:46:13 +00:00
< ul >
< li >
2022-01-10 15:07:23 +00:00
< a href = "https://docs.wakuconnect.dev/docs/guides/01_choose_content_topic/" class = "" > How to Choose a Content Topic< / a >
< / li >
< li >
< a href = "https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/" class = " active" > Receive and Send Messages Using Waku Relay< / a >
< / li >
< li >
< a href = "https://docs.wakuconnect.dev/docs/guides/03_store_retrieve_messages/" class = "" > Retrieve Messages Using Waku Store< / a >
< / li >
< li >
< a href = "https://docs.wakuconnect.dev/docs/guides/04_encrypt_messages_version_1/" class = "" > Encrypt Messages Using Waku Message Version 1< / a >
< / li >
< li >
< a href = "https://docs.wakuconnect.dev/docs/guides/05_sign_messages_version_1/" class = "" > Sign Messages Using Waku Message Version 1< / a >
< / li >
< li >
< a href = "https://docs.wakuconnect.dev/docs/guides/06_light_push_send_messages/" class = "" > Send Messages Using Waku Light Push< / a >
2021-12-10 15:46:13 +00:00
< / li >
< li >
2022-01-10 15:07:23 +00:00
< a href = "https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class = "" > Receive and Send Messages Using Waku Relay With ReactJS< / a >
2021-12-10 15:46:13 +00:00
< / li >
< li >
2022-01-10 15:07:23 +00:00
< a href = "https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/" class = "" > Retrieve Messages Using Waku Store With ReactJS< / a >
2021-12-10 15:46:13 +00:00
< / li >
< li >
2022-01-10 15:07:23 +00:00
< a href = "https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/" class = "" > Vote Poll Sdk< / a >
< ul >
< li >
< a href = "https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/" class = "" > Poll SDK< / a >
< ul >
< li >
< a href = "https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/01_create_dapp/" class = "" > Create the DApp and Install Dependencies< / a >
2021-12-10 15:46:13 +00:00
< / li >
< li >
2022-01-10 15:07:23 +00:00
< a href = "https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class = "" > Connect to the Ethereum Wallet< / a >
2021-12-10 15:46:13 +00:00
< / li >
< li >
2022-01-10 15:07:23 +00:00
< a href = "https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class = "" > Create-A-Poll Button< / a >
2021-12-10 15:46:13 +00:00
< / li >
< li >
2022-01-10 15:07:23 +00:00
< a href = "https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class = "" > Poll Creation Component< / a >
2021-12-10 15:46:13 +00:00
< / li >
< li >
2022-01-10 15:07:23 +00:00
< a href = "https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class = "" > Poll List Component< / a >
2021-12-10 15:46:13 +00:00
< / li >
2022-01-10 15:07:23 +00:00
< / ul >
< / li >
< / ul >
< / li >
2021-12-10 15:46:13 +00:00
< / ul >
< / li >
< li >
2022-01-10 15:07:23 +00:00
< a href = "https://docs.wakuconnect.dev/docs/examples/" class = "" > Examples< / a >
2021-12-10 15:46:13 +00:00
< / li >
< li >
2022-01-10 15:07:23 +00:00
< a href = "https://docs.wakuconnect.dev/docs/crypto_libraries/" class = "" > Cryptographic Libraries< / a >
2021-12-10 15:46:13 +00:00
< / li >
< li >
2022-01-10 15:07:23 +00:00
< a href = "https://docs.wakuconnect.dev/docs/waku_protocols/" class = "" > Implemented Waku Protocols< / a >
2021-12-10 15:46:13 +00:00
< / li >
< / ul >
< ul >
2021-12-13 00:29:57 +00:00
< li >
2022-01-27 00:19:14 +00:00
< a href = "https://js-waku.wakuconnect.dev/" target = "_blank" rel = "noopener" >
2021-12-13 00:29:57 +00:00
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 >
2022-01-11 09:09:21 +00:00
< script > ( function ( ) { var a = document . querySelector ( "aside .book-menu-content" ) ; addEventListener ( "beforeunload" , function ( b ) { localStorage . setItem ( "menu.scrollTop" , a . scrollTop ) } ) , a . scrollTop = localStorage . getItem ( "menu.scrollTop" ) } ) ( ) < / script >
2021-12-10 15:46:13 +00:00
< / 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 >
2022-01-11 09:09:21 +00:00
< article class = "markdown" > < h1 id = "receive-and-send-messages-using-waku-relay" >
Receive and Send Messages Using Waku Relay
< a class = "anchor" href = "#receive-and-send-messages-using-waku-relay" > #< / a >
< / h1 >
2021-12-10 15:46:13 +00:00
< 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 >
2022-01-11 09:09:21 +00:00
< h1 id = "installation" >
Installation
< a class = "anchor" href = "#installation" > #< / a >
< / h1 >
2021-12-10 15:46:13 +00:00
< p > You can install < a href = "https://npmjs.com/package/js-waku" > js-waku< / a > using your favorite package manager:< / p >
2022-01-11 09:09:21 +00:00
< div class = "highlight" > < pre tabindex = "0" 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
< a class = "anchor" href = "#create-waku-instance" > #< / a >
< / h1 >
2021-12-10 15:46:13 +00:00
< p > In order to interact with the Waku network, you first need a Waku instance:< / p >
2022-01-27 00:19:14 +00:00
< div class = "highlight" > < pre tabindex = "0" 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 > ;
2021-12-10 15:46:13 +00:00
2022-01-27 00:19:14 +00:00
< span style = "color:#66d9ef" > const< / span > < span style = "color:#a6e22e" > waku< / span > < span style = "color:#f92672" > =< / span > < span style = "color:#66d9ef" > 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" > default< / span > < span style = "color:#f92672" > :< / span > < span style = "color:#66d9ef" > true< / span > } });
2021-12-10 15:46:13 +00:00
< / 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 >
2022-01-27 00:19:14 +00:00
< div class = "highlight" > < pre tabindex = "0" 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 > ;
2021-12-10 15:46:13 +00:00
2022-01-11 09:09:21 +00:00
< span style = "color:#66d9ef" > const< / span > < span style = "color:#a6e22e" > waku< / span > < span style = "color:#f92672" > =< / span > < span style = "color:#66d9ef" > await< / span > < span style = "color:#a6e22e" > Waku< / span > .< span style = "color:#a6e22e" > create< / span > ({
2021-12-10 15:46:13 +00:00
< span style = "color:#a6e22e" > bootstrap< / span > < span style = "color:#f92672" > :< / span > [
2022-01-27 00:19:14 +00:00
< 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 > ,
],
2021-12-10 15:46:13 +00:00
});
2022-01-11 09:09:21 +00:00
< / code > < / pre > < / div > < h1 id = "wait-to-be-connected" >
Wait to be connected
< a class = "anchor" href = "#wait-to-be-connected" > #< / a >
< / h1 >
2021-12-10 15:46:13 +00:00
< 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 >
2022-01-11 09:09:21 +00:00
< div class = "highlight" > < pre tabindex = "0" 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" > await< / span > < span style = "color:#a6e22e" > waku< / span > .< span style = "color:#a6e22e" > waitForConnectedPeer< / span > ();
2021-12-10 15:46:13 +00:00
< / code > < / pre > < / div > < p > The returned < code > Promise< / code > will resolve once you are connected to a Waku Relay peer.< / p >
2022-01-11 09:09:21 +00:00
< h1 id = "receive-messages" >
Receive messages
< a class = "anchor" href = "#receive-messages" > #< / a >
< / h1 >
2021-12-10 15:46:13 +00:00
< p > To receive messages for your app,
you need to register an observer on relay for your app’ s content topic:< / p >
2022-01-11 09:09:21 +00:00
< div class = "highlight" > < pre tabindex = "0" 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 > ) => {
2021-12-10 15:46:13 +00:00
< 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 > );
};
2022-01-27 00:19:14 +00:00
< 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 > ]);
2022-01-11 09:09:21 +00:00
< / code > < / pre > < / div > < h1 id = "send-messages" >
Send Messages
< a class = "anchor" href = "#send-messages" > #< / a >
< / h1 >
2021-12-10 15:46:13 +00:00
< 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 >
2022-01-27 00:19:14 +00:00
< div class = "highlight" > < pre tabindex = "0" 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 > ;
2021-12-10 15:46:13 +00:00
2022-01-27 00:19:14 +00:00
< span style = "color:#66d9ef" > const< / span > < span style = "color:#a6e22e" > wakuMessage< / span > < span style = "color:#f92672" > =< / span > < span style = "color:#66d9ef" > 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 >
);
2021-12-10 15:46:13 +00:00
< / 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 >
2022-01-11 09:09:21 +00:00
< div class = "highlight" > < pre tabindex = "0" 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" > 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
< a class = "anchor" href = "#use-protobuf" > #< / a >
< / h1 >
2021-12-10 15:46:13 +00:00
< 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 >
2022-01-11 09:09:21 +00:00
< div class = "highlight" > < pre tabindex = "0" style = "color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4" > < code class = "language-js" data-lang = "js" > {
2021-12-10 15:46:13 +00:00
< 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 >
2022-01-11 09:09:21 +00:00
< h2 id = "install-protobuf-library" >
Install Protobuf Library
< a class = "anchor" href = "#install-protobuf-library" > #< / a >
< / h2 >
2021-12-10 15:46:13 +00:00
< p > First, install protons:< / p >
2022-01-11 09:09:21 +00:00
< div class = "highlight" > < pre tabindex = "0" 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
< a class = "anchor" href = "#protobuf-definition" > #< / a >
< / h2 >
2021-12-10 15:46:13 +00:00
< p > Then define the simple chat message:< / p >
2022-01-27 00:19:14 +00:00
< div class = "highlight" > < pre tabindex = "0" 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 > ;
2021-12-10 15:46:13 +00:00
< 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 >
2022-01-11 09:09:21 +00:00
< h2 id = "encode-messages" >
Encode Messages
< a class = "anchor" href = "#encode-messages" > #< / a >
< / h2 >
2021-12-10 15:46:13 +00:00
< 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 >
2022-01-11 09:09:21 +00:00
< div class = "highlight" > < pre tabindex = "0" 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 > ({
2021-12-10 15:46:13 +00:00
< span style = "color:#a6e22e" > timestamp< / span > < span style = "color:#f92672" > :< / span > Date.< span style = "color:#a6e22e" > now< / span > (),
2022-01-27 00:19:14 +00:00
< span style = "color:#a6e22e" > text< / span > < span style = "color:#f92672" > :< / span > < span style = "color:#e6db74" > " Here is a message" < / span > ,
2021-12-10 15:46:13 +00:00
});
< / code > < / pre > < / div > < p > Then, wrap it in a Waku Message:< / p >
2022-01-11 09:09:21 +00:00
< div class = "highlight" > < pre tabindex = "0" 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:#66d9ef" > 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 > );
2021-12-10 15:46:13 +00:00
< / code > < / pre > < / div > < p > Now, you can send the message over Waku Relay the same way than before:< / p >
2022-01-11 09:09:21 +00:00
< div class = "highlight" > < pre tabindex = "0" 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" > 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
< a class = "anchor" href = "#decode-messages" > #< / a >
< / h2 >
2021-12-10 15:46:13 +00:00
< p > To decode the messages received over Waku Relay,
you need to extract the protobuf payload and decode it using < code > protons< / code > .< / p >
2022-01-11 09:09:21 +00:00
< div class = "highlight" > < pre tabindex = "0" 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 > ) => {
2021-12-10 15:46:13 +00:00
< 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 >
2022-01-27 00:19:14 +00:00
< div class = "highlight" > < pre tabindex = "0" 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 > ]);
2022-01-11 09:09:21 +00:00
< / code > < / pre > < / div > < h1 id = "conclusion" >
Conclusion
< a class = "anchor" href = "#conclusion" > #< / a >
< / h1 >
2021-12-10 15:46:13 +00:00
< p > That is it! Now, you know how to send and receive messages over Waku using the Waku Relay protocol.< / p >
< p > Here is the final code:< / p >
2022-01-27 00:19:14 +00:00
< div class = "highlight" > < pre tabindex = "0" 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 > ;
2021-12-10 15:46:13 +00:00
< 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 > );
2022-01-11 09:09:21 +00:00
< span style = "color:#66d9ef" > const< / span > < span style = "color:#a6e22e" > wakuNode< / span > < span style = "color:#f92672" > =< / span > < span style = "color:#66d9ef" > await< / span > < span style = "color:#a6e22e" > Waku< / span > .< span style = "color:#a6e22e" > create< / span > ();
2021-12-10 15:46:13 +00:00
2022-01-11 09:09:21 +00:00
< span style = "color:#66d9ef" > const< / span > < span style = "color:#a6e22e" > nodes< / span > < span style = "color:#f92672" > =< / span > < span style = "color:#66d9ef" > await< / span > < span style = "color:#a6e22e" > getBootstrapNodes< / span > ();
< span style = "color:#66d9ef" > 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 > )));
2021-12-10 15:46:13 +00:00
< 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 > );
};
2022-01-27 00:19:14 +00:00
< 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 > ]);
2021-12-10 15:46:13 +00:00
< 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 > (),
2022-01-27 00:19:14 +00:00
< span style = "color:#a6e22e" > text< / span > < span style = "color:#f92672" > :< / span > < span style = "color:#e6db74" > " Here is a message" < / span > ,
2021-12-10 15:46:13 +00:00
});
2022-01-11 09:09:21 +00:00
< span style = "color:#66d9ef" > const< / span > < span style = "color:#a6e22e" > wakuMessage< / span > < span style = "color:#f92672" > =< / span > < span style = "color:#66d9ef" > 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:#66d9ef" > 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 > );
2021-12-10 15:46:13 +00:00
< / code > < / pre > < / div > < / article >
< footer class = "book-footer" >
< div class = "flex flex-wrap justify-between" >
2022-01-27 00:19:14 +00:00
< div > < a class = "flex align-center" href = "https://github.com/vacp2p/docs.wakuconnect.dev/commit/41bc0a9d8058006de8bf56562b5ac5e50ab00a2f" title = 'Last modified by Franck R | Jan 24, 2022' target = "_blank" rel = "noopener" >
2021-12-10 15:46:13 +00:00
< img src = "/svg/calendar.svg" class = "book-icon" alt = "Calendar" / >
2022-01-24 00:55:16 +00:00
< span > Jan 24, 2022< / span >
2021-12-10 15:46:13 +00:00
< / a >
< / div >
< div >
2022-01-10 15:07:23 +00:00
< a class = "flex align-center" href = "https://github.com/vacp2p/docs.wakuconnect.dev/edit/develop/content/docs/guides/02_relay_receive_send_messages.md" target = "_blank" rel = "noopener" >
2021-12-10 15:46:13 +00:00
< img src = "/svg/edit.svg" class = "book-icon" alt = "Edit" / >
< span > Edit this page< / span >
< / a >
< / div >
< / div >
2022-01-11 09:09:21 +00:00
< script > ( function ( ) { function a ( c ) { const a = window . getSelection ( ) , b = document . createRange ( ) ; b . selectNodeContents ( c ) , a . removeAllRanges ( ) , a . addRange ( b ) } document . querySelectorAll ( "pre code" ) . forEach ( b => { b . addEventListener ( "click" , function ( c ) { a ( b . parentElement ) , navigator . clipboard && navigator . clipboard . writeText ( b . parentElement . textContent ) } ) } ) } ) ( ) < / script >
2021-12-10 15:46:13 +00:00
< / 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 >
