ReactとFirebaseを使用してリアルタイムチャットアプリを構築します

このチュートリアルでは、ユーザー認証に焦点を当てたReactとFirebaseを使用して、リアルタイムチャットアプリケーションの構築を実証しています。サードパーティ認証プロバイダー（Google、GitHub）を統合し、リアルタイムのデータ同期のためにFirebaseのリアルタイムデータベースを活用します。 Reactで構築されていますが、コアコンセプトは他のフレームワークに転送できます。

ファイアーベースの理解

Googleのアプリ開発プラットフォームであるFirebaseは、認証、リアルタイムNOSQLデータベース、クラウド関数、静的ホスティング、クラウドストレージなど、包括的なツールスイートを提供しています。その寛大なフリーティアは、このプロジェクトに最適で、認証（電子メール/パスワード、Google、GitHub）とリアルタイムデータベースアクセス（同時接続とストレージに制限がある）を提供します。

このアプリケーションで使用されるキーファイアベース機能：

• 認証： GoogleとGithubを使用した電子メール/パスワードとシングルサインオン（SSO）を介してユーザーログインを保護します。
• リアルタイムデータベース：リアルタイムデータの更新を有効にするNOSQLデータベース。

チャットアプリケーション

当社のアプリケーション「Chatty」を使用すると、認証されたユーザーがメッセージを送信および受信できます。ユーザーは電子メール/パスワードで登録するか、Google/Github SSOを使用できます。ソースコードは参照可能です。

セットアップと構成

1. FireBaseプロジェクト： FireBaseコンソールで新しいプロジェクトを作成します。名前を付けます（例：「チャット」）。オプションで分析を有効にすることができます。
2. Webアプリのセットアップ： FireBaseコンソールで、「Web」セクションに移動してアプリを登録します。構成の詳細（APIキー、著者ドメインなど）を記録します - 後で必要になります。
3. 認証プロバイダー： FireBase認証設定で電子メール/パスワード、Google、およびGitHubのサインインメソッドを有効にします。承認されたリダイレクトのために、Webアプリのドメイン（ localhostなど）を追加することを忘れないでください。

開発環境

1. node.jsおよびnpm（またはyarn）： node.jsとパッケージマネージャー（NPMまたはYARN）がインストールされていることを確認します。
2. Reactアプリの作成： Bootstrap新しいReactプロジェクト： npx create-react-app chatty
3. インストール依存関係： React RouterとFirebaseのインストール： yarn add react-router-dom firebase （または、NPMを使用する場合はnpm installを使用します）。
4. プロジェクト構造：コンポーネント、ヘルパー、ページ、およびサービスのフォルダーを使用してプロジェクトを整理します。

Firebaseの統合

1. FireBase Configuration（ src/services/firebase.js ）： Firebaseをインポートし、セットアップのステップ2から構成の詳細を使用して初期化します。 authおよびdatabaseモジュールをエクスポートします。

2. APPセットアップ（ src/App.js ）：必要なモジュール（React、Reactルーター、FireBase）をインポートします。 PrivateRouteとPublicRoute高次コンポーネント（HOC）を作成して、認証ベースのルーティングを処理します。これらのHOCは、認証状態を確認し、それに応じてユーザーをリダイレクトします。

3. 認証状態（ src/App.js ）： auth().onAuthStateChanged認証の変更を監視し、アプリの状態（ authenticated 、 loading ）を更新します。

4. 認証ヘルパー（ src/helpers/auth.js ）：サインアップ（ signup ）、signin（ signin ）、google signin（ signInWithGoogle ）、およびgithubサインイン（ signInWithGitHub ）の関数を作成します。これらの機能は、FireBase認証サービスと対話します。

5. Signup and Login Pages（ src/pages/Signup.js 、 src/pages/Login.js ）： src/helpers/auth.jsのヘルパー関数を使用して、ユーザー登録とログインのフォームを作成します。フォームの送信を処理し、エラーメッセージを表示します。

6. チャットページ（ src/pages/Chat.js ）： db.ref("chats").on("value", ...) firebaseリアルタイムデータベースからのリアルタイムの更新を聞きます。チャットメッセージをレンダリングし、新しいメッセージを送信するためのフォームを提供します。 db.ref("chats").push(...)を使用して、データベースに新しいメッセージを追加します。データの読み取りと書き込みの両方のエラー処理を実装します。

7. データベースルール： FireBase RealTimeデータベースルールを構成して、認証されたユーザーのみへのアクセスを制限します。

テストと展開

完了したら、アプリケーションを徹底的にテストします。展開は、選択したホスティングプロバイダーによって異なります。

この詳細なガイドは、ReactとFirebaseを使用して、安全でリアルタイムのチャットアプリケーションを構築する包括的なウォークスルーを提供します。より高度な機能とオプションについては、FireBaseドキュメントを参照してください。

以上がReactとFirebaseを使用してリアルタイムチャットアプリを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。