import {hop} from '@onehop/client';// hop.init should be called as early as possible in your application's lifecyclehop.init({ projectId: 'project_xxx', // replace with your project ID});
Subscribing to a unprotected channel
Unprotected channels allow anyone to connect as long as they know the channel id. You can learn more about types of channels on this page.
import {hop} from '@onehop/client';const instance = hop.init({projectId: ''});// Subscribe this client to a channelinstance.subscribeToChannel('HopIsReallyCool');instance.on('STATE_UPDATE', data => { console.log(`Look at all those chickens`, data.state);});
Send a message to a channel
import {hop} from '@onehop/client';const instance = hop.init({projectId: '', token: ''});instance.sendMessage('votes', 'add', 1);instance.sendMessage('public-chat', 'kashcafe', { user: 'Kashall', message: 'This is a message!',});
{"docsConfig":{"$schema":"https://mintlify.com/docs.json","theme":"mint","name":"Hop","colors":{"primary":"#8F64F2","light":"#BFA6F9","dark":"#6036BF"},"favicon":"/favicon.svg","logo":{"light":"https://mintcdn.com/hopio/cq2ctXa-N8Jv0svA/logo/light.svg?fit=max\u0026auto=format\u0026n=cq2ctXa-N8Jv0svA\u0026q=85\u0026s=9a89c9116e891086ed4c6444069381ae","dark":"https://mintcdn.com/hopio/cq2ctXa-N8Jv0svA/logo/dark.svg?fit=max\u0026auto=format\u0026n=cq2ctXa-N8Jv0svA\u0026q=85\u0026s=5865ce776745941e9f171dfa11fbcfc1"},"navbar":{"primary":{"type":"button","label":"Console","href":"https://console.hop.io"}},"footer":{"socials":{"twitter":"https://twitter.com/joinhop","github":"https://github.com/hopinc","discord":"https://discord.gg/hop"}},"integrations":{"gtm":{"tagId":"GTM-PWWFBQW"}},"navigation":{"global":{"anchors":[{"anchor":"GitHub","href":"https://github.com/hopinc","icon":"github"},{"anchor":"Community","href":"https://discord.com/invite/hop","icon":"discord"}]},"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"hopio","hasAudioNarration":false,"actualSubdomain":"hopio","customDomains":["docs.hop.io"],"gitSource":{"type":"github","owner":"hopinc","repo":"docs","deployBranch":"main","contentDirectory":"","isPrivate":false,"mountPath":"","label":""},"entitlements":{"AI_CHAT":{"status":"DISABLED"}},"buildId":"6ae9140b9e7a315fb6341126:success","clientVersion":"0.0.4143","searchFilterCounts":[{"language":"default","tag":"Documentation","count":50},{"language":"default","tag":"Other Products","count":17},{"language":"default","tag":"Ignite","count":15},{"language":"default","tag":"Channels","count":11},{"language":"default","tag":"Reference","count":10},{"language":"default","tag":"Pipe","count":6},{"language":"default","tag":"SDKs","count":6},{"language":"default","tag":"Language Support","count":5},{"language":"default","tag":"Getting Started","count":4},{"language":"default","tag":"CLI","count":3}]},"assistantConfig":{},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-rbac-roles","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"rbac-expansion","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-metadata","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-serve","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"live-agents","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"sdks/client/js","slug":"/sdks/client/js","pageMetadata":{"title":"JS Client SDK","sidebarTitle":"JavaScript","description":"The Hop JS Client SDK allows you to interact with Hop products from your frontend application.","href":"/sdks/client/js"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"The Hop JS Client SDK allows you to interact with Hop products from your frontend application.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,code:`code`,p:`p`,pre:`pre`,span:`span`,..._provideComponents(),...props.components},{CodeBlock,Heading}=_components;if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!Heading)_missingMdxReference(`Heading`,true);return _jsxs(_Fragment,{children:[_jsx(Heading,{level:`2`,id:`installation`,children:`Installation`}),`\n`,_jsxs(_components.p,{children:[`The JS Client SDK is hosted on NPM under `,_jsx(_components.code,{children:`@onehop/client`}),`.`]}),`\n`,_jsx(Heading,{level:`4`,id:`npm`,children:`npm`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`1`,language:`shellscript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`shellscript`,children:_jsxs(_components.code,{language:`shellscript`,numberOfLines:`1`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#DCDCAA`},children:`npm`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` i`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` @onehop/client`})]}),`\n`]})})}),`\n`,_jsx(Heading,{level:`4`,id:`yarn`,children:`Yarn`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`1`,language:`shellscript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`shellscript`,children:_jsxs(_components.code,{language:`shellscript`,numberOfLines:`1`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#DCDCAA`},children:`yarn`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` add`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` @onehop/client`})]}),`\n`]})})}),`\n`,_jsx(Heading,{level:`2`,id:`initializing-the-sdk`,children:`Initializing the SDK`}),`\n`,_jsxs(_components.p,{children:[`Find your project ID on `,_jsx(_components.a,{href:`https://console.hop.io/project/settings`,children:`this page`}),`.`]}),`\n`,_jsx(CodeBlock,{filename:`JSX`,numberOfLines:`7`,language:`jsx`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`jsx`,children:_jsxs(_components.code,{language:`jsx`,numberOfLines:`7`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`import`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` {`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`hop`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`} `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`from`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` '@onehop/client'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// hop.init should be called as early as possible in your application's lifecycle`})}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`hop`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`init`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`({`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`\tprojectId:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` 'project_xxx'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// replace with your project ID`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`});`})}),`\n`]})})}),`\n`,_jsx(Heading,{level:`2`,id:`subscribing-to-a-unprotected-channel`,children:`Subscribing to a unprotected channel`}),`\n`,_jsxs(_components.p,{children:[`Unprotected channels allow anyone to connect as long as they know the channel id. You can learn more about types of channels on `,_jsx(_components.a,{href:`https://react.dev/learn/manipulating-the-dom-with-refs`,children:`this page`}),`.`]}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`10`,language:`jsx`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`jsx`,children:_jsxs(_components.code,{language:`jsx`,numberOfLines:`10`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`import`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` {`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`hop`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`} `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`from`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` '@onehop/client'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` instance`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` hop`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`init`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`({`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`projectId:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` ''`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`});`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:`// Subscribe this client to a channel`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`instance`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`subscribeToChannel`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'HopIsReallyCool'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`);`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`instance`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`on`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'STATE_UPDATE'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#9CDCFE`},children:`data`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:` =>`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` {`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`\tconsole`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`log`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:\"`Look at all those chickens`\"}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`data`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`state`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`);`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`});`})}),`\n`]})})}),`\n`,_jsx(Heading,{level:`2`,id:`send-a-message-to-a-channel`,children:`Send a message to a channel`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`9`,language:`jsx`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`jsx`,children:_jsxs(_components.code,{language:`jsx`,numberOfLines:`9`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`import`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` {`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`hop`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`} `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`from`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` '@onehop/client'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#569CD6`},children:`const`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#4FC1FF`},children:` instance`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:` =`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` hop`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`init`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`({`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`projectId:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` ''`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`token:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` ''`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`});`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`instance`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`sendMessage`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'votes'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'add'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:`1`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`);`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`instance`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#8250DF`,\"--shiki-dark\":`#DCDCAA`},children:`sendMessage`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`(`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'public-chat'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'kashcafe'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, {`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`\tuser:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` 'Kashall'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`\tmessage:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` 'This is a message!'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`});`})}),`\n`]})})})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"JS Client SDK","sidebarTitle":"JavaScript","description":"The Hop JS Client SDK allows you to interact with Hop products from your frontend application.","href":"/sdks/client/js"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Installation","slug":"installation","depth":2,"children":[{"title":"npm","slug":"npm","depth":4,"children":[]},{"title":"Yarn","slug":"yarn","depth":4,"children":[]}]},{"title":"Initializing the SDK","slug":"initializing-the-sdk","depth":2,"children":[]},{"title":"Subscribing to a unprotected channel","slug":"subscribing-to-a-unprotected-channel","depth":2,"children":[]},{"title":"Send a message to a channel","slug":"send-a-message-to-a-channel","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"hopio","siteName":"Hop","title":"JS Client SDK - Hop","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-01-06T22:44:41.603Z","originalFileLocation":"sdks/client/js.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"The Hop JS Client SDK allows you to interact with Hop products from your frontend application.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Hop\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/hopio/X4tI8aJw6pD0WAgR/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/hopio/X4tI8aJw6pD0WAgR/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/hopio/X4tI8aJw6pD0WAgR/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/hopio/X4tI8aJw6pD0WAgR/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/hopio/X4tI8aJw6pD0WAgR/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/hopio/X4tI8aJw6pD0WAgR/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/hopio/X4tI8aJw6pD0WAgR/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/hopio/X4tI8aJw6pD0WAgR/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/hopio/X4tI8aJw6pD0WAgR/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"JS Client SDK - Hop\">\u003cmeta data-mint-head property=\"og:description\" content=\"The Hop JS Client SDK allows you to interact with Hop products from your frontend application.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Hop\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.hop.io/sdks/client/js\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://hopio.mintlify.site/_mintlify/api/og/v2?division=Client+Side\u0026amp;title=JS+Client+SDK\u0026amp;description=The+Hop+JS+Client+SDK+allows+you+to+interact+with+Hop+products+from+your+frontend+application.\u0026amp;theme=b9e1c4a707fb233ad5667986\u0026amp;signature=4279de5ac339d2a35dedb0d9b6c9e2cdbfc4a977dbca2ddce18919b650b1d4eb\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"JS Client SDK - Hop\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"The Hop JS Client SDK allows you to interact with Hop products from your frontend application.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://hopio.mintlify.site/_mintlify/api/og/v2?division=Client+Side\u0026amp;title=JS+Client+SDK\u0026amp;description=The+Hop+JS+Client+SDK+allows+you+to+interact+with+Hop+products+from+your+frontend+application.\u0026amp;theme=b9e1c4a707fb233ad5667986\u0026amp;signature=4279de5ac339d2a35dedb0d9b6c9e2cdbfc4a977dbca2ddce18919b650b1d4eb\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/hopio/X4tI8aJw6pD0WAgR/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Hop\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#8F64F2\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.hop.io/sdks/client/js\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/sdks/client/js.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.hop.io/#organization\",\"name\":\"Hop\",\"url\":\"https://docs.hop.io\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/hopio/cq2ctXa-N8Jv0svA/logo/light.svg?fit=max\u0026auto=format\u0026n=cq2ctXa-N8Jv0svA\u0026q=85\u0026s=9a89c9116e891086ed4c6444069381ae\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.hop.io#website\",\"name\":\"Hop\",\"url\":\"https://docs.hop.io\",\"publisher\":{\"@id\":\"https://docs.hop.io/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.hop.io/sdks/client/js#webpage\",\"url\":\"https://docs.hop.io/sdks/client/js\",\"name\":\"JS Client SDK\",\"description\":\"The Hop JS Client SDK allows you to interact with Hop products from your frontend application.\",\"dateModified\":\"2026-01-06T22:44:41.603Z\",\"isPartOf\":{\"@id\":\"https://docs.hop.io#website\"},\"breadcrumb\":{\"@id\":\"https://docs.hop.io/sdks/client/js#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.hop.io/sdks/client/js#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"SDKs\",\"item\":\"https://docs.hop.io/sdks/overview\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JS Client SDK\",\"item\":\"https://docs.hop.io/sdks/client/js\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.hop.io/sdks/client/js#article\",\"headline\":\"JS Client SDK\",\"name\":\"JS Client SDK\",\"description\":\"The Hop JS Client SDK allows you to interact with Hop products from your frontend application.\",\"url\":\"https://docs.hop.io/sdks/client/js\",\"mainEntityOfPage\":{\"@id\":\"https://docs.hop.io/sdks/client/js#webpage\"},\"dateModified\":\"2026-01-06T22:44:41.603Z\",\"publisher\":{\"@id\":\"https://docs.hop.io/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.hop.io#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Hop\",\"publisher\":{\"@type\":\"Organization\",\"name\":\"Hop\"},\"provider\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","agentPointerHref":"/sdks/client/js.md","siteName":"Hop","nav":{"global":{"anchors":[{"anchor":"GitHub","href":"https://github.com/hopinc","icon":"github"},{"anchor":"Community","href":"https://discord.com/invite/hop","icon":"discord"}]},"anchors":[{"anchor":"Documentation","icon":"book-open","groups":[{"group":"Getting Started","pages":[{"title":"Introduction","href":"/getting-started/introduction"},{"title":"Deploying to Hop","href":"/ignite/deploying"},{"group":"Quickstarts","pages":[{"title":"Node.js Express App","href":"/getting-started/quickstarts/express"},{"title":"Redis","href":"/getting-started/quickstarts/redis"},{"title":"Elixir Cluster","href":"/getting-started/quickstarts/elixir-cluster"}]}]},{"group":"CLI","pages":[{"title":"Overview","href":"/cli/overview"},{"title":"Hop CLI Completions","sidebarTitle":"Completions","href":"/cli/completions"},{"title":"Working in CI","sidebarTitle":"CI","href":"/cli/ci"}]},{"group":"Ignite","pages":[{"title":"Ignite","sidebarTitle":"Overview","href":"/ignite/overview"},{"title":"Deploying to Hop","href":"/ignite/deploying"},{"title":"Gateways","href":"/ignite/gateways"},{"title":"Private Networking","href":"/ignite/private-networking"},{"title":"Persistent Volumes","href":"/ignite/volumes"},{"title":"Health Checks","href":"/ignite/health-checks"},{"title":"Project Secrets","href":"/ignite/project-secrets"},{"title":"Images","href":"/ignite/images"},{"title":"Builds","href":"/ignite/builds"},{"title":"Port Forwarding","href":"/ignite/port-forwarding"},{"group":"Language Support","pages":[{"title":"Node","href":"/ignite/languages/node"},{"title":"Python","href":"/ignite/languages/python"},{"title":"Elixir","href":"/ignite/languages/elixir"},{"title":"Rust","href":"/ignite/languages/rust"},{"title":"Go","href":"/ignite/languages/go"}]}]},{"group":"Reference","pages":[{"title":"Hop Regions","sidebarTitle":"Regions","href":"/reference/regions"},{"title":"Webhooks","href":"/reference/webhooks"},{"title":"REST API","href":"/reference/rest-api"},{"title":"Project Tokens","href":"/reference/project-tokens"},{"title":"Billing Overview","sidebarTitle":"Billing \u0026 Free Trial","href":"/reference/billing"}]},{"group":"SDKs","pages":[{"title":"SDKs","sidebarTitle":"Overview","description":null,"href":"/sdks/overview"},{"group":"Client Side","pages":[{"title":"JS Client SDK","sidebarTitle":"JavaScript","href":"/sdks/client/js"},{"title":"React SDK","sidebarTitle":"React","description":"The Hop React library allows you to easily integrate Hop products, such as Channels and Pipe, into your frontend.","href":"/sdks/client/react"}]},{"group":"Server Side","pages":[{"title":"Server-side JS SDK","sidebarTitle":"JavaScript","href":"/sdks/server/js"},{"group":"Go","pages":[{"title":"Server Side Go API Client","href":"/sdks/server/go-api"},{"title":"Server Side Go Leap Client","href":"/sdks/server/go-leap"}]}]}]},{"group":"Other Products","pages":[{"group":"Channels","pages":[{"title":"Overview","href":"/other-products/channels/overview"},{"title":"Channel State","href":"/other-products/channels/channel-state"},{"title":"Tokens","href":"/other-products/channels/tokens"},{"group":"Reference","pages":[{"title":"React Channels implementation","sidebarTitle":"React","href":"/other-products/channels/reference/react"},{"title":"Creating Channels","href":"/other-products/channels/reference/creating-channels"},{"title":"Updating Channel State","sidebarTitle":"Channel State","href":"/other-products/channels/reference/updating-channel-state"},{"title":"Sending Messages to Hop Channels","sidebarTitle":"Sending Messages","href":"/other-products/channels/reference/sending-messages"},{"title":"Channel Stats","href":"/other-products/channels/reference/channel-stats"}]},{"group":"Internals","pages":[{"title":"Leap \u0026 Leap Edge","sidebarTitle":"Leap","href":"/other-products/channels/internals/leap"},{"title":"Payloads","href":"/other-products/channels/internals/payloads"},{"title":"Atlas Protocol","href":"/other-products/channels/internals/atlas-protocol"}]}]},{"group":"Pipe","pages":[{"title":"Pipe Overview","sidebarTitle":"Overview","href":"/other-products/pipe/overview"},{"title":"Pipe Getting Started","sidebarTitle":"Getting Started","href":"/other-products/pipe/getting-started"},{"title":"Pipe Client Implementation","sidebarTitle":"Client Implementation","href":"/other-products/pipe/client-implementation"},{"title":"Streaming to Pipe","href":"/other-products/pipe/streaming-to-pipe"},{"group":"Protocols","pages":[{"title":"Low-latency HLS (LLHLS)","sidebarTitle":"LLHLS","href":"/other-products/pipe/llhls"}]},{"group":"API Reference","pages":[{"title":"Creating a Pipe Room","sidebarTitle":"Room","href":"/other-products/pipe/room"}]}]}]}]}]},"basePath":"","title":"JS Client SDK - Hop","buildId":"dpl_Fyv1NbzwP68g2bEH2Roy98uY1zmE","deploymentId":"dpl_Fyv1NbzwP68g2bEH2Roy98uY1zmE","dynamics":[],"chunks":[]}