빠른 시작: React Native에서 채팅 SDK 사용

이 빠른 시작에서는 React Native 앱에서 채팅을 지원하도록 Azure Communication Services Chat JavaScript SDK에서 패키지를 설정합니다. 빠른 시작에 설명된 단계는 Azure Communication Services JavaScript Chat SDK 1.1.1 이상에서 지원됩니다.

React Native 작동하도록 채팅 패키지 설정

현재 Communication Services 채팅 패키지는 노드 패키지로 사용할 수 있습니다. 모든 노드 모듈이 React Native로 호환되는 것은 아니므로 모듈이 작동하려면 React Native 포트가 필요합니다.

React Native 프로젝트를 초기화한 후 다음 단계를 완료하여 React Native에서 @azure/communication-chat 작업을 수행합니다. 해당 단계에서는 @azure/communication-chat에 필요한 Node Core 모듈의 React Native 포트가 포함된 패키지를 설치합니다.

1. node-libs-react-native 설치:

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

2. stream-browserify 설치:

   npm install stream-browserify --save-dev
   

3. react-native-get-random-values 설치:

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

4. react-native-url-polyfill 설치:

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

5. React Native 호환 가능 Node Core 모듈을 사용하도록 metro.config.js를 업데이트합니다.

   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. 진입점 파일의 맨 위에 다음 import 명령을 추가합니다.

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

7. 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
   

다음 단계

이 빠른 시작에서는 React Native 환경에서 앱에 채팅을 추가하는 데 필요한 Communication Services 패키지를 설정하는 방법을 알아보았습니다.

채팅 SDK를 사용하여 채팅을 시작하는 방법을 알아봅니다.