docs.waku.org/assets/js/488ca57d.22640f4c.js

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