2025-09-26 05:25:03 +00:00
<!doctype html>
< html lang = "en-GB" dir = "ltr" class = "docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-undefined" data-has-hydrated = "false" >
< head >
< meta charset = "UTF-8" >
< meta name = "generator" content = "Docusaurus v3.8.1" >
2025-10-03 05:55:52 +00:00
< title data-rh = "true" > Send and Receive Messages in a Reliable Channel | Waku Documentation< / title > < meta data-rh = "true" name = "viewport" content = "width=device-width,initial-scale=1" > < meta data-rh = "true" name = "twitter:card" content = "summary_large_image" > < meta data-rh = "true" property = "og:url" content = "https://docs.waku.org/build/javascript/reliable-channels" > < meta data-rh = "true" property = "og:locale" content = "en_GB" > < meta data-rh = "true" name = "docusaurus_locale" content = "en-GB" > < meta data-rh = "true" name = "docsearch:language" content = "en-GB" > < meta data-rh = "true" name = "keywords" content = "waku, web3" > < meta data-rh = "true" name = "image" content = "https://docs.waku.org/_og/89d1b8545a22cd83375f82f92d0c719d846e0db0.png" > < meta data-rh = "true" name = "docusaurus_version" content = "current" > < meta data-rh = "true" name = "docusaurus_tag" content = "docs-default-current" > < meta data-rh = "true" name = "docsearch:version" content = "current" > < meta data-rh = "true" name = "docsearch:docusaurus_tag" content = "docs-default-current" > < meta data-rh = "true" property = "og:title" content = "Send and Receive Messages in a Reliable Channel | Waku Documentation" > < meta data-rh = "true" name = "description" content = "Learn how to send and receive messages with a convenient SDK that provide various reliable functionalities out-of-the-box." > < meta data-rh = "true" property = "og:description" content = "Learn how to send and receive messages with a convenient SDK that provide various reliable functionalities out-of-the-box." > < link data-rh = "true" rel = "icon" href = "/theme/image/favicon.ico" > < link data-rh = "true" rel = "canonical" href = "https://docs.waku.org/build/javascript/reliable-channels" > < link data-rh = "true" rel = "alternate" href = "https://docs.waku.org/build/javascript/reliable-channels" hreflang = "en-GB" > < link data-rh = "true" rel = "alternate" href = "https://docs.waku.org/build/javascript/reliable-channels" hreflang = "x-default" > < link rel = "alternate icon" type = "image/png" href = "/theme/image/favicon.png" >
< link rel = "icon" type = "image/svg+xml" href = "/theme/image/favicon.svg" > < link rel = "stylesheet" href = "/assets/css/styles.f0961b96.css" >
2025-10-27 23:35:15 +00:00
< script src = "/assets/js/runtime~main.4a8ea766.js" defer = "defer" > < / script >
< script src = "/assets/js/main.cd8c4833.js" defer = "defer" > < / script >
2025-09-26 05:25:03 +00:00
< meta property = "og:image" content = "https://docs.waku.org/_og/89d1b8545a22cd83375f82f92d0c719d846e0db0.png" > < meta name = "twitter:image" content = "https://docs.waku.org/_og/89d1b8545a22cd83375f82f92d0c719d846e0db0.png" > < / head >
< body class = "navigation-with-keyboard" >
< svg xmlns = "http://www.w3.org/2000/svg" style = "display: none;" > < defs >
< symbol id = "theme-svg-external-link" viewBox = "0 0 24 24" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / symbol >
< / defs > < / svg >
< script > ! function ( ) { var t = function ( ) { try { return new URLSearchParams ( window . location . search ) . get ( "docusaurus-theme" ) } catch ( t ) { } } ( ) || function ( ) { try { return window . localStorage . getItem ( "theme" ) } catch ( t ) { } } ( ) ; document . documentElement . setAttribute ( "data-theme" , t || ( window . matchMedia ( "(prefers-color-scheme: dark)" ) . matches ? "dark" : "light" ) ) , document . documentElement . setAttribute ( "data-theme-choice" , t || "system" ) } ( ) , function ( ) { try { const c = new URLSearchParams ( window . location . search ) . entries ( ) ; for ( var [ t , e ] of c ) if ( t . startsWith ( "docusaurus-data-" ) ) { var a = t . replace ( "docusaurus-data-" , "data-" ) ; document . documentElement . setAttribute ( a , e ) } } catch ( t ) { } } ( ) < / script > < div id = "__docusaurus" > < link rel = "preload" as = "image" href = "/theme/image/logo-black.svg" > < link rel = "preload" as = "image" href = "/theme/image/logo.svg" > < style data-emotion = "css-global 3rtehh" > . lsd-button { width : auto ; cursor : pointer ; padding : 6 px 24 px ; } . lsd-button--disabled { cursor : default ; opacity : 0.34 ; } . lsd-button--large { padding : 10 px 40 px ; } . lsd-button--medium { padding : 6 px 24 px ; } . lsd-button--small { padding : 6 px 12 px ; } . lsd-button : hover : not ( . lsd-button--disabled ) . lsd-button__text { -webkit- text-decoration : underline ; text-decoration : underline ; } . lsd-button--with-icon { display : -webkit- box ; display : -webkit- flex ; display : -ms- flexbox ; display : flex ; -webkit- align-items : center ; -webkit- box-align : center ; -ms- flex-align : center ; align-items : center ; } . lsd-button__icon { display : -webkit- box ; display : -webkit- flex ; display : -ms- flexbox ; display : flex ; -webkit- box-pack : center ; -ms- flex-pack : center ; -webkit- justify-content : center ; justify-content : center ; -webkit- align-items : center ; -webkit- box-align : center ; -ms- flex-align : center ; align-items : center ; height : 100 % ; } . lsd-button--large . lsd-button--with-icon { padding : 10 px 0 px 10 px 18 px ; } . lsd-button--large . lsd-button--with-icon . lsd-button__icon { width : 42 px ; } . lsd-button--medium . lsd-button--with-icon { padding : 6 px 0 px 6 px 14 px ; } . lsd-button--medium . lsd-button--with-icon . lsd-button__icon { width : 38 px ; } . lsd-button--small . lsd-button--with-icon { padding : 6 px 0 px 6 px 12 px ; } . lsd-button--small . lsd-button--with-icon . lsd-button__icon { width : 34 px ; } . lsd-button--outlined { background : none ; border : 1 px solid rgb ( var ( - - lsd - border - primary ) ) ; } . lsd-button--outlined . lsd-button__text { color : rgb ( var ( - - lsd - text - primary ) ) ; } . lsd-button--filled { background : rgb ( var ( - - lsd - surface - secondary ) ) ; border : 1 px solid rgb ( var ( - - lsd - border - primary ) ) ; } . lsd-button--filled . lsd-button__text { color : rgb ( var ( - - lsd - text - secondary ) ) ; } < / style > < style data-emotion = "css-global 10bahxd" > . lsd-icon-button { display : -webkit- box ; display : -webkit- flex ; display : -ms- flexbox ; display : flex ; -webkit- flex-direction : row ; -ms- flex-direction : row ; flex-direction : row ; -webkit- align-items : center ; -webkit- box-align : center ; -ms- flex-align : center ; align-items : center ; -webkit- box-pack : center ; -ms- flex-pack : center ; -webkit- justify-content : center ; justify-content : center ; cursor : pointer ; background : none ; padding : 0 ; border : 1 px solid rgb ( var ( - - lsd - border - primary ) ) ; } . lsd-icon-button--filled { background-color : rgb ( var ( - - lsd - icon - primary ) ) ; } . lsd-icon-button--filled svg { --lsd-icon-primary : var ( - - lsd - icon - secondary ) ; } . lsd-icon-button--disabled { opacity : 0.34 ; cursor : default ; } . lsd-icon-button--large { width : 40 px ; height : 40 px ; } . lsd-icon-button--medium { width : 32 px ; height : 32 px ; } . lsd-icon-button--small { width : 28 px ; height : 28 px ; } < / style > < style data-emotion = "css-global icqph9" > . lsd-icon-button-group { display : -webkit- box ; display : -webkit- flex ; display : -ms- flexbox ; display : flex ; -webkit- flex-direction : row ; -ms- flex-direction : row ; flex-direction : row ; } . lsd-icon-button-group--outlined . lsd-icon-button : not ( : last-child ) { border-right : none ; } < / style > < style data-emotion = "css-global 1f43ub2" > b o d y * { f o n t - f a m i l y : v a r ( - - l s d - t y p o g r a p h y - g e n e r i c - f o n t - f a m i l y ) ; } . l s d - t y p o g r a p h y { c o l o r : r g b ( v a r ( - - l s d - t e x t - p r i m a r y ) ) ; } . l s d - t y p o g r a p h y - - s a n s - s e r i f , . l s d - t y p o g r a p h y - - s a n s - s e r i f * { f o n t - f a m i l y : s a n s - s e r i f ; } . l s d - t y p o g r a p h y - - s e r i f , . l s d - t y p o g r a p h y - - s e r i f * { f o n t - f a m i l y : s e r i f ; } . l s d - t y p o g r a p h y - - m o n o s p a c e , . l s d - t y p o g r a p h y - - m o n o s p a c e * { f o n t - f a m i l y : m o n o s p a c e ; } . l s d - t y p o g r a p h y - - d i s p l a y 1 { c o l o r : r g b ( v a r ( - - l s d - t e x t - p r i m a r y ) ) ; f o n t - w e i g h t : v a r ( - - l s d - d i s p l a y 1 - f o n t W e i g h t ) ; f o n t - s i z e : v a r ( - - l s d
.lsd-dropdown--error
) .lsd-dropdown__trigger:hover .lsd-dropdown__option-label,.lsd-dropdown:not(.lsd-dropdown--disabled):not(
.lsd-dropdown--error
2025-10-27 23:35:15 +00:00
) .lsd-dropdown__trigger:focus .lsd-dropdown__option-label{-webkit-text-decoration:underline;text-decoration:underline;}.lsd-dropdown__label{display:block;}.lsd-dropdown__button-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}.lsd-dropdown__trigger{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;border:none;cursor:pointer;background:none;}.lsd-dropdown__trigger:focus{outline:none;}.lsd-dropdown__option-label{cursor:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.lsd-dropdown__icons{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;gap:8px;}.lsd-dropdown__icon{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.lsd-dropdown__supporting-text{margin:6px 14px;}.lsd-dropdown--error .lsd-dropdown__option-label{-webkit-text-decoration:line-through;text-decoration:line-through;}.lsd-dropdown--disabled{opacity:0.34;cursor:initial;}.lsd-dropdown--large{width:208px;}.lsd-dropdown--large.lsd-dropdown--error{width:230px;}.lsd-dropdown--large .lsd-dropdown__label{margin:0 0 6px 18px;}.lsd-dropdown--large .lsd-dropdown__button-container{height:40px;}.lsd-dropdown--large .lsd-dropdown__trigger{padding:10px 0px 10px 18px;}.lsd-dropdown--large .lsd-dropdown__icons{padding:0px 14px;}.lsd-dropdown--medium{width:188px;}.lsd-dropdown--medium.lsd-dropdown--error{width:210px;}.lsd-dropdown--medium .lsd-dropdown__label{margin:0 0 6px 14px;}.lsd-dropdown--medium .lsd-dropdown__button-container{height:32px;}.lsd-dropdown--medium .lsd-dropdown__trigger{padding:6px 0px 6px 14px;}.lsd-dropdown--medium .lsd-dropdown__icons{padding:0px 12px;}.lsd-dropdown--small{width:164px;}.lsd-dropdown--small.lsd-dropdown--error{width:186px;}.lsd-dropdown--small .lsd-dropdown__label{margin:0 0 6px 12px;}.lsd-dropdown--small .lsd-dropdown__button-container{height:28px;}.lsd-dropdown--small .lsd-dropdown__trigger{padding:6px 0px 6px 12px;}.lsd-dropdown--small .lsd-dropdown__icons{padding:0px 10px;}.lsd-dropdown--outlined .lsd-dropdown__button-container{border:1px solid rgb(var(--lsd-border-primary));}.lsd-dropdown--underlined .lsd-dropdown__button-container{border:1px solid transparent;border-bottom:1px solid rgb(var(--lsd-border-primary));}< / style > < style data-emotion = "css-global w2g5fy" > . l s d - d r o p d o w n - i t e m { w i d t h : 1 0 0 % ; b o x - s i z i n g : b o r d e r - b o x ; d i s p l a y : - w e b k i t - b o x ; d i s p l a y : - w e b k i t - f l e x ; d i s p l a y : - m s - f l e x b o x ; d i s p l a y : f l e x ; - w e b k i t - f l e x - d i r e c t i o n : r o w ; - m s - f l e x - d i r e c t i o n : r o w ; f l e x - d i r e c t i o n : r o w ; - w e b k i t - a l i g n - i t e m s : c e n t e r ; - w e b k i t - b o x - a l i g n : c e n t e r ; - m s - f l e x - a l i g n : c e n t e r ; a l i g n - i t e m s : c e n t e r ; b o r d e r : 1 p x s o l i d r g b ( v a r ( - - l s d - b o r d e r - p r i m a r y ) ) ; } . l s d - d r o p d o w n - i t e m : n o t ( . l s d - d r o p d o w n - i t e m - - d i s a b l e d ) { c u r s o r : p o i n t e r ; } . l s d - d r o p d o w n - i t e m : n o t ( . l s d - d r o p d o w n - i t e m - - d i s a b l e d ) : h o v e r , . l s d - d r o p d o w n - i t e m : n o t ( . l s d - d r o p d o w n - i t e m - - d i s a b l e d ) : f o c u s { o u t l i n e : n o n e ; } . l s d - d r o p d o w n - i t e m : n o t ( . l s d - d r o p d o w n - i t e m - - d i s a b l e d ) : h o v e r . l s d - d r o p d o w n - i t e m _ _ l a b e l , . l s d - d r o p d o w n - i t e m : n o t ( . l s d - d r o p d o w n - i t e m - - d i s a b l e d ) : f o c u s . l s d - d r o p d o w n - i t e m _ _ l a b e l { - w e b k i t - t e x t - d e c o r a t i o n : u n d e r l i n e ; t e x t - d e c o r a t i o n : u n d e r l i n e ; } . l s d - d r o p d o w n - i t e m _ _ l a b e l { d i s p l a y : b l o c k ; o v e r f l o w : h i d d e n ; w h i t e - s p a c e : n o w r a p ; t e x t - o v e r f l o w : e l l i p s i s ; } . l s d - d r o p d o w n - i t e m - - d i s a b l e d { o p a c i t y : 0 . 3 4 ; } . l s d - d r o p d o w n - i t e m _ _ i c o n { m a r g i n - r i g h t : 1 8 p x ; - w e b k i t - f l e x - s h r i n k : 0 ; - m s - f l e x - n e g a t i v e : 0 ; f l e x - s h r i n k : 0 ; } . l s d - d r o p d o w n - i t e m - - s m a l l { p a d d i n g : 5 p x 9 p x ; h e i g h t : 2 8 p x ; } . l
2025-09-26 05:25:03 +00:00
< div class = "theme-admonition theme-admonition-warning alert--danger admonition_ntHH" > < span class = "admonitionIcon_BGV6" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < path d = "M5.5 14L2 10.5V5.5L5.5 2H10.5L14 5.5V10.5L10.5 14H5.5ZM6.1 10.8333L8 8.93333L9.9 10.8333L10.8333 9.9L8.93333 8L10.8333 6.1L9.9 5.16667L8 7.06667L6.1 5.16667L5.16667 6.1L7.06667 8L5.16667 9.9L6.1 10.8333ZM6.06667 12.6667H9.93333L12.6667 9.93333V6.06667L9.93333 3.33333H6.06667L3.33333 6.06667V9.93333L6.06667 12.6667Z" fill = "currentColor" > < / path > < / svg > < / span > < div > < span class = "lsd-typography lsd-typography--body1 admonitionHeading_JPfy" > danger< / span > < span class = "lsd-typography lsd-typography--body1 admonitionContent_iozl" > < p > This is an experimental feature and has a number of < a href = "https://github.com/waku-org/js-waku/pull/2526" target = "_blank" rel = "noopener noreferrer" > limitations< / a > .< / p > < / span > < / div > < / div >
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "import-waku-sdk" > Import Waku SDK< a href = "#import-waku-sdk" class = "hash-link" aria-label = "Direct link to Import Waku SDK" title = "Direct link to Import Waku SDK" > < / a > < / h2 >
< div class = "language-shell codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-shell codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > npm install @waku/sdk@latest< / span > < br > < / span > < / code > < / pre > < / div > < / div >
< p > Or using a CDN, note this is an ESM package so < code > type=" module" < / code > is needed.< / p >
< div class = "language-html codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-html codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token tag punctuation" style = "color:rgb(248, 248, 242)" > < < / span > < span class = "token tag" style = "color:rgb(255, 121, 198)" > script< / span > < span class = "token tag" style = "color:rgb(255, 121, 198)" > < / span > < span class = "token tag attr-name" style = "color:rgb(241, 250, 140)" > type< / span > < span class = "token tag attr-value punctuation attr-equals" style = "color:rgb(248, 248, 242)" > =< / span > < span class = "token tag attr-value punctuation" style = "color:rgb(248, 248, 242)" > " < / span > < span class = "token tag attr-value" style = "color:rgb(255, 121, 198)" > module< / span > < span class = "token tag attr-value punctuation" style = "color:rgb(248, 248, 242)" > " < / span > < span class = "token tag punctuation" style = "color:rgb(248, 248, 242)" > > < / span > < span class = "token script language-javascript" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token script language-javascript" > < / span > < span class = "token script language-javascript keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token script language-javascript" > < / span > < span class = "token script language-javascript imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token script language-javascript imports" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token script language-javascript imports" > createLightNode< / span > < span class = "token script language-javascript imports punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token script language-javascript imports" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token script language-javascript imports" > < / span > < span class = "token script language-javascript imports maybe-class-name" > ReliableChannel< / span > < span class = "token script language-javascript imports" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token script language-javascript imports" > < / span > < span class = "token script language-javascript imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token script language-javascript" > < / span > < span class = "token script language-javascript keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token script language-javascript" > < / span > < span class = "token script language-javascript string" style = "color:rgb(255, 121, 198)" > ' https://unpkg.com/@waku/sdk@latest/bundle/index.js' < / span > < span class = "token script language-javascript punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token script language-javascript" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token script language-javascript" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token script language-javascript" > < / span > < span class = "token script language-javascript comment" style = "color:rgb(98, 114, 164)" > // Your code here< / span > < span class = "token script language-javascript" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token script language-javascript" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token script language-javascript" > < / span > < span class = "token tag punctuation" style = "color:rgb(248, 248, 242)" > < /< / span > < span class = "token tag" style = "color:rgb(255, 121, 198)" > script< / span > < span class = "token tag punctuation" style = "color:rgb(248, 248, 242)" > > < / span > < br > < / span > < / code > < / pre > < / div > < / div >
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "create-a-waku-node" > Create a Waku node< a href = "#create-a-waku-node" class = "hash-link" aria-label = "Direct link to Create a Waku node" title = "Direct link to Create a Waku node" > < / a > < / h2 >
< p > Use the < code > createLightNode()< / code > function to create a < a href = "/learn/glossary#light-node" > Light Node< / a > and interact with the Waku Network:< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > createLightNode < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/sdk" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Create a Light Node< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > node < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token keyword control-flow" style = "color:rgb(189, 147, 249);font-style:italic" > await< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > createLightNode< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < span class = "token literal-property property" > defaultBootstrap< / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token boolean" > true< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < br > < / span > < / code > < / pre > < / div > < / div >
2025-10-03 05:55:52 +00:00
< div class = "theme-admonition theme-admonition-info alert--info admonition_ntHH" > < span class = "admonitionIcon_BGV6" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < path d = "M7.33334 11.3333H8.66668V7.33331H7.33334V11.3333ZM8.00001 5.99998C8.1889 5.99998 8.34734 5.93598 8.47534 5.80798C8.60334 5.67998 8.66712 5.52176 8.66668 5.33331C8.66668 5.14442 8.60268 4.98598 8.47468 4.85798C8.34668 4.72998 8.18845 4.6662 8.00001 4.66665C7.81112 4.66665 7.65268 4.73065 7.52468 4.85865C7.39668 4.98665 7.3329 5.14487 7.33334 5.33331C7.33334 5.5222 7.39734 5.68065 7.52534 5.80865C7.65334 5.93665 7.81157 6.00042 8.00001 5.99998ZM8.00001 14.6666C7.07779 14.6666 6.21112 14.4915 5.40001 14.1413C4.5889 13.7911 3.88334 13.3162 3.28334 12.7166C2.68334 12.1166 2.20845 11.4111 1.85868 10.6C1.5089 9.78887 1.33379 8.9222 1.33334 7.99998C1.33334 7.07776 1.50845 6.21109 1.85868 5.39998C2.2089 4.58887 2.68379 3.88331 3.28334 3.28331C3.88334 2.68331 4.5889 2.20842 5.40001 1.85865C6.21112 1.50887 7.07779 1.33376 8.00001 1.33331C8.92223 1.33331 9.7889 1.50842 10.6 1.85865C11.4111 2.20887 12.1167 2.68376 12.7167 3.28331C13.3167 3.88331 13.7918 4.58887 14.142 5.39998C14.4922 6.21109 14.6671 7.07776 14.6667 7.99998C14.6667 8.9222 14.4916 9.78887 14.1413 10.6C13.7911 11.4111 13.3162 12.1166 12.7167 12.7166C12.1167 13.3166 11.4111 13.7918 10.6 14.142C9.7889 14.4922 8.92223 14.6671 8.00001 14.6666ZM8.00001 13.3333C9.4889 13.3333 10.75 12.8166 11.7833 11.7833C12.8167 10.75 13.3333 9.48887 13.3333 7.99998C13.3333 6.51109 12.8167 5.24998 11.7833 4.21665C10.75 3.18331 9.4889 2.66665 8.00001 2.66665C6.51112 2.66665 5.25001 3.18331 4.21668 4.21665C3.18334 5.24998 2.66668 6.51109 2.66668 7.99998C2.66668 9.48887 3.18334 10.75 4.21668 11.7833C5.25001 12.8166 6.51112 13.3333 8.00001 13.3333Z" fill = "currentColor" > < / path > < / svg > < / span > < div > < span class = "lsd-typography lsd-typography--body1 admonitionHeading_JPfy" > info< / span > < span class = "lsd-typography lsd-typography--body1 admonitionContent_iozl" > < p > When the < code > defaultBootstrap< / code > parameter is set to < code > true< / code > , your node will be bootstrapped using the < a href = "/build/javascript/configure-discovery#default-bootstrap-method" > default bootstrap method< / a > . Have a look at the < a href = "/build/javascript/configure-discovery" > Bootstrap Nodes and Discover Peers< / a > guide to learn more methods to bootstrap nodes.< / p > < / span > < / div > < / div >
2025-09-26 05:25:03 +00:00
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "create-encoders-and-decoders" > Create encoders and decoders< a href = "#create-encoders-and-decoders" class = "hash-link" aria-label = "Direct link to Create encoders and decoders" title = "Direct link to Create encoders and decoders" > < / a > < / h2 >
< p > Choose a < a href = "/learn/concepts/content-topics" > content topic< / a > for your application and create a message < code > encoder< / code > and < code > decoder< / code > :< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > createEncoder< / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token imports" > createDecoder < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/sdk" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Choose a content topic< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > ct < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " /my-app/1/messages/proto" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Create a message encoder and decoder< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > encoder < / span > < span class = "token operator" > =< / span > < span class = "token plain" > node< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token method function property-access" style = "color:rgb(80, 250, 123)" > createEncoder< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < span class = "token literal-property property" > contentTopic< / span > < span class = "token operator" > :< / span > < span class = "token plain" > ct < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > decoder < / span > < span class = "token operator" > =< / span > < span class = "token plain" > node< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token method function property-access" style = "color:rgb(80, 250, 123)" > createDecoder< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token
2025-10-03 05:55:52 +00:00
< p > You can also use < a href = "/build/javascript/message-encryption" > < code > @waku/message-encryption< / code > < / a > to encrypt and decrypt messages using Waku libraries.< / p >
2025-09-26 05:25:03 +00:00
< div class = "theme-admonition theme-admonition-info alert--info admonition_ntHH" > < span class = "admonitionIcon_BGV6" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < path d = "M7.33334 11.3333H8.66668V7.33331H7.33334V11.3333ZM8.00001 5.99998C8.1889 5.99998 8.34734 5.93598 8.47534 5.80798C8.60334 5.67998 8.66712 5.52176 8.66668 5.33331C8.66668 5.14442 8.60268 4.98598 8.47468 4.85798C8.34668 4.72998 8.18845 4.6662 8.00001 4.66665C7.81112 4.66665 7.65268 4.73065 7.52468 4.85865C7.39668 4.98665 7.3329 5.14487 7.33334 5.33331C7.33334 5.5222 7.39734 5.68065 7.52534 5.80865C7.65334 5.93665 7.81157 6.00042 8.00001 5.99998ZM8.00001 14.6666C7.07779 14.6666 6.21112 14.4915 5.40001 14.1413C4.5889 13.7911 3.88334 13.3162 3.28334 12.7166C2.68334 12.1166 2.20845 11.4111 1.85868 10.6C1.5089 9.78887 1.33379 8.9222 1.33334 7.99998C1.33334 7.07776 1.50845 6.21109 1.85868 5.39998C2.2089 4.58887 2.68379 3.88331 3.28334 3.28331C3.88334 2.68331 4.5889 2.20842 5.40001 1.85865C6.21112 1.50887 7.07779 1.33376 8.00001 1.33331C8.92223 1.33331 9.7889 1.50842 10.6 1.85865C11.4111 2.20887 12.1167 2.68376 12.7167 3.28331C13.3167 3.88331 13.7918 4.58887 14.142 5.39998C14.4922 6.21109 14.6671 7.07776 14.6667 7.99998C14.6667 8.9222 14.4916 9.78887 14.1413 10.6C13.7911 11.4111 13.3162 12.1166 12.7167 12.7166C12.1167 13.3166 11.4111 13.7918 10.6 14.142C9.7889 14.4922 8.92223 14.6671 8.00001 14.6666ZM8.00001 13.3333C9.4889 13.3333 10.75 12.8166 11.7833 11.7833C12.8167 10.75 13.3333 9.48887 13.3333 7.99998C13.3333 6.51109 12.8167 5.24998 11.7833 4.21665C10.75 3.18331 9.4889 2.66665 8.00001 2.66665C6.51112 2.66665 5.25001 3.18331 4.21668 4.21665C3.18334 5.24998 2.66668 6.51109 2.66668 7.99998C2.66668 9.48887 3.18334 10.75 4.21668 11.7833C5.25001 12.8166 6.51112 13.3333 8.00001 13.3333Z" fill = "currentColor" > < / path > < / svg > < / span > < div > < span class = "lsd-typography lsd-typography--body1 admonitionHeading_JPfy" > info< / span > < span class = "lsd-typography lsd-typography--body1 admonitionContent_iozl" > < p > In this example, users send and receive messages on a shared content topic. However, real applications may have users broadcasting messages while others listen or only have 1:1 exchanges. Waku supports all these use cases.< / p > < / span > < / div > < / div >
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "listen-for-connection-status" > Listen for connection status< a href = "#listen-for-connection-status" class = "hash-link" aria-label = "Direct link to Listen for connection status" title = "Direct link to Listen for connection status" > < / a > < / h2 >
< p > The Waku node will emit < code > health< / code > events to help you know whether the node is connected to the network.
This can be useful to give feedback to the user, or stop some action (e.g. sending messages) when offline:< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > < / span > < span class = "token imports maybe-class-name" > HealthStatus< / span > < span class = "token imports" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/sdk" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > node< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token property-access" > events< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token method function property-access" style = "color:rgb(80, 250, 123)" > addEventListener< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " waku:health" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token parameter" > event< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token plain" > < / span > < span class = "token arrow operator" > => < / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > health < / span > < span class = "token operator" > =< / span > < span class = "token plain" > event< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token property-access" > detail< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword control-flow" style = "color:rgb(189, 147, 249);font-style:italic" > if< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token plain" > health < / span > < span class = "token operator" > ===< / span > < span class = "token plain" > < / span > < span class = "token maybe-class-name" > HealthStatus< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token property-access maybe-class-name" > SufficientlyHealthy< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Show to the user they a
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "create-a-reliable-channel" > Create a reliable channel< a href = "#create-a-reliable-channel" class = "hash-link" aria-label = "Direct link to Create a reliable channel" title = "Direct link to Create a reliable channel" > < / a > < / h2 >
< p > You need to choose a channel name: it acts as an identifier to the conversation, participants will try to ensure they all have the same
messages within a given channel.< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > channelName < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " channel-number-15" < / span > < br > < / span > < / code > < / pre > < / div > < / div >
< p > Finally, each participant need to identify themselves for reliability purposes, so they can confirm < em > others< / em > have received their messages.< / p >
< p > It is up to you how to generate an id. Every participant < strong > must< / strong > have a different id.< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > senderId < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > generateRandomStringId< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < br > < / span > < / code > < / pre > < / div > < / div >
< p > You can now create a reliable channel:< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > < / span > < span class = "token imports maybe-class-name" > ReliableChannel< / span > < span class = "token imports" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " @waku/sdk" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > reliableChannel < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token keyword control-flow" style = "color:rgb(189, 147, 249);font-style:italic" > await< / span > < span class = "token plain" > < / span > < span class = "token maybe-class-name" > ReliableChannel< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token method function property-access" style = "color:rgb(80, 250, 123)" > create< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token plain" > node< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > channelName< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > senderId< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > encoder< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > decoder< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < br > < / span > < / code > < / pre > < / div > < / div >
< p > The channel will automatically start the Waku node and fetch messages.< / p >
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "create-a-message-structure" > Create a message structure< a href = "#create-a-message-structure" class = "hash-link" aria-label = "Direct link to Create a message structure" title = "Direct link to Create a message structure" > < / a > < / h2 >
< p > Create your application' s message structure using < a href = "https://github.com/protobufjs/protobuf.js#usage" target = "_blank" rel = "noopener noreferrer" > Protobufjs< / a > :< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports" > protobuf< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " protobufjs" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Create a message structure using Protobuf< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > < / span > < span class = "token maybe-class-name" > DataPacket< / span > < span class = "token plain" > < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > new< / span > < span class = "token plain" > < / span > < span class = "token class-name" > protobuf< / span > < span class = "token class-name punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token class-name" > Type< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " DataPacket" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token method function property-access" style = "color:rgb(80, 250, 123)" > add< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > new< / span > < span class = "token plain" > < / span > < span class = "token class-name" > protobuf< / span > < span class = "token class-name punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token class-name" > Field< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " timestamp" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token number" > 1< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " uint64" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token method function property-access" style = "color:rgb(80, 250, 123)" > add< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > new< / span > < span class = "token plain" > < / span > < span class = "token class-name" > protobuf< / span >
2025-10-03 05:55:52 +00:00
< div class = "theme-admonition theme-admonition-info alert--info admonition_ntHH" > < span class = "admonitionIcon_BGV6" > < svg width = "16" height = "16" viewBox = "0 0 16 16" fill = "none" xmlns = "http://www.w3.org/2000/svg" > < path d = "M7.33334 11.3333H8.66668V7.33331H7.33334V11.3333ZM8.00001 5.99998C8.1889 5.99998 8.34734 5.93598 8.47534 5.80798C8.60334 5.67998 8.66712 5.52176 8.66668 5.33331C8.66668 5.14442 8.60268 4.98598 8.47468 4.85798C8.34668 4.72998 8.18845 4.6662 8.00001 4.66665C7.81112 4.66665 7.65268 4.73065 7.52468 4.85865C7.39668 4.98665 7.3329 5.14487 7.33334 5.33331C7.33334 5.5222 7.39734 5.68065 7.52534 5.80865C7.65334 5.93665 7.81157 6.00042 8.00001 5.99998ZM8.00001 14.6666C7.07779 14.6666 6.21112 14.4915 5.40001 14.1413C4.5889 13.7911 3.88334 13.3162 3.28334 12.7166C2.68334 12.1166 2.20845 11.4111 1.85868 10.6C1.5089 9.78887 1.33379 8.9222 1.33334 7.99998C1.33334 7.07776 1.50845 6.21109 1.85868 5.39998C2.2089 4.58887 2.68379 3.88331 3.28334 3.28331C3.88334 2.68331 4.5889 2.20842 5.40001 1.85865C6.21112 1.50887 7.07779 1.33376 8.00001 1.33331C8.92223 1.33331 9.7889 1.50842 10.6 1.85865C11.4111 2.20887 12.1167 2.68376 12.7167 3.28331C13.3167 3.88331 13.7918 4.58887 14.142 5.39998C14.4922 6.21109 14.6671 7.07776 14.6667 7.99998C14.6667 8.9222 14.4916 9.78887 14.1413 10.6C13.7911 11.4111 13.3162 12.1166 12.7167 12.7166C12.1167 13.3166 11.4111 13.7918 10.6 14.142C9.7889 14.4922 8.92223 14.6671 8.00001 14.6666ZM8.00001 13.3333C9.4889 13.3333 10.75 12.8166 11.7833 11.7833C12.8167 10.75 13.3333 9.48887 13.3333 7.99998C13.3333 6.51109 12.8167 5.24998 11.7833 4.21665C10.75 3.18331 9.4889 2.66665 8.00001 2.66665C6.51112 2.66665 5.25001 3.18331 4.21668 4.21665C3.18334 5.24998 2.66668 6.51109 2.66668 7.99998C2.66668 9.48887 3.18334 10.75 4.21668 11.7833C5.25001 12.8166 6.51112 13.3333 8.00001 13.3333Z" fill = "currentColor" > < / path > < / svg > < / span > < div > < span class = "lsd-typography lsd-typography--body1 admonitionHeading_JPfy" > info< / span > < span class = "lsd-typography lsd-typography--body1 admonitionContent_iozl" > < p > Have a look at the < a href = "/build/javascript/#message-structure" > Protobuf installation< / a > guide for adding the < code > protobufjs< / code > package to your project.< / p > < / span > < / div > < / div >
2025-09-26 05:25:03 +00:00
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "listen-to-incoming-messages" > Listen to incoming messages< a href = "#listen-to-incoming-messages" class = "hash-link" aria-label = "Direct link to Listen to incoming messages" title = "Direct link to Listen to incoming messages" > < / a > < / h2 >
< p > The reliable channel will emit incoming messages. To process them, simply add a listener:< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > reliableChannel< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token method function property-access" style = "color:rgb(80, 250, 123)" > addEventListener< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " message-received" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token parameter" > event< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token plain" > < / span > < span class = "token arrow operator" > => < / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > wakuMessage < / span > < span class = "token operator" > =< / span > < span class = "token plain" > event< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token property-access" > detail< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // decode your payload using the protobuf object previously created< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > timestamp< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > sender< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > message < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token maybe-class-name" > DataPacket< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token method function property-access" style = "color:rgb(80, 250, 123)" > decode< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token plain" > wakuMessage< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token property-access" > payload< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // ... process the message as you wish< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "send-messages" > Send messages< a href = "#send-messages" class = "hash-link" aria-label = "Direct link to Send messages" title = "Direct link to Send messages" > < / a > < / h2 >
< p > To send messages in the reliable channel, encode the message in a payload.< / p >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Create a new message object< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > protoMessage < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token maybe-class-name" > DataPacket< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token method function property-access" style = "color:rgb(80, 250, 123)" > create< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token literal-property property" > timestamp< / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token known-class-name class-name" > Date< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token method function property-access" style = "color:rgb(80, 250, 123)" > now< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token literal-property property" > sender< / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " Alice" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token literal-property property" > message< / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " Hello, World!" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Serialise the message using Protobuf< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > serialisedMessage < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token maybe-class-name" > DataPacket< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token method function property-access" style = "color:rgb(80, 250, 123)" > encode< / span > < span class = "token punctuation" style = "c
< p > Then, send the message and setup listeners so you can know when the message:< / p >
< ul >
< li > has been sent< / li >
< li > has been acknowledged by other participants in the channel< / li >
< li > has encountered an error< / li >
< / ul >
< div class = "language-js codeBlockContainer_EB2s codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < div class = "codeBlockContent_QJqH" > < pre tabindex = "0" class = "prism-code language-js codeBlock_bY9V thin-scrollbar" style = "color:#F8F8F2;background-color:rgba(var(--lsd-surface-secondary), 0.08)" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // Send the message, and get the id to track events< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > messageId < / span > < span class = "token operator" > =< / span > < span class = "token plain" > reliableChannel< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token method function property-access" style = "color:rgb(80, 250, 123)" > send< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token plain" > payload< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > reliableChannel< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token method function property-access" style = "color:rgb(80, 250, 123)" > addEventListener< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " sending-message-irrecoverable-error" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token parameter" > event< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token plain" > < / span > < span class = "token arrow operator" > => < / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword control-flow" style = "color:rgb(189, 147, 249);font-style:italic" > if< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token plain" > messageId < / span > < span class = "token operator" > ===< / span > < span class = "token plain" > event< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token property-access" > detail< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token property-access" > messageId< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token console class-name" > console< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token method function property-access" style = "color:rgb(80, 250, 123)" > error< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > ' Failed to send message:' < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > event< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token property-access" > detail< / span > < span class
2025-10-03 05:55:52 +00:00
< div class = "theme-admonition theme-admonition-tip alert--success admonition_ntHH" > < span class = "admonitionIcon_BGV6" > < svg width = "16" height = "16" viewBox = "0 0 16 16" xmlns = "http://www.w3.org/2000/svg" > < path d = "M8 14.6666C7.63333 14.6666 7.31933 14.536 7.058 14.2746C6.79667 14.0133 6.66622 13.6995 6.66667 13.3333H9.33333C9.33333 13.7 9.20267 14.014 8.94133 14.2753C8.68 14.5366 8.36622 14.6671 8 14.6666ZM5.33333 12.6666V11.3333H10.6667V12.6666H5.33333ZM5.5 10.6666C4.73333 10.2111 4.12489 9.59998 3.67467 8.83331C3.22445 8.06665 2.99956 7.23331 3 6.33331C3 4.94442 3.48622 3.76376 4.45867 2.79131C5.43111 1.81887 6.61156 1.33287 8 1.33331C9.38889 1.33331 10.5696 1.81954 11.542 2.79198C12.5144 3.76442 13.0004 4.94487 13 6.33331C13 7.23331 12.7751 8.06665 12.3253 8.83331C11.8756 9.59998 11.2671 10.2111 10.5 10.6666H5.5ZM5.9 9.33331H10.1C10.6 8.97776 10.9862 8.53887 11.2587 8.01665C11.5311 7.49442 11.6671 6.93331 11.6667 6.33331C11.6667 5.31109 11.3111 4.44442 10.6 3.73331C9.88889 3.0222 9.02222 2.66665 8 2.66665C6.97778 2.66665 6.11111 3.0222 5.4 3.73331C4.68889 4.44442 4.33333 5.31109 4.33333 6.33331C4.33333 6.93331 4.46956 7.49442 4.742 8.01665C5.01444 8.53887 5.40045 8.97776 5.9 9.33331Z" fill = "currentColor" > < / path > < / svg > < / span > < div > < span class = "lsd-typography lsd-typography--body1 admonitionHeading_JPfy" > Congratulations!< / span > < span class = "lsd-typography lsd-typography--body1 admonitionContent_iozl" > < p > You have successfully sent and received messages over the Waku Network using our reliable protocols such as Scalable Data Sync (SDS) and P2P Reliability.< / p > < / span > < / div > < / div > < / div > < footer class = "theme-doc-footer docusaurus-mt-lg" > < div class = "row margin-top--sm theme-doc-footer-edit-meta-row" > < div class = "col" > < a href = "https://github.com/waku-org/docs.waku.org/tree/develop/docs/build/javascript/reliable-channels.md" target = "_blank" rel = "noreferrer noopener" class = "theme-edit-this-page" > < div class = "icon_S7Kx m_thRi" > < svg xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" fill = "none" viewBox = "0 0 16 16" > < path fill = "#fff" fill-rule = "evenodd" d = "m12.707 2.393.9.9c.526.52.526 1.367 0 1.887L4.787 14H2v-2.787l6.933-6.94 1.887-1.88c.52-.52 1.367-.52 1.887 0M3.333 12.667l.94.04 6.547-6.554-.94-.94-6.547 6.547z" clip-rule = "evenodd" > < / path > < / svg > < / div > < span class = "lsd-typography lsd-typography--body2" > Edit this page< / span > < / a > < / div > < div class = "col lastUpdated_JAkA" > < / div > < / div > < / footer > < / article > < nav class = "docusaurus-mt-lg pagination-nav" aria-label = "Docs pages" > < a class = "pagination-nav__link pagination-nav__link--prev" href = "/build/javascript/" > < div class = "icon_S7Kx m_thRi" > < svg xmlns = "http://www.w3.org/2000/svg" width = "14" height = "14" fill = "none" viewBox = "0 0 14 14" > < path fill = "#fff" d = "M11.667 6.417h-7.1L7.83 3.156 7 2.333 2.334 7 7 11.667l.823-.823-3.255-3.26h7.099z" > < / path > < / svg > < / div > < span class = "lsd-typography lsd-typography--body2 pagination-nav__label" > JavaScript Waku SDK< / span > < / a > < a class = "pagination-nav__link pagination-nav__link--next" href = "/build/javascript/light-send-receive" > < span class = "lsd-typography lsd-typography--body2 pagination-nav__label" > Send and Receive Messages Using Light Push and Filter< / span > < div class = "icon_S7Kx m_thRi" > < svg xmlns = "http://www.w3.org/2000/svg" width = "14" height = "14" fill = "none" viewBox = "0 0 14 14" > < path fill = "#fff" d = "m7 2.334-.823.822 3.255 3.26H2.333v1.167h7.1l-3.256 3.261.823.823L11.667 7z" > < / path > < / svg > < / div > < / a > < / nav > < / div > < / div > < div class = "gap1_XuuQ" > < / div > < / div > < / div > < / main > < / div > < / div > < / div > < footer class = "footer" > < div class = "container container-fluid firstRow_ar1q" > < div class = "footer__bottom text--center" > < div class = "margin-bottom--sm" > < a class = "footerLogoLink_BH7S" href = "/" > < img src = "/theme/image/logo.svg" alt = "Waku" class = "themedImage_kfRS themedImage--light_BL8e footer__logo" width = "22" > < img src = "/theme/image/logo.svg" alt = "Waku" class = "themedImage_kfRS themedImage--dark_OvIx footer__logo" width = "22" > < / a > < / div > < div class = "footer__copyright" > Waku< / div > < / div > < div class = "row footer__links" > < div class = "theme-layout-footer-column col footer__col" > < div class = "footer__title" > Comm
2025-09-26 05:25:03 +00:00
< / body >
< / html >
