概要

このガイドでは、クライアントサイドJavaScriptアプリにClient SDKを追加する方法を学びます。

前提条件

Client SDK には以下が必要です。 Node.js そしてエヌピーエム.

Client SDKをプロジェクトに追加するには

アプリに移動する

ターミナルを開く。既存のアプリがあれば、そのルートに移動する。そうでなければ、プロジェクト用に新しいディレクトリを作成する。

Client SDKをプロジェクトに追加します。

Client SDKパッケージをインストールします。

デフォルトを追加する package.json 走ることによって：

npm init -y

Client SDKをインストールするには、次のようにします。 npm:

npm install @vonage/client-sdk -s

Client SDKをコードにインポートします。

アプリケーションがES6モジュール構文を使用している場合、アプリケーション・コードの先頭付近でクライアント・モジュールをインポートできます：

import { VonageClient } from "@vonage/client-sdk";

アプリケーションが1つのページで実行される場合、scriptタグを使用してHTMLにモジュールをロードすることができます：

<script src="./node_modules/@vonage/client-sdk/dist/vonageClientSDK.min.js"></script>

のパスを確認してください。 vonageClientSDK.min.js がプロジェクト構成に合っているかどうかを確認してください。

Client SDK パッケージのロード

コンテンツ配信ネットワーク（CDN）から Client SDK をロードします：

インサイド <head> を追加する：

<!-- ******* Load vonageClientSDK from a CDN ****** -->
<script src="https://cdn.jsdelivr.net/npm/@vonage/client-sdk@latest/dist/vonageClientSDK.min.js"></script>

Client SDKをコードに追加します。

アプリケーション・コードの先頭付近に、以下を追加する：

//********* Get a reference to vonageClientSDK **********
const vonageClientSDK = window.vonageClientSDK;

注意：これは新しいブラウザでは必要ないかもしれません。もし、vonageClientSDKが見つからない/定義されていないというエラーが出たら、これを試してください。

アプリで Client SDK を使用する

ユーザーとJWTの作成

JSONウェブトークン（JWT）はVonageアプリケーションにログインするために必要です。Client SDKはユーザーを管理したりJWTを生成することができないため、バックエンドで処理する方法を選択する必要があります：

オンボーディングやテスト目的の場合、バックエンドをセットアップする前に、以下の方法でクライアントサイドのアプリを動作させることができます。コマンドラインからテストJWTを生成するクライアント側のJavaScriptにハードコーディングしてください。
実際の使用では、NodeまたはPHPを使用してサーバーからJWTを配信できます。バックエンドSDKを設定する。 jwt 変数にそのデータをフェッチする：
widgets.copy
```
fetch("/getJwt")
  .then(results => results.json())
  .then(data => {
    jwt = data.token;
  })
  .catch(err => console.error(err));
```
JWTの生成についてもっと読むこの記事で

VonageClientをインスタンス化し、セッションを作成する。

をインスタンス化する。 VonageClient はVonage Client SDKのロード方法によって異なります。

を搭載した場合 <script> タグを付けている：

const client = new vonageClientSDK.VonageClient();

を介してロードされた場合 import:

const client = new VonageClient();

セッションを作成するには、JWTを引数として createSession().

client.createSession(jwt)
  .then(sessionId => {
    console.log("Id of created session: ", sessionId);
  })
  .catch(error => {
    console.error("Error creating session: ", error);
  });

セッション状況

セッションが正常に作成された後にエラーが発生した場合は、そのエラーが sessionError インスタンス化された VonageClient.

// After creating a session
client.on("sessionError", (reason) => {
  console.error("Session error reason: ", reason);
});

結論

Client SDKをクライアントサイドJavaScriptアプリに追加し、セッションを作成しました。これで VonageClient クライアントをアプリに追加し、Client SDKの機能を使用します。

参照

データセンターの構成 - これは、アプリケーションにSDKを追加した後に実行できる高度なオプション設定です。

ナビゲーション

概要