Übersicht

In dieser Anleitung erfahren Sie, wie Sie das Client SDK zu Ihrer clientseitigen JavaScript-Anwendung hinzufügen.

Voraussetzungen

Das Client SDK erfordert Node.js und NPM.

So fügen Sie das Client SDK zu Ihrem Projekt hinzu

Navigieren Sie zu Ihrer Anwendung

Öffnen Sie Ihr Terminal. Wenn Sie eine bestehende Anwendung haben, navigieren Sie zu deren Stammverzeichnis. Andernfalls erstellen Sie ein neues Verzeichnis für Ihr Projekt.

Fügen Sie das Client SDK zu Ihrem Projekt hinzu

Installieren Sie das Client SDK-Paket

Einen Standard hinzufügen package.json durch Laufen:

npm init -y

Installieren Sie das Client SDK mit npm:

npm install @vonage/client-sdk -s

Importieren Sie das Client SDK in Ihren Code

Wenn Ihre Anwendung die ES6-Modulsyntax verwendet, können Sie das Clientmodul am Anfang Ihres Anwendungscodes importieren:

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

Wenn Ihre Anwendung auf einer einzelnen Seite läuft, können Sie das Modul mit einem Skript-Tag in Ihr HTML laden:

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

Vergewissern Sie sich, dass der Pfad zu vonageClientSDK.min.js für Ihre Projektstruktur korrekt ist.

Laden Sie das Client SDK-Paket

Laden Sie das Client SDK von einem Content Delivery Network (CDN):

Im Inneren der <head> Ihrer HTML-Datei hinzufügen:

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

Fügen Sie das Client SDK in Ihren Code ein

Fügen Sie am Anfang Ihres Anwendungscodes etwas hinzu:

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

Hinweis: In neueren Browsern ist dies möglicherweise nicht erforderlich. Wenn Sie eine Fehlermeldung erhalten, dass das vonageClientSDK nicht gefunden/definiert ist, versuchen Sie dies.

Verwendung des Client SDK in Ihrer Anwendung

Benutzer und JWTs erstellen

Ein JSON Web Token (JWT) ist erforderlich, um sich bei Ihrer Vonage Application anzumelden. Das Client SDK kann weder Benutzer verwalten noch JWTs generieren, daher müssen Sie eine Methode zur Handhabung im Backend wählen:

Für Einführungs- oder Testzwecke können Sie Ihre clientseitige Anwendung zum Laufen bringen, bevor Sie ein Backend einrichten, indem Sie Generierung eines Test-JWTs aus der Kommandozeile und in Ihrem clientseitigen JavaScript fest zu kodieren.
In der Praxis können Sie JWTs vom Server aus über die Node- oder PHP Backend-SDKsund setzen die jwt Variable in Ihrem Code, indem Sie diese Daten abrufen:
widgets.copy
```
fetch("/getJwt")
  .then(results => results.json())
  .then(data => {
    jwt = data.token;
  })
  .catch(err => console.error(err));
```
Lesen Sie mehr über die Erzeugung von JWTs in diesem Artikel

VonageClient instanziieren und eine Sitzung erstellen

Die Instanziierung der VonageClient hängt davon ab, wie Sie das Vonage Client SDK laden.

Wenn sie mit einer <script> Tag:

const client = new vonageClientSDK.VonageClient();

Wenn sie über import:

const client = new VonageClient();

Um eine Sitzung zu erstellen, übergeben Sie Ihr JWT als Argument an createSession().

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

Status der Sitzung

Treten nach der erfolgreichen Erstellung der Sitzung Fehler auf, werden diese in der sessionError Ereignis-Listener für die instanziierte VonageClient.

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

Schlussfolgerung

Sie haben das Client SDK zu Ihrer clientseitigen JavaScript-Anwendung hinzugefügt und eine Sitzung erstellt. Sie können nun die VonageClient Client in Ihrer Anwendung und nutzen Sie die Funktionen des Client SDK.

Siehe auch

Konfiguration des Rechenzentrums - Dies ist eine erweiterte optionale Konfiguration, die Sie nach dem Hinzufügen des SDK zu Ihrer Anwendung vornehmen können.

Navigation