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.