Usar o SDK de Chat com o React Native

Este artigo descreve como configurar os pacotes no SDK javaScript de Chat dos Serviços de Comunicação do Azure para dar suporte ao chat 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 bate-papo do Communication Services estão disponíveis como pacotes Node. Como nem todos os módulos do Node são compatíveis com o React Native, é necessário um porte para React Native para que os módulos funcionem.

Depois de inicializar o 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 do Node Core necessários em @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 do React Native-compatible Node Core. Se o arquivo não existir, crie um 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 topo do seu arquivo de ponto de entrada:

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

7. Instalar pacotes dos 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óximas etapas

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

Saiba como usar o SDK de Chat para iniciar um chat.