Partilhar via

Usar o SDK de bate-papo com o React Native

Este artigo descreve como configurar os pacotes no SDK JavaScript do Chat dos Serviços de Comunicação do Azure para dar suporte ao bate-papo em seu aplicativo React Native. As etapas a seguir funcionam para o SDK de Chat JavaScript dos Serviços de Comunicação do Azure 1.1.1 e posterior.

Configurar os pacotes de chat para trabalhar com o React Native

Atualmente, os pacotes de chat dos Serviços de Comunicação estão disponíveis como pacotes Node. Como nem todos os módulos Node são compatíveis com o React Native, os módulos exigem uma porta React Native para funcionar.

Depois de inicializar seu projeto React Native, conclua as etapas a seguir para trabalhar @azure/communication-chat com o React Native. Conclua as etapas a seguir para instalar os pacotes que contêm portas React Native dos módulos Node Core necessários no @azure/communication-chat.

  1. Instalar node-libs-react-native:

    npm install node-libs-react-native --save-dev

  2. Instalar stream-browserify:

    npm install stream-browserify --save-dev

  3. Instalar react-native-get-random-values:

    npm install react-native-get-random-values --save-dev

  4. Instalar react-native-url-polyfill:

    npm install react-native-url-polyfill --save-dev

  5. Crie ou atualize o arquivo metro.config.js no mesmo diretório que o arquivo app.js para configurar módulos Node Core compatíveis com o React Native. Se o arquivo não existir, crie um novo com o seguinte conteúdo:

    // metro.config.js

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

config.resolver.extraNodeModules = {
  ...require('node-libs-react-native'),
  stream: require.resolve('stream-browserify'),
  net: require.resolve('node-libs-react-native/mock/net'),
  tls: require.resolve('node-libs-react-native/mock/tls'),
};

module.exports = config;

  6. Adicione os comandos import seguintes no início do ficheiro de ponto de entrada:

    import 'node-libs-react-native/globals';
import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';

  7. Instale pacotes de Serviços de Comunicação:

    npm install @azure/communication-common@1.1.0 --save

npm install @azure/communication-signaling@1.0.0-beta.11 --save

npm install @azure/communication-chat@1.1.1 --save

Próximos passos

Este artigo descreveu como configurar os pacotes de Serviços de Comunicação necessários para adicionar bate-papo ao seu aplicativo em um ambiente React Native.

Saiba como usar o SDK de bate-papo para iniciar um bate-papo.

  • Last updated on