Visão geral

Neste guia, você aprenderá como adicionar o Client SDK ao seu aplicativo JavaScript do lado do cliente.

Pré-requisitos

O Client SDK requer Node.js e NPM.

Para adicionar o Client SDK ao seu projeto

Acesse seu aplicativo

Abra o terminal. Se você já tiver um aplicativo, acesse a raiz dele. Caso contrário, crie um novo diretório para o seu projeto.

Adicione o Client SDK ao seu projeto

Instale o pacote do Client SDK

Adicionar um valor padrão package.json executando o seguinte:

npm init -y

Instale o Client SDK usando npm:

npm install @vonage/client-sdk -s

Importe o Client SDK para o seu código

Se sua aplicação estiver usando a sintaxe de módulos do ES6, você pode importar o módulo do cliente no início do código da sua aplicação:

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

Se o seu aplicativo for rodar em uma única página, você pode carregar o módulo no seu HTML usando uma tag de script:

Certifique-se de verificar se o caminho para vonageClientSDK.min.js está correto para a estrutura do seu projeto.

Como usar o Client SDK em seu aplicativo

Criação de usuários e JWTs

É necessário um JSON Web Token (JWT) para fazer login no seu aplicativo Vonage. O Vonage Client SDK não pode gerenciar usuários nem gerar JWTs; portanto, você deve escolher um método para lidar com isso no back-end:

  • Para fins de integração ou teste, você pode fazer com que seu aplicativo do lado do cliente funcione antes de configurar o back-end, da seguinte forma: gerando um JWT de teste a partir da linha de comando e codificá-lo diretamente no JavaScript do lado do cliente.

  • Na prática, você pode enviar JWTs do servidor usando o SDKs de backend, e definir o jwt variável no seu código, recuperando esses dados:

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

  • Saiba mais sobre como gerar JWTs neste artigo

Instancie o VonageClient e crie uma sessão

Instanciando o VonageClient depende de como você carrega o Vonage Client SDK.

Se for carregado com um <script> tag:

const client = new vonageClientSDK.VonageClient();

Se carregado por meio de import:

const client = new VonageClient();

Para criar uma sessão, passe seu JWT como argumento para createSession().

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

Status da sessão

Caso ocorram erros na sessão após ela ter sido criada com sucesso, você receberá essas informações na sessionError ouvinte de eventos no instanciado VonageClient.

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

Conclusão

Você adicionou o Client SDK ao seu aplicativo JavaScript do lado do cliente e criou uma sessão. Agora você pode usar o VonageClient cliente no seu aplicativo e utilize as funcionalidades do Client SDK.

Veja também