Compartir a través de

Inicio rápido: uso del SDK de chat con React Native

  • Artículo

En esta guía de inicio rápido, configurará los paquetes en el SDK de JavaScript de chat de Azure Communication Services para admitir el chat en la aplicación de React Native. Los pasos descritos en el inicio rápido son compatibles con el SDK 1.1.1 de chat de JavaScript y versiones posteriores de Azure Communication Services.

Configurar los paquetes de chat para trabajar con React Native

Actualmente, los paquetes de chat de Communication Services están disponibles como paquetes de nodo. Debido a que no todos los módulos Node son compatibles con React Native, los módulos requerirán un puerto React Native para funcionar.

Después de inicializar el proyecto de React Native, complete los pasos siguientes para que @azure/communication-chat trabaje con React Native. Los pasos instalan los paquetes que contienen puertos de React Native 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 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 siguientes import comandos 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. Instalación de 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 esta guía de inicio rápido, ha aprendido a configurar los paquetes de Communication Services necesarios para agregar el chat a la aplicación en un entorno de React Native.

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