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

  • Artigo

Neste início rápido, vai configurar os pacotes no Azure Communication Services SDK JavaScript do Chat para suportar o chat na sua aplicação React Native. Os passos descritos no início rápido são suportados para Azure Communication Services JavaScript Chat SDK 1.1.1 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 do Node. Uma vez que nem todos os módulos do Node são compatíveis com React Native, os módulos necessitam de uma porta React Native para funcionar.

Depois de inicializar o projeto React Native, conclua os seguintes passos para @azure/communication-chat trabalhar com React Native. Os passos instalam os pacotes que contêm React Native portas 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. Atualize metro.config.js para utilizar módulos 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 ficheiro 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 do 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

Passos seguintes

Neste início rápido, aprendeu a configurar os pacotes dos Serviços de Comunicação necessários para adicionar chat à sua aplicação num ambiente de React Native.

Saiba como utilizar o SDK de Chat para iniciar uma conversa.