Visión general

En esta guía aprenderá a añadir el Client SDK a su aplicación JavaScript del lado del cliente.

Requisitos previos

El Client SDK requiere Node.js y MNP.

Para añadir el Client SDK a su proyecto

Abre tu terminal. Si ya tienes una aplicación, navega hasta su raíz. Si no, crea un nuevo directorio para tu proyecto.

Añada el Client SDK a su proyecto

Instalar el paquete Client SDK

Añadir un valor por defecto package.json corriendo:

npm init -y

Instale el Client SDK mediante npm:

npm install @vonage/client-sdk -s

Importe el Client SDK a su código

Si su aplicación utiliza la sintaxis de módulos ES6, puede importar el módulo cliente cerca de la parte superior del código de su aplicación:

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

Si su aplicación se ejecutará en una sola página, puede cargar el módulo en su HTML utilizando una etiqueta script:

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

Asegúrese de comprobar que la ruta a vonageClientSDK.min.js es correcto para la estructura de su proyecto.

Uso del Client SDK en su aplicación

Creación de usuarios y JWT

Se necesita un token web JSON (JWT) para iniciar sesión en tu aplicación de Vonage. El Client SDK no puede administrar usuarios ni generar JWT, por lo que debes elegir un método para manejarlo en el backend:

  • Para realizar pruebas, puede hacer que su aplicación cliente funcione antes de configurar el backend. generar un JWT de prueba desde la línea de comandos y codificarlo en el JavaScript del cliente.

  • Para el uso en el mundo real, puede entregar JWTs desde el servidor utilizando el Node o PHP SDK de backendy ajuste el jwt en su código mediante la obtención de esos datos:

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

  • Más información sobre la generación de JWT en este artículo

Instanciar VonageClient y crear una sesión

Instanciación del VonageClient varía según cómo cargues el Vonage Client SDK.

Si se carga con un <script> etiqueta:

const client = new vonageClientSDK.VonageClient();

Si se carga a través de import:

const client = new VonageClient();

Para crear una sesión, pase su JWT como argumento a createSession().

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

Estado de la sesión

Si se produce algún error con la sesión después de que se haya creado correctamente, lo recibirá en la pantalla sessionError en la instancia VonageClient.

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

Conclusión

Ha añadido el Client SDK a su aplicación JavaScript del lado del cliente y ha creado una sesión. Ahora puede utilizar la función VonageClient en su aplicación y utilice las funciones del Client SDK.

Ver también