mirror of
https://github.com/acid-info/docs.wakuconnect.dev.git
synced 2025-02-24 07:28:28 +00:00
820 lines
31 KiB
HTML
820 lines
31 KiB
HTML
<!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’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.">
|
|
<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’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." />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:url" content="https://docs.wakuconnect.dev/docs/guides/02_relay_receive_send_messages/" /><meta property="article:section" content="docs" />
|
|
<meta property="article:published_time" content="2021-12-09T14:00:00+01:00" />
|
|
<meta property="article:modified_time" content="2022-01-31T10:39:20+11:00" />
|
|
|
|
<title>Receive and Send Messages Using Waku Relay | Waku Connect Docs</title>
|
|
<link rel="manifest" href="/manifest.json">
|
|
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
|
<link rel="stylesheet" href="/book.min.89a77f7e702a8626749b948bbfb01109823daf6c1246ca407d1378833494c402.css" integrity="sha256-iad/fnAqhiZ0m5SLv7ARCYI9r2wSRspAfRN4gzSUxAI=" crossorigin="anonymous">
|
|
<script defer src="/flexsearch.min.js"></script>
|
|
<script defer src="/en.search.min.529c80d1e911ec8f549a29bff1dd2c31fc706122b64f877c8a14e63ba53421c7.js" integrity="sha256-UpyA0ekR7I9Umim/8d0sMfxwYSK2T4d8ihTmO6U0Icc=" 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>Waku Connect 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.wakuconnect.dev/es/">
|
|
Español
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="https://docs.wakuconnect.dev/pt/">
|
|
Português
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://docs.wakuconnect.dev/docs/use_cases/" class="">Use Cases</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://docs.wakuconnect.dev/docs/presentations/" class="">Presentations & Videos</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://docs.wakuconnect.dev/docs/guides/" class="">Guides</a>
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/" class="">Receive and Send Messages Using Waku Relay With ReactJS</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://docs.wakuconnect.dev/docs/guides/08_reactjs_store/" class="">Retrieve Messages Using Waku Store With ReactJS</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://docs.wakuconnect.dev/docs/guides/09_debug/" class="">How to Debug your Waku dApp</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/02_connect_wallet/" class="">Connect to the Ethereum Wallet</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/03_create-a-poll_button/" class="">Create-A-Poll Button</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/04_poll_creation/" class="">Poll Creation Component</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://docs.wakuconnect.dev/docs/guides/vote_poll_sdk/poll_sdk/05_poll_list/" class="">Poll List Component</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://docs.wakuconnect.dev/docs/examples/" class="">Examples</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://docs.wakuconnect.dev/docs/crypto_libraries/" class="">Cryptographic Libraries</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://docs.wakuconnect.dev/docs/waku_protocols/" class="">Implemented Waku Protocols</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="https://js-waku.wakuconnect.dev/" target="_blank" rel="noopener">
|
|
JS-Waku API Doc
|
|
</a>
|
|
</li>
|
|
|
|
<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 a=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(b){localStorage.setItem("menu.scrollTop",a.scrollTop)}),a.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
|
|
<a class="anchor" href="#receive-and-send-messages-using-waku-relay">#</a>
|
|
</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
|
|
<a class="anchor" href="#installation">#</a>
|
|
</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 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>
|
|
<p>In order to interact with the Waku network, you first need a Waku instance:</p>
|
|
<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>;
|
|
|
|
<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> } });
|
|
</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 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>;
|
|
|
|
<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:#a6e22e">peers</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
|
|
<a class="anchor" href="#wait-to-be-connected">#</a>
|
|
</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 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>();
|
|
</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
|
|
<a class="anchor" href="#receive-messages">#</a>
|
|
</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 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>) => {
|
|
<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
|
|
<a class="anchor" href="#send-messages">#</a>
|
|
</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 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>;
|
|
|
|
<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>
|
|
);
|
|
</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 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>
|
|
<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 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">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
|
|
<a class="anchor" href="#install-protobuf-library">#</a>
|
|
</h2>
|
|
<p>First, install protons:</p>
|
|
<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>
|
|
<p>Then define the simple chat message:</p>
|
|
<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>;
|
|
|
|
<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
|
|
<a class="anchor" href="#encode-messages">#</a>
|
|
</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 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>({
|
|
<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 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>);
|
|
</code></pre></div><p>Now, you can send the message over Waku Relay the same way than before:</p>
|
|
<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>
|
|
<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 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>) => {
|
|
<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 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>]);
|
|
</code></pre></div><h1 id="conclusion">
|
|
Conclusion
|
|
<a class="anchor" href="#conclusion">#</a>
|
|
</h1>
|
|
<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>
|
|
<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>;
|
|
|
|
<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:#66d9ef">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:#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>)));
|
|
|
|
<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:#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>);
|
|
</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.wakuconnect.dev/commit/b8e0400a02fe55879897187c3582d8844fa6a9b2" title='Last modified by Franck R | Jan 30, 2022' target="_blank" rel="noopener">
|
|
<img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
|
|
<span>Jan 30, 2022</span>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
|
|
<div>
|
|
<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">
|
|
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
|
|
<span>Edit this page</span>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
</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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|