2024-02-20 09:23:32 +00:00
<!doctype html>
2025-08-13 03:24:27 +00:00
< 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" >
2024-02-20 09:23:32 +00:00
< head >
< meta charset = "UTF-8" >
2025-08-13 03:24:27 +00:00
< meta name = "generator" content = "Docusaurus v3.8.1" >
2025-10-03 05:55:52 +00:00
< title data-rh = "true" > Send and Receive Messages Using Light Push and Filter | 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/light-send-receive" > < 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/c1cc07bd1ed325c073fc7c12d405878e9bc51a93.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 Using Light Push and Filter | Waku Documentation" > < meta data-rh = "true" name = "description" content = "This guide provides detailed steps to start using the @waku/sdk package by setting up a Light Node to send messages using the Light Push protocol, and receive messages using the Filter protocol. Have a look at the installation guide for steps on adding @waku/sdk to your project." > < meta data-rh = "true" property = "og:description" content = "This guide provides detailed steps to start using the @waku/sdk package by setting up a Light Node to send messages using the Light Push protocol, and receive messages using the Filter protocol. Have a look at the installation guide for steps on adding @waku/sdk to your project." > < link data-rh = "true" rel = "icon" href = "/theme/image/favicon.ico" > < link data-rh = "true" rel = "canonical" href = "https://docs.waku.org/build/javascript/light-send-receive" > < link data-rh = "true" rel = "alternate" href = "https://docs.waku.org/build/javascript/light-send-receive" hreflang = "en-GB" > < link data-rh = "true" rel = "alternate" href = "https://docs.waku.org/build/javascript/light-send-receive" 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-08-13 03:24:27 +00:00
< meta property = "og:image" content = "https://docs.waku.org/_og/c1cc07bd1ed325c073fc7c12d405878e9bc51a93.png" > < meta name = "twitter:image" content = "https://docs.waku.org/_og/c1cc07bd1ed325c073fc7c12d405878e9bc51a93.png" > < / head >
2024-02-20 09:23:32 +00:00
< body class = "navigation-with-keyboard" >
2025-08-13 03:24:27 +00:00
< 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
2024-02-20 09:23:32 +00:00
.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-08-13 03:24:27 +00:00
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "create-a-light-node" > Create a light node< a href = "#create-a-light-node" class = "hash-link" aria-label = "Direct link to Create a light node" title = "Direct link to Create a light 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 and start 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 > < 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" > await< / 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)" > start< / 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)" > // Use the stop() function to stop a running node< / 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)" > // await node.stop();< / 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-08-13 03:24:27 +00:00
< p > A node needs to know how to route messages. By default, it will use The Waku Network configuration (< code > { clusterId: 1, shards: [0,1,2,3,4,5,6,7] }< / code > ). For most applications, it' s recommended to use autosharding:< / 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 node with auto sharding (recommended)< / 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 > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < 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 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" > networkConfig< / span > < span class = "token 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 literal-property property" > clusterId< / span > < span class = "token operator" > :< / 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 > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token literal-property property" > contentTopics< / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > [< / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " /my-app/1/notifications/proto" < / 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 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 > < br > < / span > < / code > < / pre > < / div > < / div >
< h3 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "alternative-network-configuration" > Alternative network configuration< a href = "#alternative-network-configuration" class = "hash-link" aria-label = "Direct link to Alternative network configuration" title = "Direct link to Alternative network configuration" > < / a > < / h3 >
< p > If your project requires a specific network configuration, you can use static sharding:< / 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 node with static sharding< / 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 > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < 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 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" > networkConfig< / span > < span class = "token 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 literal-property property" > clusterId< / span > < span class = "token operator" > :< / 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 > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token literal-property property" > shards< / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > [< / span > < span class = "token number" > 0< / 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 number" > 2< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token number" > 3< / 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 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 > < br > < / span > < / code > < / pre > < / div > < / div >
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "connect-to-remote-peers" > Connect to remote peers< a href = "#connect-to-remote-peers" class = "hash-link" aria-label = "Direct link to Connect to remote peers" title = "Direct link to Connect to remote peers" > < / a > < / h2 >
< p > Use the < code > node.waitForPeers()< / code > function to wait for the node to connect with peers on 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 comment" style = "color:rgb(98, 114, 164)" > // Wait for a successful peer connection< / 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" > await< / 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)" > waitForPeers< / 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 > The < code > protocols< / code > parameter allows you to specify the < a href = "/learn/concepts/protocols" > protocols< / a > that the remote peers should have enabled:< / 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" > Protocols< / 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 comment" style = "color:rgb(98, 114, 164)" > // Wait for peer connections with specific protocols< / 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" > await< / 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)" > waitForPeers< / 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 maybe-class-name" > Protocols< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token property-access maybe-class-name" > LightPush< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token maybe-class-name" > Protocols< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token property-access maybe-class-name" > Filter< / 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 >
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "choose-a-content-topic" > Choose a content topic< a href = "#choose-a-content-topic" class = "hash-link" aria-label = "Direct link to Choose a content topic" title = "Direct link to Choose a content topic" > < / 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" > contentTopic < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " /light-guide/1/message/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" > < / span > < span class = "token function" 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" > contentTopic < / 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" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > createDecoder< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token plain" > contentTopic< / 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
< p > The < code > ephemeral< / code > parameter allows you to specify whether messages should < strong > NOT< / strong > be stored by < a href = "/build/javascript/store-retrieve-messages" > Store peers< / a > :< / p >
2025-08-13 03:24:27 +00:00
< 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" > encoder < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token function" 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 > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token literal-property property" > contentTopic< / span > < span class = "token operator" > :< / span > < span class = "token plain" > contentTopic< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // message 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 literal-property property" > ephemeral< / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token boolean" > true< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // allows messages NOT be stored on the network< / 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 > < br > < / span > < / code > < / pre > < / div > < / div >
< p > The < code > pubsubTopicShardInfo< / code > parameter allows you to configure a different network configuration for your < 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 comment" style = "color:rgb(98, 114, 164)" > // Create the network config< / 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" > networkConfig < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < span class = "token literal-property property" > clusterId< / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token number" > 3< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token literal-property property" > shards< / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > [< / 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 number" > 2< / 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 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 encoder and decoder with custom network config< / 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" > < / span > < span class = "token function" 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 > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token literal-property property" > contentTopic< / span > < span class = "token operator" > :< / span > < span class = "token plain" > contentTopic< / 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" > pubsubTopicShardInfo< / span > < span class = "token operator" > :< / span > < span class = "token plain" > networkConfig< / 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" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span c
< 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 = "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" > Protobuf' s valid message< / a > fields:< / 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-08-13 03:24:27 +00:00
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "send-messages-using-light-push" > Send messages using light push< a href = "#send-messages-using-light-push" class = "hash-link" aria-label = "Direct link to Send messages using light push" title = "Direct link to Send messages using light push" > < / a > < / h2 >
< p > To send messages over the Waku Network using the < code > Light Push< / code > protocol, create a new message object and use the < code > lightPush.send()< / code > function:< / 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
< h2 class = "anchor anchorWithHideOnScrollNavbar_WYt5" id = "receive-messages-using-filter" > Receive messages using filter< a href = "#receive-messages-using-filter" class = "hash-link" aria-label = "Direct link to Receive messages using filter" title = "Direct link to Receive messages using filter" > < / a > < / h2 >
< p > To receive messages using the < code > Filter< / code > protocol, create a callback function for message processing, then use the < code > filter.subscribe()< / code > function to subscribe to a < code > content topic< / 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 comment" style = "color:rgb(98, 114, 164)" > // Create the callback function< / 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 function-variable function" style = "color:rgb(80, 250, 123)" > callback< / span > < span class = "token plain" > < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token parameter" > wakuMessage< / 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 comment" style = "color:rgb(98, 114, 164)" > // Check if there is a payload on the message< / 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 operator" > !< / 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 plain" > < / span > < span class = "token keyword control-flow" style = "color:rgb(189, 147, 249);font-style:italic" > return< / 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)" > // Render the messageObj as desired in your application< / 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" > messageObj < / 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 > < 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)" > log< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token plain" > messageOb
< p > The < code > pubsubTopicShardInfo< / code > parameter allows you to configure a different network configuration for your < code > Filter< / code > subscription:< / 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 the network config< / 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" > networkConfig < / span > < span class = "token operator" > =< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < span class = "token literal-property property" > clusterId< / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token number" > 3< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token literal-property property" > shards< / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > [< / 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 number" > 2< / 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 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 Filter subscription with custom network config< / 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" > subscription < / 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" > node< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token property-access" > filter< / 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)" > createSubscription< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token plain" > networkConfig< / 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 use the < code > subscription.unsubscribe()< / code > function to stop receiving messages from a content topic:< / 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 control-flow" style = "color:rgb(189, 147, 249);font-style:italic" > await< / span > < span class = "token plain" > subscription< / 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)" > unsubscribe< / 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" > contentTopic< / 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-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 the < code > Light Push< / code > and < code > Filter< / code > protocols. Have a look at the < a href = "https://github.com/waku-org/js-waku-examples/tree/master/examples/light-js" target = "_blank" rel = "noopener noreferrer" > light-js< / a > and < a href = "https://github.com/waku-org/js-waku-examples/tree/master/examples/light-chat" target = "_blank" rel = "noopener noreferrer" > light-chat< / a > examples for working demos.< / 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/light-send-receive.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/reliable-channels" > < 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" > Send and Receive Messages in a Reliable Channel< / span > < / a > < a class = "pagination-nav__link pagination-nav__link--next" href = "/build/javascript/store-retrieve-messages" > < span class = "lsd-typography lsd-typography--body2 pagination-nav__label" > Retrieve Messages Using Store Protocol< / 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 = "
2024-02-20 09:23:32 +00:00
< / body >
< / html >
