リアルタイムJavaScriptのチャットアプリケーションを構築する

10484 ワード
react firebase tutorial javascript テキストリンク
このチュートリアルでは、メッセージを格納するFireBaseを使用して、リアルタイムJavaScriptのチャットアプリケーションを構築する方法を学びます.我々は、任意のサーバーコードを記述することなく、リアルタイムデータを同期することができますFireBase“リアルタイム”データベースを活用しているでしょう.

プロジェクトをFirebaseで設定します


あなたが既にしていない場合は、無料のFireBaseアカウントを作成する必要があります.一度あなたのアカウントgotoにコンソールにログインし、“リアルタイムチャット”と呼ばれる新しいプロジェクトを追加します.これを必要としないので、Google Analyticsを無効にしてください.
セットアップが完了すると、あなたのアプリケーションにFireBaseを追加するオプションを持っている画面に撮影されます“Web”オプションを選択し、プロンプトに従ってください.
セットアップを完了するには、サイドバーメニューから「リアルタイムデータベース」を選択することによって行われるデータベースを追加する必要があります.セキュリティルールのプロンプトが表示されたら「テストモードで起動」を選択します.

リアルタイムチャットアプリのコーディング


HTMLで始まるアプリをコーディングすることができます.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Chatterbox</title>   
  </head>
  <body>    
    <div id="chat">     
        <ul id="messages"></ul>
        <form id="send-message">
          <input id="chat-txt" type="text" />
          <button id="chat-btn" type="submit">Submit</button>
        </form>      
    </div>    
    <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-database.js"></script>
    <script src="script.js"></script>   
  </body>
</html>
次に新しいscript.js ファイルを作成し、プロジェクトのFireBase設定を追加します.このコードはFireBaseのメインメニューから「プロジェクト設定」にアクセスできます.次のようになります.
const firebaseConfig = {
  apiKey: "AIzaSyCSVtkMotInxYNE-fnvfVdaC5aVGlhzj4k",
  authDomain: "realtime-chat-57589.firebaseapp.com",
  projectId: "realtime-chat-57589",
  storageBucket: "realtime-chat-57589.appspot.com",
  messagingSenderId: "937988465303",
  appId: "1:937988465507:web:ccf97g5919226364f8a956",
};
firebase.initializeApp(firebaseConfig);
const db = firebase.database();
次に、ユーザがユーザ名を入力する方法が必要です.物事をシンプルに保つためにprompt データをキャプチャするには、次の手順に従います.
const username = prompt("What's your name?");
次に、イベントリスナーを使用してpostChat フォーム提出の機能.この関数は、各レコードをseperstampするタイムスタンプを使用して、データをFireBaseのメッセージコレクションに保存します.
document.getElementById("send-message").addEventListener("submit", postChat);
function postChat(e) {
  e.preventDefault();
  const timestamp = Date.now();
  const chatTxt = document.getElementById("chat-txt");
  const message = chatTxt.value;
  chatTxt.value = "";
  db.ref("messages/" + timestamp).set({
    usr: username,
    msg: message,
  });
}
データベースに保存されたデータは次のようになります.

チャットメッセージをすぐにデータベースに格納されているだけでは、HTMLにメッセージをレンダリングする必要があります.FireBaseには、ビルトインがありますchild_added 新しいメッセージが追加されるたびに、既存のメッセージごとに1回起動されるイベントを返します.
const fetchChat = db.ref("messages/");
fetchChat.on("child_added", function (snapshot) {
  const messages = snapshot.val();
  const msg = "<li>" + messages.usr + " : " + messages.msg + "</li>";
  document.getElementById("messages").innerHTML += msg;
});
メッセージが送信されるたびに、ユーザー名とメッセージの新しいリスト項目がメッセージリストの最後に追加されます.あなたがseperateブラウザータブでアプリケーションを開くならば、あなたはリアルタイムでメッセージが更新するのを見ます.
うまくいけば、このシンプルなJavaScriptのリアルタイムチャットアプリケーションを構築楽しんだ.FireBaseは本当に簡単にリアルタイムの機能を必要とするアプリケーションを構築することができます.私はまた、チェックアウトをお勧めしますFirebase Community FireBaseで利用可能な機能の完全な範囲についての詳細をご覧ください.
AWS アクセスキーを人為的ミスで流出させたときの記録（Risk credentials exposed）
同期/非同期