@vonage/client-sdk

Version:

The Client SDK is intended to provide a ready solution for developers to build Programmable Conversation applications across multiple Channels including: Messages, Voice, SIP, websockets, and App.

developer.vonage.com/client-sdk/overview

29 lines • 70.1 kB

HTML

View Raw

<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>@vonage/client-sdk - v0.0.0</title><meta name="description" content="Documentation for @vonage/client-sdk"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/search.js" id="tsd-search-script"></script><script async src="assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base="."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">@vonage/client-sdk - v0.0.0</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h2>@vonage/client-sdk - v0.0.0</h2></div><div class="tsd-panel tsd-typography"><a id="md:vonage-client-sdk" class="tsd-anchor"></a><h1><a href="#md:vonage-client-sdk">Vonage Client SDK</a></h1>The Client SDK is intended to provide a ready solution for developers to build Programmable Conversation applications across multiple Channels including: Messages, Voice, SIP, websockets, and App. <a id="md:installation" class="tsd-anchor"></a><h2><a href="#md:installation">Installation</a></h2>The SDK can be installed using the npm install command <pre><code class="language-bash">npm i @vonage/client-sdk </code><button>Copy</button></pre> <a id="md:sdk-setup" class="tsd-anchor"></a><h2><a href="#md:sdk-setup">SDK setup</a></h2><a id="md:with-bundler-webpack-vite-etc-and-react" class="tsd-anchor"></a><h3><a href="#md:with-bundler-webpack-vite-etc-and-react">With bundler (Webpack, Vite, etc.) and React</a></h3><pre><code class="language-js">import { VonageClient, ClientConfig, ConfigRegion, LoggingLevel } from '@vonage/client-sdk'; import { useState, useEffect } from 'react'; function App() { const [config] = useState(() => new ClientConfig(ConfigRegion.AP)); const [client] = useState(() => { // Initialize client with optional config (default: ERROR logging, US region). const client = new VonageClient({ loggingLevel: LoggingLevel.DEBUG, region: ConfigRegion.EU }); // Or update some options after initialization. client.setConfig(config); return client; }); const [session, setSession] = useState(); const [user, setUser] = useState(); const [error, setError] = useState(); // Create Session as soon as client is available useEffect(() => { if (!client) return; client .createSession('my-token') .then((session) => setSession(session)) .catch((error) => setError(error)); }, [client]); // Get User as soon as a session is available useEffect(() => { if (!client || !session) return; client .getUser('me') .then((user) => setUser(user)) .catch((error) => setError(error)); }, [client, session]); if (error) return <pre>{JSON.stringify(error)}</pre>; if (!session || !user) return <div>Loading...</div>; return <div>User {user.displayName || user.name} logged in</div>; } export default App; </code><button>Copy</button></pre> <a id="md:with-script-tag-umd" class="tsd-anchor"></a><h3><a href="#md:with-script-tag-umd">With script tag (UMD)</a></h3><pre><code class="language-html">  <script src="./node_modules/@vonage/client-sdk/dist/vonageClientSDK.min.js"></script> <script> const token = 'my-token'; // Initialize client with optional config (default: ERROR logging, US region). const client = new vonageClientSDK.VoiceClient({ loggingLevel: LoggingLevel.DEBUG, region: ConfigRegion.EU }); // Or update some options after initialization. client.setConfig({ region: ConfigRegion.AP }); client.createSession(token).then((Session) => {}); </script> </code><button>Copy</button></pre> <a id="md:with-cdn-es" class="tsd-anchor"></a><h3><a href="#md:with-cdn-es">With CDN (ES)</a></h3><pre><code class="language-js">import { VonageClient, ConfigRegion, LoggingLevel } from 'https://cdn.jsdelivr.net/npm/@vonage/client-sdk/dist/vonageClientSDK.esm.min.js'; // Initialize client with optional config (default: ERROR logging, US region). const client = new VonageClient({ loggingLevel: LoggingLevel.DEBUG, region: ConfigRegion.EU }); // Or update some options after initialization. client.setConfig({ region: ConfigRegion.AP }); (async () => { const token = 'my-token'; try { // Create Session const sessionId = await client.createSession(token); // Get User const user = await client.getUser('me'); console.log( `User ${ user.displayName || user.name } logged in with session ID: ${sessionId}` ); } catch (error) { // Log errors for either createSession or getUser console.error(error); } })(); </code><button>Copy</button></pre> <a id="md:example-usage" class="tsd-anchor"></a><h2><a href="#md:example-usage">Example Usage</a></h2>Below are several typical scenarios where the SDK is commonly utilized. <a id="md:make-an-outbound-call" class="tsd-anchor"></a><h3><a href="#md:make-an-outbound-call">Make an Outbound Call</a></h3><pre><code class="language-ts">const context = { callee: 'user1' }; const callId = await client.serverCall(context); </code><button>Copy</button></pre> <a id="md:answerreject-an-inbound-call" class="tsd-anchor"></a><h3><a href="#md:answerreject-an-inbound-call">Answer/Reject an Inbound Call</a></h3><pre><code class="language-ts">client.on('callInvite', async (callId, from, channelType) => { console.log(`Received call invite from ${from} on ${channelType}`); // Accept the call await client.answer(callId); // Reject the call await client.reject(callId); }); client.on('callInviteCancel', (callId, reason) => { if (reason === CancelReason.AnsweredElsewhere) { console.log(`Call ${callId} was answered elsewhere`); } else if (reason === CancelReason.RejectedElsewhere) { console.log(`Call ${callId} was rejected elsewhere`); } else if (reason === CancelReason.RemoteCancel) { console.log(`Call ${callId} was cancelled by the caller`); } else if (reason === CancelReason.RemoteTimeout) { console.log(`Call ${callId} timed out`); } }); </code><button>Copy</button></pre> <a id="md:hang-up-and-collect-stats" class="tsd-anchor"></a><h3><a href="#md:hang-up-and-collect-stats">Hang-up and Collect Stats</a></h3><pre><code class="language-ts">client.on('callHangup', (callId, callQuality, reason) => { if (reason.name == 'LOCAL_HANGUP') { console.log(`Call ${callId} was hung up locally`); } else if (reason.name == 'REMOTE_HANGUP') { console.log(`Call ${callId} was hung up remotely`); } else if (reason.name == 'REMOTE_REJECT') { console.log(`Call ${callId} was rejected remotely`); } else if (reason.name == 'REMOTE_NO_ANSWER_TIMEOUT') { console.log(`Call ${callId} timed out`); } else if (reason.name == 'MEDIA_TIMEOUT') { console.log(`Call ${callId} timed out`); } else { exhaustiveCheck(reason.name); } }); </code><button>Copy</button></pre> <a id="md:get-conversations" class="tsd-anchor"></a><h3><a href="#md:get-conversations">Get Conversations</a></h3><pre><code class="language-ts">const { conversations, nextCursor, previousCursor } = await client.getConversations({ order: PresentingOrder.DESC, pageSize: 10, cursor: undefined, includeCustomData: true, orderBy: OrderBy.CUSTOM_SORT_KEY }); </code><button>Copy</button></pre> <a id="md:send-text-messages" class="tsd-anchor"></a><h3><a href="#md:send-text-messages">Send Text Messages</a></h3><pre><code class="language-ts">const timestamp = await client.sendMessageTextEvent( 'CONVERSATION_ID', 'Hello World!' ); </code><button>Copy</button></pre> <a id="md:listen-for-conversation-events" class="tsd-anchor"></a><h3><a href="#md:listen-for-conversation-events">Listen for Conversation Events</a></h3><pre><code class="language-ts">const eventHandler = (event: ConversationEvent) => { if (event.kind == 'member:invited') { console.log(`Member invited: ${event.body.memberId}`); } else if (event.kind == 'member:joined') { console.log(`Member joined: ${event.body.memberId}`); } else if (event.kind == 'member:left') { console.log(`Member left: ${event.body.memberId}`); } else if (event.kind == 'ephemeral') { console.log(`Ephemeral event: ${event.body}`); } else if (event.kind == 'custom') { console.log(`Custom event: ${event.body}`); } else if (event.kind == 'message:text') { console.log(`Text message: ${event.body.text}`); } else if (event.kind == 'message:custom') { console.log(`Custom message: ${event.body.customData}`); } else if (event.kind == 'message:image') { console.log(`Image message: ${event.body.imageUrl}`); } else if (event.kind == 'message:video') { console.log(`Video message: ${event.body.videoUrl}`); } else if (event.kind == 'message:audio') { console.log(`Audio message: ${event.body.audioUrl}`); } else if (event.kind == 'message:file') { console.log(`File message: ${event.body.fileUrl}`); } else if (event.kind == 'message:vcard') { console.log(`Vcard message: ${event.body.vcardUrl}`); } else if (event.kind == 'message:location') { console.log(`Location message: ${event.body.location}`); } else if (event.kind == 'message:template') { console.log(`Template message: ${event.body.template}`); } else if (event.kind == 'event:delete') { console.log(`Template message: ${event.body}`); } else { exhaustiveCheck(event); } }; const listener = client.on('conversationEvent', eventHandler); client.off('conversationEvent', listener); </code><button>Copy</button></pre> <a id="md:documentation-and-examples" class="tsd-anchor"></a><h2><a href="#md:documentation-and-examples">Documentation and examples</a></h2>Visit <a href="https://developer.vonage.com/tools">Vonage website</a> <a id="md:license" class="tsd-anchor"></a><h2><a href="#md:license">License</a></h2>Copyright (c) 2023 Vonage, Inc. All rights reserved. Licensed only under the Vonage Client SDK License Agreement (the "License") located at <a href="https://github.com/nexmoinc/conversation-js-sdk/blob/master/LICENSE">LICENSE</a>. By downloading or otherwise using our software or services, you acknowledge that you have read, understand and agree to be bound by the Vonage Client SDK License Agreement and Privacy Policy. You may not use, exercise any rights with respect to or exploit this SDK, or any modifications or derivative works thereof, except in accordance with the License. <a href="https://www.vonage.com/communications-apis/"><img src="https://developer.nexmo.com/images/logos/vbc-logo.svg" width="30%"></a> </div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-index-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><h4 class="uppercase">Member Visibility</h4><form><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg>Protected</label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg>Private</label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg>Inherited</label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg>External</label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-alpha" name="alpha" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="non