Compartilhar via

Início Rápido: como usar o SDK de Chat com React Native

  • Artigo

Neste início rápido, você configurará os pacotes no SDK do JavaScript do chat Serviços de Comunicação do Azure para dar suporte ao chat em seu aplicativo React Native. As etapas descritas no início rápido têm suporte para o SDK de Chat JavaScript 1.1.1 dos Serviços de Comunicação do Azure JavaScript e posterior.

Configurar os pacotes de chat para trabalhar com React Native

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

Após inicializar seu projeto do React Native, conclua as etapas a seguir para fazer com que o @azure/communication-chat funcione com o React Native. As etapas instalam os pacotes que contêm portas do React Native dos módulos do Node Core necessários no @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. Atualize metro.config.js para usar módulos do Node Core compatíveis com 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. Adicione os seguintes import comandos na parte superior do 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

Neste início rápido, você aprendeu a configurar os pacotes dos Serviços de Comunicação necessários para adicionar chat ao seu aplicativo em um ambiente de React Native.

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