Visión general

En esta guía aprenderás a añadir el Client SDK a tu aplicación de 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 el terminal. Si ya tienes una aplicación, ve a su directorio raíz. Si no es así, crea un nuevo directorio para tu proyecto.

Añade el Client SDK a tu proyecto

Instalar el paquete Client SDK

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

npm init -y

Instala el Client SDK utilizando npm:

npm install @vonage/client-sdk -s

Importe el Client SDK a su código

Si tu aplicación utiliza la sintaxis de módulos de ES6, puedes importar el módulo del cliente al principio del código de tu 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úrate de comprobar que la ruta a vonageClientSDK.min.js es correcto para la estructura de su proyecto.

Cómo utilizar el Client SDK en tu 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.

  • En la práctica, puedes enviar JWT desde el servidor utilizando el 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

Crear una instancia de la 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, pasa tu 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 una vez creada correctamente, se te notificarán en el 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.

Véase también