docs.waku.org/assets/js/c7981a95.aec962fc.js

"use strict";(self.webpackChunkwaku_guide=self.webpackChunkwaku_guide||[]).push([[9746],{4865:(e,s,t)=>{t.d(s,{A:()=>p});var a=t(96540),n=t(34164),r=t(23104),i=t(47751),o=t(92303);const c={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var l=t(74848);function d({className:e,block:s,selectedValue:t,selectValue:a,tabValues:i}){const o=[],{blockElementScrollPositionUntilNextRender:d}=(0,r.a_)(),h=e=>{const s=e.currentTarget,n=o.indexOf(s),r=i[n].value;r!==t&&(d(s),a(r))},u=e=>{let s=null;switch(e.key){case"Enter":h(e);break;case"ArrowRight":{const t=o.indexOf(e.currentTarget)+1;s=o[t]??o[0];break}case"ArrowLeft":{const t=o.indexOf(e.currentTarget)-1;s=o[t]??o[o.length-1];break}}s?.focus()};return(0,l.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,n.A)("tabs",{"tabs--block":s},e),children:i.map(({value:e,label:s,attributes:a})=>(0,l.jsx)("li",{role:"tab",tabIndex:t===e?0:-1,"aria-selected":t===e,ref:e=>{o.push(e)},onKeyDown:u,onClick:h,...a,className:(0,n.A)("tabs__item",c.tabItem,a?.className,{"tabs__item--active":t===e}),children:s??e},e))})}function h({lazy:e,children:s,selectedValue:t}){const r=(Array.isArray(s)?s:[s]).filter(Boolean);if(e){const e=r.find(e=>e.props.value===t);return e?(0,a.cloneElement)(e,{className:(0,n.A)("margin-top--md",e.props.className)}):null}return(0,l.jsx)("div",{className:"margin-top--md",children:r.map((e,s)=>(0,a.cloneElement)(e,{key:s,hidden:e.props.value!==t}))})}function u(e){const s=(0,i.u)(e);return(0,l.jsxs)("div",{className:(0,n.A)("tabs-container",c.tabList),children:[(0,l.jsx)(d,{...s,...e}),(0,l.jsx)(h,{...s,...e})]})}function p(e){const s=(0,o.default)();return(0,l.jsx)(u,{...e,children:(0,i.v)(e.children)},String(s))}},19365:(e,s,t)=>{t.d(s,{A:()=>i});t(96540);var a=t(34164);const n={tabItem:"tabItem_Ymn6"};var r=t(74848);function i({children:e,hidden:s,className:t}){return(0,r.jsx)("div",{role:"tabpanel",className:(0,a.A)(n.tabItem,t),hidden:s,children:e})}},28453:(e,s,t)=>{t.d(s,{R:()=>i,x:()=>o});var a=t(96540);const n={},r=a.createContext(n);function i(e){const s=a.useContext(r);return a.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function o(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:i(e.components),a.createElement(r.Provider,{value:s},e.children)}},29071:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>d,contentTitle:()=>l,default:()=>p,frontMatter:()=>c,metadata:()=>a,toc:()=>h});const a=JSON.parse('{"id":"build/javascript/index","title":"JavaScript Waku SDK","description":"Currently, the JavaScript Waku SDK (@waku/sdk) is NOT compatible with React Native. We plan to add support for React Native in the future.","source":"@site/docs/build/javascript/index.md","sourceDirName":"build/javascript","slug":"/build/javascript/","permalink":"/build/javascript/","draft":false,"unlisted":false,"editUrl":"https://github.com/waku-org/docs.waku.org/tree/develop/docs/build/javascript/index.md","tags":[],"version":"current","lastUpdatedAt":null,"frontMatter":{"title":"JavaScript Waku SDK","hide_table_of_contents":true,"displayed_sidebar":"build"},"sidebar":"build","next":{"title":"Send and Receive Messages in a Reliable Channel","permalink":"/build/javascript/reliable-channels"}}');var n=t(74848),r=t(28453),i=t(4865),o=t(19365);const c={title:"JavaScript Waku SDK",hide_table_of_contents:!0,displayed_sidebar:"build"},l=void 0,d={},h=[{value:"Video Tutorials",id:"video-tutorials",level:2},{value:"Installation",id:"installation",level:2},{value:"Message structure",id:"message-structure",level:2},{value:"Getting started",id:"getting-started",level:2},{value:"Get help and report issues",id:"get-help-and-report-issues",level:2}];function u(e){const s={a:"a",admonition:"admonition",code:"code",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s.admonition,{type:"caution",children:(0,n.jsxs)(s.p,{children:["Currently, the JavaScript Waku SDK (",(0,n.jsx)(s.code,{children:"@waku/sdk"}),") is ",(0,n.jsx)(s.strong,{children:"NOT compatible"})," with React Native. We plan to add support for React Native in the future."]})}),"\n",(0,n.jsxs)(s.p,{children:["The ",(0,n.jsx)(s.a,{href:"https://github.com/waku-org/js-waku",children:"JavaScript Waku SDK"})," (",(0,n.jsx)(s.code,{children:"@waku/sdk"}),") provides a TypeScript implementation of the ",(0,n.jsx)(s.a,{href:"/",children:"Waku protocol"})," designed for web browser environments. Developers can seamlessly integrate Waku functionalities into web applications, enabling efficient communication and collaboration among users using the ",(0,n.jsx)(s.code,{children:"@waku/sdk"})," package."]}),"\n",(0,n.jsx)(s.h2,{id:"video-tutorials",children:"Video Tutorials"}),"\n",(0,n.jsxs)("div",{class:"video-container",children:[(0,n.jsx)("iframe",{class:"yt-video two-items",src:"https://www.youtube.com/embed/PYQaXCxUCwA",title:"Waku Tutorial 001: Introduction to Waku",frameborder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",allowfullscreen:!0}),(0,n.jsx)("iframe",{class:"yt-video two-items",src:"https://www.youtube.com/embed/sfmMcrbiX0c",title:"Build a game using Waku Protocol",frameborder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",allowfullscreen:!0})]}),"\n",(0,n.jsx)(s.h2,{id:"installation",children:"Installation"}),"\n",(0,n.jsxs)(s.p,{children:["Install the ",(0,n.jsx)(s.code,{children:"@waku/sdk"})," package using your preferred package manager:"]}),"\n","\n",(0,n.jsxs)(i.A,{groupId:"package-manager",children:[(0,n.jsx)(o.A,{value:"npm",label:"NPM",children:(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-shell",children:"npm install @waku/sdk\n"})})}),(0,n.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-shell",children:"yarn add @waku/sdk\n"})})})]}),"\n",(0,n.jsxs)(s.p,{children:["You can also use the ",(0,n.jsx)(s.code,{children:"@waku/sdk"})," package via a CDN without installing it on your system:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-js",children:'import * as waku from "https://unpkg.com/@waku/sdk@latest/bundle/index.js";\n'})}),"\n",(0,n.jsx)(s.h2,{id:"message-structure",children:"Message structure"}),"\n",(0,n.jsxs)(s.p,{children:["We recommend creating a message structure for your application using ",(0,n.jsx)(s.a,{href:"https://protobuf.dev/",children:"Protocol Buffers"})," for the following reasons:"]}),"\n",(0,n.jsxs)(s.ol,{children:["\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.strong,{children:"Consistency:"})," Ensures uniform message format for easy parsing and processing."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.strong,{children:"Interoperability:"})," Facilitates effective communication between different parts of your application."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.strong,{children:"Compatibility:"})," Allows smooth communication between older and newer app versions."]}),"\n",(0,n.jsxs)(s.li,{children:[(0,n.jsx)(s.strong,{children:"Payload Size:"})," Minimizes payload overhead, especially for byte arrays, unlike JSON which adds significant overhead."]}),"\n"]}),"\n",(0,n.jsxs)(s.p,{children:["To get started, install the ",(0,n.jsx)(s.code,{children:"protobufjs"})," package using your preferred package manager:"]}),"\n",(0,n.jsxs)(i.A,{groupId:"package-manager",children:[(0,n.jsx)(o.A,{value:"npm",label:"NPM",children:(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-shell",children:"npm install protobufjs\n"})})}),(0,n.jsx)(o.A,{value:"yarn",label:"Yarn",children:(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-shell",children:"yarn add protobufjs\n"})})})]}),"\n",(0,n.jsxs)(s.p,{children:["You can also use the ",(0,n.jsx)(s.code,{children:"protobufjs"})," package via a CDN without installing it on your system:"]}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-js",children:'// Import the CDN\nimport "https://cdn.jsdelivr.net/npm/protobufjs@latest/dist/protobuf.min.js";\n'})}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-html",children:'\x3c!-- Or include the protobufjs script --\x3e\n<script src="https://cdn.jsdelivr.net/npm/protobufjs@latest/dist/protobuf.min.js"><\/script>\n'})}),"\n",(0,n.jsx)(s.h2,{id:"getting-started",children:"Getting started"}),"\n",(0,n.jsxs)(s.p,{children:["Have a look at the quick start guide and comprehensive tutorials to learn how to build applications using ",(0,n.jsx)(s.code,{children:"@waku/sdk"}),":"]}),"\n",(0,n.jsxs)(s.table,{children:[(0,n.jsx)(s.thead,{children:(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.th,{children:"Guide"}),(0,n.jsx)(s.th,{children:"Description"})]})}),(0,n.jsxs)(s.tbody,{children:[(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.td,{children:(0,n.jsx)(s.a,{href:"/build/javascript/reliable-channels",children:"Send and Receive Messages in a Reliable Channel"})}),(0,n.jsx)(s.td,{children:"Learn how to send and receive messages with a convenient SDK that provide various reliable functionalities out-of-the-box."})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.td,{children:(0,n.jsx)(s.a,{href:"/build/javascript/light-send-receive",children:"Send and Receive Messages Using Light Push and Filter"})}),(0,n.jsxs)(s.td,{children:["Learn how to send and receive messages on light nodes using the ",(0,n.jsx)(s.a,{href:"/learn/concepts/protocols#light-push",children:"Light Push"})," and ",(0,n.jsx)(s.a,{href:"/learn/concepts/protocols#filter",children:"Filter"})," protocols"]})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.td,{children:(0,n.jsx)(s.a,{href:"/build/javascript/store-retrieve-messages",children:"Retrieve Messages Using Store Protocol"})}),(0,n.jsxs)(s.td,{children:["Learn how to retrieve and filter historical messages on light nodes using the ",(0,n.jsx)(s.a,{href:"/learn/concepts/protocols#store",children:"Store protocol"})]})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.td,{children:(0,n.jsx)(s.a,{href:"/build/javascript/message-encryption",children:"Encrypt, Decrypt, and Sign Your Messages"})}),(0,n.jsxs)(s.td,{children:["Learn how to use the ",(0,n.jsx)(s.a,{href:"https://www.npmjs.com/package/@waku/message-encryption",children:"@waku/message-encryption"})," package to encrypt, decrypt, and sign your messages"]})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.td,{children:(0,n.jsx)(s.a,{href:"/build/javascript/use-waku-react",children:"Build React DApps Using @waku/react"})}),(0,n.jsxs)(s.td,{children:["Learn how to use the ",(0,n.jsx)(s.a,{href:"https://www.npmjs.com/package/@waku/react",children:"@waku/react"})," package seamlessly integrate ",(0,n.jsx)(s.code,{children:"@waku/sdk"})," into a React application"]})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.td,{children:(0,n.jsx)(s.a,{href:"/build/javascript/use-waku-create-app",children:"Scaffold DApps Using @waku/create-app"})}),(0,n.jsxs)(s.td,{children:["Learn how to use the ",(0,n.jsx)(s.a,{href:"https://www.npmjs.com/package/@waku/create-app",children:"@waku/create-app"})," package to bootstrap your next ",(0,n.jsx)(s.code,{children:"@waku/sdk"})," project from various example templates"]})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.td,{children:(0,n.jsx)(s.a,{href:"/build/javascript/configure-discovery",children:"Bootstrap Nodes and Discover Peers"})}),(0,n.jsxs)(s.td,{children:["Learn how to bootstrap your node using ",(0,n.jsx)(s.a,{href:"/learn/concepts/static-peers",children:"Static Peers"})," and discover peers using ",(0,n.jsx)(s.a,{href:"/learn/concepts/dns-discovery",children:"DNS Discovery"})]})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.td,{children:(0,n.jsx)(s.a,{href:"/build/javascript/run-waku-nodejs",children:"Run @waku/sdk in a NodeJS Application"})}),(0,n.jsxs)(s.td,{children:["Learn our suggested approach for using the ",(0,n.jsx)(s.code,{children:"@waku/sdk"})," package within a NodeJS application"]})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.td,{children:(0,n.jsx)(s.a,{href:"/build/javascript/debug-waku-dapp",children:"Debug Your Waku DApp and WebSocket"})}),(0,n.jsxs)(s.td,{children:["Learn how to troubleshoot your Waku DApp using debug logs and check ",(0,n.jsx)(s.a,{href:"/learn/concepts/transports",children:"WebSocket"})," connections in ",(0,n.jsx)(s.a,{href:"/run-node/",children:"nwaku"})]})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.td,{children:(0,n.jsx)(s.a,{href:"/build/javascript/manage-filter",children:"Manage Your Filter Subscriptions"})}),(0,n.jsxs)(s.td,{children:["Learn how to manage ",(0,n.jsx)(s.a,{href:"/learn/concepts/protocols#filter",children:"filter subscriptions"})," and handle node disconnections in your application"]})]})]})]}),"\n",(0,n.jsx)(s.admonition,{type:"tip",children:(0,n.jsxs)(s.p,{children:["Until ",(0,n.jsx)(s.a,{href:"/learn/research#prevention-of-denial-of-service-dos-and-node-incentivisation",children:"node incentivisation"})," is in place, you should ",(0,n.jsx)(s.a,{href:"/run-node/",children:"operate extra nodes"})," alongside the ones provided by the Waku Network. When running a node, we recommend using the ",(0,n.jsx)(s.a,{href:"/build/javascript/configure-discovery#configure-dns-discovery-and-static-peers",children:"DNS Discovery and Static Peers"})," configuration to connect to both the Waku Network and your node."]})}),"\n",(0,n.jsx)(s.h2,{id:"get-help-and-report-issues",children:"Get help and report issues"}),"\n",(0,n.jsxs)(s.p,{children:["To engage in general discussions, seek assistance, or stay updated with the latest news, visit the ",(0,n.jsx)(s.code,{children:"#support"})," and ",(0,n.jsx)(s.code,{children:"#js-waku-contribute"})," channels on the ",(0,n.jsx)(s.a,{href:"https://discord.waku.org",children:"Waku Discord"}),"."]}),"\n",(0,n.jsxs)(s.p,{children:["If you discover bugs or want to suggest new features, do not hesitate to ",(0,n.jsx)(s.a,{href:"https://github.com/waku-org/js-waku/issues/new/",children:"open an issue"})," in the ",(0,n.jsx)(s.a,{href:"https://github.com/waku-org/js-waku",children:"js-waku repository"}),". Your feedback and contributions are highly valued and will help improve the ",(0,n.jsx)(s.code,{children:"@waku/sdk"})," package."]})]})}function p(e={}){const{wrapper:s}={...(0,r.R)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}}}]);