450 lines
28 KiB
HTML
450 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html class="h-full" lang="en-US">
|
||
<head>
|
||
|
||
<title>Vac - Presenting JS-Waku: Waku v2 in the Browser</title>
|
||
|
||
|
||
<meta charset="utf-8" />
|
||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||
<title>Vac</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
||
<script async defer src="https://cdn.simpleanalytics.io/hello.js"></script>
|
||
<noscript><img src="https://api.simpleanalytics.io/hello.gif" alt="" /></noscript>
|
||
|
||
<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
|
||
<script>
|
||
(function (f, a, t, h, o, m) {
|
||
a[h] =
|
||
a[h] ||
|
||
function () {
|
||
(a[h].q = a[h].q || []).push(arguments);
|
||
};
|
||
(o = f.createElement("script")), (m = f.getElementsByTagName("script")[0]);
|
||
o.async = 1;
|
||
o.src = t;
|
||
o.id = "fathom-script";
|
||
m.parentNode.insertBefore(o, m);
|
||
})(document, window, "//fathom.status.im/tracker.js", "fathom");
|
||
fathom("set", "siteId", "YELIA");
|
||
fathom("trackPageview");
|
||
</script>
|
||
<!-- / Fathom -->
|
||
|
||
<!-- Twitter cards -->
|
||
<meta name="twitter:site" content="@vacp2p" />
|
||
<meta name="twitter:creator" content="@franck" />
|
||
<meta name="twitter:title" content="Presenting JS-Waku: Waku v2 in the Browser" />
|
||
|
||
|
||
<meta name="twitter:description" content="JS-Waku is bringing Waku v2 to the browser. Learn what we achieved so far and what is next in our pipeline!" />
|
||
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:image" content="https://vac.dev/assets/img/js-waku-gist.png" />
|
||
|
||
<!-- end of Twitter cards -->
|
||
|
||
<link rel="shortcut icon" href="/assets/img/favicon.png" type="image/png" />
|
||
<link rel="preload" href="/fonts/OpenSans-Regular.woff2" as="font" type="font/woff2" crossorigin />
|
||
<link rel="preload" href="/fonts/OpenSans-SemiBold.woff2" as="font" type="font/woff2" crossorigin />
|
||
<link rel="preload" href="/fonts/OpenSans-SemiBoldItalic.woff2" as="font" type="font/woff2" crossorigin />
|
||
<link rel="stylesheet" href="/assets/css/style.css" />
|
||
</head>
|
||
|
||
<body class="h-full flex flex-col font-body">
|
||
<div class="flex-grow container max-w-screen-xl mx-auto px-5 md:px-12 lg:pt-6">
|
||
<header class="sm:sticky sm:top-0 bg-white z-50">
|
||
<div class="container max-w-screen-xl sm:border-b">
|
||
<div class="nav-section flex justify-between items-center py-3 md:py-5 lg:py-10">
|
||
<div class="logo md:pr-8 l:p-0">
|
||
<a href="/"><img src="/assets/img/logo.png" alt="Vac logo" class="w-9 h-11" /></a>
|
||
</div>
|
||
<div class="flex justify-between items-center w-9/12">
|
||
<div class="burger block sm:hidden z-50">
|
||
<button class="burger__button burger__button--open fixed top-2 right-5 w-12 h-12" type="button" aria-label="Mobile menu button">
|
||
<img class="burger__icon" src="/assets/img/burger.svg" alt="Open menu button" />
|
||
</button>
|
||
<button class="burger__button burger__button--close hidden fixed top-2 right-5 w-12 h-12" type="button" aria-label="Close mobile menu button">
|
||
<img class="burger__icon burger__icon--close" src="/assets/img/close.svg" alt="Close menu button" />
|
||
</button>
|
||
</div>
|
||
|
||
<nav class="nav max-w-screen-xm md:max-w-screen-sl container">
|
||
<ul class="nav__list hidden sm:flex justify-between container text-xs font-semibold md:pr-8 l:p-0">
|
||
<li class="hover:opacity-50">
|
||
|
||
<a class="nav__link" href="/#work">Work</a>
|
||
|
||
</li>
|
||
<li class="hover:opacity-50">
|
||
|
||
<a class="nav__link" href="/#about">About</a>
|
||
|
||
</li>
|
||
<li class="hover:opacity-50">
|
||
|
||
<a class="nav__link" href="/#join">Join Vac</a>
|
||
|
||
</li>
|
||
<li class="hover:opacity-50">
|
||
|
||
<a class="nav__link" href="/research-log">Research log</a>
|
||
|
||
</li>
|
||
<li class="hover:opacity-50">
|
||
|
||
<a class="nav__link" href="/media">Media</a>
|
||
|
||
</li>
|
||
<li class="hover:opacity-50">
|
||
|
||
<a href="https://rfc.vac.dev/" target="_blank" rel="noopener noreferrer">Specs</a>
|
||
|
||
</li>
|
||
<li class="hover:opacity-50">
|
||
|
||
<a href="https://forum.vac.dev/" target="_blank" rel="noopener noreferrer">Forum</a>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</nav>
|
||
|
||
<ul class="social items-center hidden md:flex">
|
||
<li class="pr-5">
|
||
<a href="https://twitter.com/vacp2p" target="_blank" rel="noopener noreferrer">
|
||
<svg width="25" height="21" viewBox="0 0 25 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="hover:opacity-50">
|
||
<path
|
||
d="M24.8872 3.04499C23.9872 3.43499 23.0572 3.70498 22.0672 3.82499C23.0872 3.22498 23.8672 2.26499 24.2272 1.09499C23.2672 1.66499 22.2172 2.05499 21.1072 2.29499C20.2072 1.33499 18.9172 0.734985 17.5072 0.734985C14.7772 0.734985 12.5872 2.95499 12.5872 5.65499C12.5872 6.04499 12.6172 6.40498 12.7072 6.76498C8.62721 6.58498 5.02721 4.60498 2.59721 1.63499C0.857207 4.75498 2.80721 7.33499 4.09721 8.20499C3.31721 8.20499 2.53721 7.96499 1.87721 7.60499C1.87721 10.035 3.58721 12.045 5.80721 12.495C5.32721 12.645 4.24721 12.735 3.58721 12.585C4.21721 14.535 6.04721 15.975 8.17721 16.005C6.49721 17.325 4.03721 18.375 0.887207 18.045C3.07721 19.455 5.65721 20.265 8.44721 20.265C17.5072 20.265 22.4272 12.765 22.4272 6.28499C22.4272 6.07499 22.4272 5.86499 22.3972 5.65499C23.4172 4.90499 24.2572 4.03499 24.8872 3.04499Z"
|
||
fill="#151512"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
<li class="pr-5">
|
||
<a href="https://github.com/vacp2p" target="_blank" rel="noopener noreferrer">
|
||
<svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="hover:opacity-50">
|
||
<path
|
||
d="M12.8857 0.856567C6.26021 0.856567 0.915339 6.20154 0.950043 12.7951C0.9778 18.0687 4.43935 22.5427 9.21766 24.1227C9.81824 24.2327 10.0353 23.864 10.0336 23.5474C10.0321 23.2635 10.0177 22.5129 10.0065 21.5171C6.67274 22.238 5.95552 19.9163 5.95552 19.9163C5.40376 18.5369 4.61433 18.1698 4.61433 18.1698C3.51994 17.4296 4.69151 17.4444 4.69151 17.4444C5.89646 17.5291 6.53549 18.6751 6.53549 18.6751C7.61609 20.4989 9.35182 19.9727 10.0342 19.6665C10.1382 18.8951 10.4459 18.3689 10.7878 18.0702C8.12222 17.7684 5.31483 16.7443 5.29076 12.1708C5.2839 10.8672 5.74629 9.80152 6.50989 8.96619C6.3838 8.66445 5.96641 7.45009 6.61027 5.80766C6.61027 5.80766 7.61658 5.4866 9.9167 7.03094C10.8723 6.76636 11.8976 6.63408 12.9191 6.62962C13.9376 6.63556 14.9658 6.76636 15.9257 7.03242C18.2081 5.48809 19.2163 5.80914 19.2163 5.80914C19.8789 7.45306 19.4743 8.66594 19.3529 8.96767C20.1268 9.80301 20.5959 10.8687 20.6028 12.1723C20.6269 16.7577 17.8272 17.767 15.1558 18.0628C15.5882 18.4314 15.976 19.1597 15.9819 20.273C15.9903 21.8693 15.9821 23.1565 15.9841 23.5474C15.9858 23.867 16.2038 24.2386 16.8122 24.1212C21.5663 22.5397 24.9778 18.0672 24.95 12.7951C24.9153 6.20154 19.5142 0.856567 12.8857 0.856567Z"
|
||
fill="#151512"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://discord.gg/PQFdubGt6d" target="_blank" rel="noopener noreferrer">
|
||
<svg width="25" height="21" viewBox="0 0 25 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="hover:opacity-50">
|
||
<path
|
||
d="M22.7861 9.04256C21.8482 5.74455 20.7799 4.04048 20.7627 4.00991C20.7017 3.93459 19.189 2.104 15.5271 0.75L15.0353 2.0764C16.7774 2.72057 18.0116 3.50643 18.6899 4.01419C16.6599 3.40408 14.2431 3.03041 12.1008 3.03041C9.95851 3.03041 7.53775 3.40408 5.50128 4.01419C6.18496 3.50648 7.42744 2.72057 9.17631 2.0764L8.69846 0.75C5.02238 2.104 3.49044 3.93459 3.42863 4.00991C3.41108 4.04048 2.32479 5.74455 1.35221 9.04256C0.414855 12.2208 0.0415214 16.7045 0.027872 16.8843C0.109225 17.0131 1.97891 20.25 7.12077 20.25L8.43406 18.3536C6.97595 17.964 5.58693 17.3357 4.31689 16.4832L5.10228 15.3069C7.15122 16.6822 9.54509 17.4092 12.0251 17.4092C14.5051 17.4092 16.9067 16.6822 18.9701 15.3069L19.7431 16.4832C18.4641 17.3357 17.0684 17.964 15.6062 18.3536L16.8995 20.25C22.0414 20.25 23.9452 17.0131 24.0279 16.8843C24.0161 16.7045 23.69 12.2208 22.7861 9.04256ZM8.79853 12.7392H7.39228L7.40468 10.3841H8.81093L8.79853 12.7392ZM16.7071 12.7392H15.3008L15.3132 10.3841H16.7195L16.7071 12.7392Z"
|
||
fill="#151512"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="overlay container max-w-screen-sm w-full hidden sm:hidden fixed top-0 right-0 h-screen bg-black bg-opacity-40 z-30">
|
||
<nav class="nav-mobile hidden fixed top-0 right-0 flex flex-col justify-between items-center pt-14 px-12 pb-5 bg-white w-9/12 h-3/4 z-40">
|
||
<ul class="nav__list flex flex-col flex-1 justify-between items-center container box-content w-32 h-auto max-h-nav text-xs font-normal">
|
||
<li class="hover:opacity-50">
|
||
|
||
<a class="nav__link" href="/#work">Work</a>
|
||
|
||
</li>
|
||
<li class="hover:opacity-50">
|
||
|
||
<a class="nav__link" href="/#about">About</a>
|
||
|
||
</li>
|
||
<li class="hover:opacity-50">
|
||
|
||
<a class="nav__link" href="/#join">Join Vac</a>
|
||
|
||
</li>
|
||
<li class="hover:opacity-50">
|
||
|
||
<a class="nav__link" href="/research-log">Research log</a>
|
||
|
||
</li>
|
||
<li class="hover:opacity-50">
|
||
|
||
<a class="nav__link" href="/media">Media</a>
|
||
|
||
</li>
|
||
<li class="hover:opacity-50">
|
||
|
||
<a href="https://rfc.vac.dev/" target="_blank" rel="noopener noreferrer">Specs</a>
|
||
|
||
</li>
|
||
<li class="hover:opacity-50">
|
||
|
||
<a href="https://forum.vac.dev/" target="_blank" rel="noopener noreferrer">Forum</a>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
<ul class="social items-center flex mt-8">
|
||
<li class="pr-5">
|
||
<a href="https://twitter.com/vacp2p" target="_blank" rel="noopener noreferrer">
|
||
<svg width="25" height="21" viewBox="0 0 25 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="hover:opacity-50">
|
||
<path
|
||
d="M24.8872 3.04499C23.9872 3.43499 23.0572 3.70498 22.0672 3.82499C23.0872 3.22498 23.8672 2.26499 24.2272 1.09499C23.2672 1.66499 22.2172 2.05499 21.1072 2.29499C20.2072 1.33499 18.9172 0.734985 17.5072 0.734985C14.7772 0.734985 12.5872 2.95499 12.5872 5.65499C12.5872 6.04499 12.6172 6.40498 12.7072 6.76498C8.62721 6.58498 5.02721 4.60498 2.59721 1.63499C0.857207 4.75498 2.80721 7.33499 4.09721 8.20499C3.31721 8.20499 2.53721 7.96499 1.87721 7.60499C1.87721 10.035 3.58721 12.045 5.80721 12.495C5.32721 12.645 4.24721 12.735 3.58721 12.585C4.21721 14.535 6.04721 15.975 8.17721 16.005C6.49721 17.325 4.03721 18.375 0.887207 18.045C3.07721 19.455 5.65721 20.265 8.44721 20.265C17.5072 20.265 22.4272 12.765 22.4272 6.28499C22.4272 6.07499 22.4272 5.86499 22.3972 5.65499C23.4172 4.90499 24.2572 4.03499 24.8872 3.04499Z"
|
||
fill="#151512"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
<li class="pr-5">
|
||
<a href="https://github.com/vacp2p" target="_blank" rel="noopener noreferrer">
|
||
<svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="hover:opacity-50">
|
||
<path
|
||
d="M12.8857 0.856567C6.26021 0.856567 0.915339 6.20154 0.950043 12.7951C0.9778 18.0687 4.43935 22.5427 9.21766 24.1227C9.81824 24.2327 10.0353 23.864 10.0336 23.5474C10.0321 23.2635 10.0177 22.5129 10.0065 21.5171C6.67274 22.238 5.95552 19.9163 5.95552 19.9163C5.40376 18.5369 4.61433 18.1698 4.61433 18.1698C3.51994 17.4296 4.69151 17.4444 4.69151 17.4444C5.89646 17.5291 6.53549 18.6751 6.53549 18.6751C7.61609 20.4989 9.35182 19.9727 10.0342 19.6665C10.1382 18.8951 10.4459 18.3689 10.7878 18.0702C8.12222 17.7684 5.31483 16.7443 5.29076 12.1708C5.2839 10.8672 5.74629 9.80152 6.50989 8.96619C6.3838 8.66445 5.96641 7.45009 6.61027 5.80766C6.61027 5.80766 7.61658 5.4866 9.9167 7.03094C10.8723 6.76636 11.8976 6.63408 12.9191 6.62962C13.9376 6.63556 14.9658 6.76636 15.9257 7.03242C18.2081 5.48809 19.2163 5.80914 19.2163 5.80914C19.8789 7.45306 19.4743 8.66594 19.3529 8.96767C20.1268 9.80301 20.5959 10.8687 20.6028 12.1723C20.6269 16.7577 17.8272 17.767 15.1558 18.0628C15.5882 18.4314 15.976 19.1597 15.9819 20.273C15.9903 21.8693 15.9821 23.1565 15.9841 23.5474C15.9858 23.867 16.2038 24.2386 16.8122 24.1212C21.5663 22.5397 24.9778 18.0672 24.95 12.7951C24.9153 6.20154 19.5142 0.856567 12.8857 0.856567Z"
|
||
fill="#151512"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://discord.gg/PQFdubGt6d" target="_blank" rel="noopener noreferrer">
|
||
<svg width="25" height="21" viewBox="0 0 25 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="hover:opacity-50">
|
||
<path
|
||
d="M22.7861 9.04256C21.8482 5.74455 20.7799 4.04048 20.7627 4.00991C20.7017 3.93459 19.189 2.104 15.5271 0.75L15.0353 2.0764C16.7774 2.72057 18.0116 3.50643 18.6899 4.01419C16.6599 3.40408 14.2431 3.03041 12.1008 3.03041C9.95851 3.03041 7.53775 3.40408 5.50128 4.01419C6.18496 3.50648 7.42744 2.72057 9.17631 2.0764L8.69846 0.75C5.02238 2.104 3.49044 3.93459 3.42863 4.00991C3.41108 4.04048 2.32479 5.74455 1.35221 9.04256C0.414855 12.2208 0.0415214 16.7045 0.027872 16.8843C0.109225 17.0131 1.97891 20.25 7.12077 20.25L8.43406 18.3536C6.97595 17.964 5.58693 17.3357 4.31689 16.4832L5.10228 15.3069C7.15122 16.6822 9.54509 17.4092 12.0251 17.4092C14.5051 17.4092 16.9067 16.6822 18.9701 15.3069L19.7431 16.4832C18.4641 17.3357 17.0684 17.964 15.6062 18.3536L16.8995 20.25C22.0414 20.25 23.9452 17.0131 24.0279 16.8843C24.0161 16.7045 23.69 12.2208 22.7861 9.04256ZM8.79853 12.7392H7.39228L7.40468 10.3841H8.81093L8.79853 12.7392ZM16.7071 12.7392H15.3008L15.3132 10.3841H16.7195L16.7071 12.7392Z"
|
||
fill="#151512"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
|
||
<main class="bg-white text-black flex flex-col"><section class="container max-w-screen-xl flex flex-col items-center pt-10 pb-0 md:pb-10 lg:pb-0">
|
||
<div class="info-block max-w-680 pb-5 sm:pb-10 overflow-hidden">
|
||
<div class="post mb-10">
|
||
<h1 class="text-xl md:text-xxl mb-5 sm:max-w-md lg:max-w-2xl">Presenting JS-Waku: Waku v2 in the Browser</h1>
|
||
<div>
|
||
<span class="text-s lg:text-base"> 04 Jun 2021 • by </span>
|
||
<a href="/authors/franck" class="text-s lg:text-base font-bold hover:underline">franck</a>
|
||
</div>
|
||
</div>
|
||
<div class="post__content"><p>For the past 3 months, we have been working on bringing Waku v2 to the browser.
|
||
Our aim is to empower dApps with Waku v2, and it led to the creation of a new library.
|
||
We believe now is good time to introduce it!</p>
|
||
|
||
<h2 id="waku-v2">Waku v2</h2>
|
||
|
||
<p>First, let’s review what Waku v2 is and what problem it is trying to solve.</p>
|
||
|
||
<p>Waku v2 comes from a need to have a more scalable, better optimised solution for the Status app to achieve decentralised
|
||
communications on resource restricted devices (i.e., mobile phones).</p>
|
||
|
||
<p>The Status chat feature was initially built over Whisper.
|
||
However, Whisper has a number of caveats which makes it inefficient for mobile phones.
|
||
For example, with Whisper, all devices are receiving all messages which is not ideal for limited data plans.</p>
|
||
|
||
<p>To remediate this, a Waku mode (then Waku v1), based on devp2p, was introduced.
|
||
To further enable web and restricted resource environments, Waku v2 was created based on libp2p.
|
||
The migration of the Status chat feature to Waku v2 is currently in progress.</p>
|
||
|
||
<p>We see the need of such solution in the broader Ethereum ecosystem, beyond Status.
|
||
This is why we are building Waku v2 as a decentralised communication platform for all to use and build on.
|
||
If you want to read more about Waku v2 and what it aims to achieve,
|
||
checkout <a href="/waku-v2-plan">What’s the Plan for Waku v2?</a>.</p>
|
||
|
||
<p>Since last year, we have been busy defining and implementing Waku v2 protocols in <a href="https://github.com/status-im/nim-waku">nim-waku</a>,
|
||
from which you can build <a href="https://github.com/status-im/nim-waku#wakunode">wakunode2</a>.
|
||
Wakunode2 is an adaptive and modular Waku v2 node,
|
||
it allows users to run their own node and use the Waku v2 protocols they need.
|
||
The nim-waku project doubles as a library, that can be used to add Waku v2 support to native applications.</p>
|
||
|
||
<h2 id="waku-v2-in-the-browser">Waku v2 in the browser</h2>
|
||
|
||
<p>We believe that dApps and wallets can benefit from the Waku network in several ways.
|
||
For some dApps, it makes sense to enable peer-to-peer communications.
|
||
For others, machine-to-machine communications would be a great asset.
|
||
For example, in the case of a DAO,
|
||
Waku could be used for gas-less voting.
|
||
Enabling the DAO to notify their users of a new vote,
|
||
and users to vote without interacting with the blockchain and spending gas.</p>
|
||
|
||
<p><a href="https://github.com/status-im/murmur">Murmur</a> was the first attempt to bring Whisper to the browser,
|
||
acting as a bridge between devp2p and libp2p.
|
||
Once Waku v2 was started and there was a native implementation on top of libp2p,
|
||
a <a href="https://github.com/vacp2p/waku-web-chat">chat POC</a> was created to demonstrate the potential of Waku v2
|
||
in web environment.
|
||
It showed how using js-libp2p with few modifications enabled access to the Waku v2 network.
|
||
There was still some unresolved challenges.
|
||
For example, nim-waku only support TCP connections which are not supported by browser applications.
|
||
Hence, to connect to other node, the POC was connecting to a NodeJS proxy application using websockets,
|
||
which in turn could connect to wakunode2 via TCP.</p>
|
||
|
||
<p>However, to enable dApp and Wallet developers to easily integrate Waku in their product,
|
||
we need to give them a library that is easy to use and works out of the box:
|
||
introducing <a href="https://github.com/status-im/js-waku">JS-Waku</a>.</p>
|
||
|
||
<p>JS-Waku is a JavaScript library that allows your dApp, wallet or other web app to interact with the Waku v2 network.
|
||
It is available right now on <a href="https://www.npmjs.com/package/js-waku">npm</a>:</p>
|
||
|
||
<p><code class="highlighter-rouge">npm install js-waku</code>.</p>
|
||
|
||
<p>As it is written in TypeScript, types are included in the npm package to allow easy integration with TypeScript, ClojureScript and other typed languages that compile to JavaScript.</p>
|
||
|
||
<p>Key Waku v2 protocols are already available:
|
||
<a href="https://rfc.vac.dev/spec/14/">message</a>, <a href="https://rfc.vac.dev/spec/13/">store</a>, <a href="https://rfc.vac.dev/spec/11/">relay</a> and <a href="https://rfc.vac.dev/spec/19/">light push</a>,
|
||
enabling your dApp to:</p>
|
||
|
||
<ul>
|
||
<li>Send and receive near-instant messages on the Waku network (relay),</li>
|
||
<li>Query nodes for messages that may have been missed, e.g. due to poor cellular network (store),</li>
|
||
<li>Send messages with confirmations (light push).</li>
|
||
</ul>
|
||
|
||
<p>JS-Waku needs to operate in the same context from which Waku v2 was born:
|
||
a restricted environment were connectivity or uptime are not guaranteed;
|
||
JS-Waku brings Waku v2 to the browser.</p>
|
||
|
||
<h2 id="achievements-so-far">Achievements so far</h2>
|
||
|
||
<p>We focused the past month on developing a <a href="https://status-im.github.io/js-waku/">ReactJS Chat App</a>.
|
||
The aim was to create enough building blocks in JS-Waku to enable this showcase web app that
|
||
we now <a href="https://github.com/status-im/nim-waku/issues/399">use for dogfooding</a> purposes.</p>
|
||
|
||
<p>Most of the effort was on getting familiar with the <a href="https://github.com/libp2p/js-libp2p">js-libp2p</a> library
|
||
that we heavily rely on.
|
||
JS-Waku is the second implementation of Waku v2 protocol,
|
||
so a lot of effort on interoperability was needed.
|
||
For example, to ensure compatibility with the nim-waku reference implementation,
|
||
we run our <a href="https://github.com/status-im/js-waku/blob/90c90dea11dfd1277f530cf5d683fb92992fe141/src/lib/waku_relay/index.spec.ts#L137">tests against wakunode2</a> as part of the CI.</p>
|
||
|
||
<p>This interoperability effort helped solidify the current Waku v2 specifications:
|
||
By clarifying the usage of topics
|
||
(<a href="https://github.com/vacp2p/rfc/issues/327">#327</a>, <a href="https://github.com/vacp2p/rfc/pull/383">#383</a>),
|
||
fix discrepancies between specs and nim-waku
|
||
(<a href="https://github.com/status-im/nim-waku/issues/418">#418</a>, <a href="https://github.com/status-im/nim-waku/issues/419">#419</a>)
|
||
and fix small nim-waku & nim-libp2p bugs
|
||
(<a href="https://github.com/status-im/nim-waku/issues/411">#411</a>, <a href="https://github.com/status-im/nim-waku/issues/439">#439</a>).</p>
|
||
|
||
<p>To fully access the waku network, JS-Waku needs to enable web apps to connect to nim-waku nodes.
|
||
A standard way to do so is using secure websockets as it is not possible to connect directly to a TCP port from the browser.
|
||
Unfortunately websocket support is not yet available in <a href="https://github.com/status-im/nim-libp2p/issues/407">nim-libp2p</a> so
|
||
we ended up deploying <a href="https://github.com/novnc/websockify">websockify</a> alongside wakunode2 instances.</p>
|
||
|
||
<p>As we built the <a href="https://github.com/status-im/js-waku/tree/main/examples/web-chat">web chat app</a>,
|
||
we were able to fine tune the API to provide a simple and succinct interface.
|
||
You can start a node, connect to other nodes and send a message in less than ten lines of code:</p>
|
||
|
||
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Waku</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">js-waku</span><span class="dl">'</span><span class="p">;</span>
|
||
|
||
<span class="kd">const</span> <span class="nx">waku</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">Waku</span><span class="p">.</span><span class="nx">create</span><span class="p">({});</span>
|
||
|
||
<span class="kd">const</span> <span class="nx">nodes</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">getStatusFleetNodes</span><span class="p">();</span>
|
||
<span class="k">await</span> <span class="nb">Promise</span><span class="p">.</span><span class="nx">all</span><span class="p">(</span><span class="nx">nodes</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">addr</span><span class="p">)</span> <span class="o">=></span> <span class="nx">waku</span><span class="p">.</span><span class="nx">dial</span><span class="p">(</span><span class="nx">addr</span><span class="p">)));</span>
|
||
|
||
<span class="kd">const</span> <span class="nx">msg</span> <span class="o">=</span> <span class="nx">WakuMessage</span><span class="p">.</span><span class="nx">fromUtf8String</span><span class="p">(</span><span class="dl">"</span><span class="s2">Here is a message!</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">/my-cool-app/1/my-use-case/proto</span><span class="dl">"</span><span class="p">)</span>
|
||
<span class="k">await</span> <span class="nx">waku</span><span class="p">.</span><span class="nx">relay</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="nx">msg</span><span class="p">);</span>
|
||
</code></pre></div></div>
|
||
|
||
<p>We have also put a bounty at <a href="https://0xhack.dev/">0xHack</a> for using JS-Waku
|
||
and running a <a href="https://www.youtube.com/watch?v=l77j0VX75QE">workshop</a>.
|
||
We were thrilled to have a couple of hackers create new software using our libraries.
|
||
One of the projects aimed to create a decentralised, end-to-end encrypted messenger app,
|
||
similar to what the <a href="https://rfc.vac.dev/spec/20/">ETH-DM</a> protocol aims to achieve.
|
||
Another project was a decentralised Twitter platform.
|
||
Such projects allow us to prioritize the work on JS-Waku and understand how DevEx can be improved.</p>
|
||
|
||
<p>As more developers use JS-Waku, we will evolve the API to allow for more custom and fine-tune usage of the network
|
||
while preserving this out of the box experience.</p>
|
||
|
||
<h2 id="whats-next">What’s next?</h2>
|
||
|
||
<p>Next, we are directing our attention towards <a href="https://github.com/status-im/js-waku/issues/68">Developer Experience</a>.
|
||
We already have <a href="https://www.npmjs.com/package/js-waku">documentation</a> available but we want to provide more:
|
||
<a href="https://github.com/status-im/js-waku/issues/56">Tutorials</a>, various examples
|
||
and showing how <a href="https://github.com/status-im/js-waku/issues/72">JS-Waku can be used with Web3</a>.</p>
|
||
|
||
<p>By prioritizing DevEx we aim to enable JS-Waku integration in dApps and wallets.
|
||
We think JS-Waku builds a strong case for machine-to-machine (M2M) communications.
|
||
The first use cases we are looking into are dApp notifications:
|
||
Enabling dApp to notify their user directly in their wallets!
|
||
Leveraging Waku as a decentralised infrastructure and standard so that users do not have to open their dApp to be notified
|
||
of events such as DAO voting.</p>
|
||
|
||
<p>We already have some POC in the pipeline to enable voting and polling on the Waku network,
|
||
allowing users to save gas by <strong>not</strong> broadcasting each individual vote on the blockchain.</p>
|
||
|
||
<p>To facilitate said applications, we are looking at improving integration with Web3 providers by providing examples
|
||
of signing, validating, encrypting and decrypting messages using Web3.
|
||
Waku is privacy conscious, so we will also provide signature and encryption examples decoupled from users’ Ethereum identity.</p>
|
||
|
||
<p>As you can read, we have grand plans for JS-Waku and Waku v2.
|
||
There is a lot to do, and we would love some help so feel free to
|
||
check out the new role in our team:
|
||
<a href="https://status.im/our_team/jobs.html?gh_jid=3157894">js-waku: Wallet & Dapp Integration Developer</a>.
|
||
We also have a number of <a href="https://status.im/our_team/jobs.html">positions</a> open to work on Waku protocol and nim-waku.</p>
|
||
|
||
<p>If you are as excited as us by JS-Waku, why not build a dApp with it?
|
||
You can find documentation on the <a href="https://www.npmjs.com/package/js-waku">npmjs page</a>.</p>
|
||
|
||
<p>Whether you are a developer, you can come chat with us using <a href="https://status-im.github.io/js-waku/">WakuJS Web Chat</a>
|
||
or <a href="https://github.com/status-im/nim-waku/blob/master/docs/tutorial/chat2.md">chat2</a>.
|
||
You can get support in #dappconnect-support on <a href="https://discord.gg/j5pGbn7MHZ">Vac Discord</a> or <a href="https://t.me/dappconnectsupport">Telegram</a>.
|
||
If you have any ideas on how Waku could enable a specific dapp or use case, do share, we are always keen to hear it.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
<footer class="footer bg-black flex flex-shrink-0 justify-center">
|
||
<div class="container max-w-screen-xl flex sl:justify-between lm:justify-start p-5 md:px-12 md:pt-5 lg:py-10">
|
||
<div class="logo mr-10 sm:mr-0 sm:w-2/12 lg:w-3/12">
|
||
<a href="/"><img src="/assets/img/logo.png" alt="Vac logo" class="w-9 h-11" /></a>
|
||
</div>
|
||
|
||
<div class="flex flex-col xm:flex-row xm:justify-between sm:w-10/12 lg:w-9/12">
|
||
<p class="hidden sl:inline-block sl:mr-10 text-xxs lg:text-base text-white opacity-75">Vac researches peer-to-peer, private, censorship resistant communication</p>
|
||
<nav class="flex max-w-xs mr-0 xm:mr-5 l:mr-32 mb-5 sm:mb-0">
|
||
<div class="flex">
|
||
<div class="flex flex-col mr-5 sm:mr-10 sl:mr-14">
|
||
<p class="text-xxs lg:text-base text-white opacity-75 mb-5 lg:mb-8">Research</p>
|
||
<ul>
|
||
<li class="text-xxs lg:text-base text-white hover:opacity-50 mb-5">
|
||
<a href="/research-log" target="_blank" rel="noopener noreferrer">Log</a>
|
||
</li>
|
||
<li class="text-xxs lg:text-base text-white hover:opacity-50 mb-5">
|
||
<a href="https://rfc.vac.dev/" target="_blank" rel="noopener noreferrer">Specs</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
<div class="flex flex-col sl:mr-14">
|
||
<p class="text-xxs lg:text-base text-white opacity-75 mb-5 lg:mb-8">Socials</p>
|
||
<ul>
|
||
<li class="text-xxs lg:text-base text-white hover:opacity-50 mb-5">
|
||
<a href="https://twitter.com/vacp2p" target="_blank" rel="noopener noreferrer">Twitter</a>
|
||
</li>
|
||
<li class="text-xxs lg:text-base text-white hover:opacity-50 mb-5">
|
||
<a href="https://discord.gg/PQFdubGt6d" target="_blank" rel="noopener noreferrer">Discord</a>
|
||
</li>
|
||
<li class="text-xxs lg:text-base text-white hover:opacity-50 mb-5">
|
||
<a href="https://t.me/vacp2p" target="_blank" rel="noopener noreferrer">Telegram</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
</div></nav></div>
|
||
</div>
|
||
</footer>
|
||
<script src="/assets/js/main.min.js"></script>
|
||
<script src="/assets/js/smooth-scroll.min.js"></script>
|
||
|
||
</body>
|
||
</html>
|