Vue d'ensemble

Dans ce guide, vous apprendrez à ajouter le Client SDK à votre application JavaScript côté client.

Conditions préalables

Le Client SDK requiert Node.js et NPM.

Pour ajouter le Client SDK à votre projet

Ouvrez votre terminal. Si vous avez une application existante, naviguez jusqu'à sa racine. Sinon, créez un nouveau répertoire pour votre projet.

Ajouter le Client SDK à votre projet

Installer le package Client SDK

Ajouter une valeur par défaut package.json en courant :

npm init -y

Installez le Client SDK à l'aide de npm:

npm install @vonage/client-sdk -s

Importez le Client SDK dans votre code

Si votre application utilise la syntaxe de module ES6, vous pouvez importer le module client vers le haut du code de votre application :

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

Si votre application s'exécute sur une seule page, vous pouvez charger le module dans votre code HTML à l'aide d'une balise de script :

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

Veillez à vérifier que le chemin d'accès à vonageClientSDK.min.js est correct pour la structure de votre projet.

Utiliser le Client SDK dans votre application

Création d'utilisateurs et de JWT

Un jeton Web JSON (JWT) est nécessaire pour se connecter à votre application Vonage. Le Client SDK ne peut pas gérer les utilisateurs ni générer des JWT, vous devez donc choisir une méthode de traitement en arrière-plan :

  • À des fins d'intégration ou de test, vous pouvez faire fonctionner votre application côté client avant de mettre en place un backend en procédant comme suit générer un JWT de test à partir de la ligne de commande et de le coder en dur dans votre JavaScript côté client.

  • Pour une utilisation concrète, vous pouvez délivrer des JWTs depuis le serveur en utilisant Node ou PHP SDK d'arrière-planet définir le jwt dans votre code en récupérant ces données :

    fetch("/getJwt")
  .then(results => results.json())
  .then(data => {
    jwt = data.token;
  })
  .catch(err => console.error(err));

  • En savoir plus sur la génération de JWT dans cet article

Instanciation de VonageClient et création d'une session

L'instanciation du VonageClient varie selon la façon dont vous chargez le Client SDK de Vonage.

Si elle est chargée d'un <script> étiquette :

const client = new vonageClientSDK.VonageClient();

S'il est chargé via import:

const client = new VonageClient();

Pour créer une session, transmettez votre JWT comme argument à la commande createSession().

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

Statut de la session

Si la session comporte des erreurs après avoir été créée avec succès, vous les recevrez sur la page d'accueil de la session. sessionError sur l'objet instancié VonageClient.

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

Conclusion

Vous avez ajouté le Client SDK à votre application JavaScript côté client et créé une session. Vous pouvez maintenant utiliser la fonction VonageClient dans votre application et utiliser les fonctionnalités du Client SDK.

Voir aussi