Uso del SDK de Chat con React Native

En este artículo se describe cómo configurar los paquetes en el SDK de JavaScript de Chat de Azure Communication Services para admitir el chat en la aplicación React Native. Los pasos siguientes funcionan para el SDK de chat de JavaScript de Azure Communication Services 1.1.1 y versiones posteriores.

Configuración de los paquetes de chat para trabajar con React Native

Actualmente, los paquetes de chat de Communication Services están disponibles como paquetes de nodo. Dado que no todos los módulos de Node son compatibles con React Native, los módulos requieren un puerto nativo de React para que funcione.

Después de inicializar el proyecto de React Native, complete los pasos siguientes para trabajar @azure/communication-chat con React Native. Complete los pasos siguientes para instalar los paquetes que contienen puertos nativos de React de los módulos de Node Core necesarios en @azure/communication-chat.

1. Instale node-libs-react-native:

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

2. Instale stream-browserify:

   npm install stream-browserify --save-dev
   

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

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

4. Instale react-native-url-polyfill:

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

5. Actualice metro.config.js para usar módulos de Node Core compatibles con React Native:

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

6. Agregue los comandos import siguientes en la parte superior del archivo de punto de entrada:

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

7. Instale paquetes de Communication Services:

   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
   

Pasos siguientes

En este artículo se describe cómo configurar los paquetes de Communication Services necesarios para agregar chat a la aplicación en un entorno de React Native.

Aprenda a usar el SDK de chat para iniciar un chat.