다음을 통해 공유

React Native에서 채팅 SDK 사용

이 문서에서는 React Native 앱에서 채팅을 지원하도록 Azure Communication Services 채팅 JavaScript SDK에서 패키지를 설정하는 방법을 설명합니다. 다음 단계는 Azure Communication Services JavaScript 채팅 SDK 1.1.1 이상에서 작동합니다.

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

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

React Native 프로젝트를 초기화한 후 다음 단계를 완료하여 React Native로 작업합니다@azure/communication-chat. 다음 단계를 완료하여 필요한 @azure/communication-chatNode 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. app.js 파일과 동일한 디렉터리에서 metro.config.js 파일을 만들거나 업데이트하여 React 네이티브 호환 Node Core 모듈을 구성합니다. 파일이 없는 경우 다음 콘텐츠를 사용하여 새 파일을 만듭니다.

    // metro.config.js

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

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

module.exports = config;

  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를 사용하여 채팅을 시작하는 방법을 알아봅니다.

  • Last updated on