React Native で Chat SDK を使用する

この記事では、React Native アプリでチャットをサポートするように Azure Communication Services Chat JavaScript SDK のパッケージを設定する方法について説明します。 次の手順は、Azure Communication Services JavaScript Chat SDK 1.1.1 以降で機能します。

React Native で動作するようにチャット パッケージを設定する

現時点では、Communication Services チャット パッケージは Node パッケージとして使用できます。 すべての Node モジュールが React Native と互換性があるわけではないため、モジュールが動作するには React Native ポートが必要です。

React Native プロジェクトを初期化したら、次の手順を実行して、React Native で@azure/communication-chat動作するようにします。 次の手順を実行して、 @azure/communication-chatで必要な Node Core モジュールの React ネイティブ ポートを含むパッケージをインストールします。

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 ネイティブ互換 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 パッケージを設定する方法について説明しました。

Chat SDK を使用してチャットを開始する方法について説明します。