Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Zastanawiałeś się kiedyś, jak działa WhatsApp? Lub jak różni użytkownicy łączą się i wymieniają wiadomości na czatach? Utworzenie uproszczonej aplikacji do czatu może być świetnym sposobem na zrozumienie podstawowych funkcji aplikacji do czatu.

Tworzenie aplikacji do czatu może wydawać się zniechęcającym zadaniem, jednak Firebase upraszcza ten proces. Umożliwia szybkie uruchomienie dowolnej aplikacji, eliminując potrzebę stosowania niestandardowego zaplecza lub konfiguracji bazy danych.

Co to jest baza danych w chmurze Firebase

Firebase to oparta na chmurze platforma programistyczna, która oferuje szereg usług zaplecza, takich jak baza danych w czasie rzeczywistym, uwierzytelnianie i hosting. Podstawą usług bazodanowych jest baza danych w chmurze NoSQL, która wykorzystuje model dokumentu do przechowywania danych w czasie rzeczywistym.

instagram viewer

Skonfiguruj projekt Firebase i klienta React

Możesz sprawdzić dostępny kod aplikacji do czatu Repozytorium GitHub i jest darmowy do użytku na licencji MIT. Upewnij się, że skonfigurowałeś Firebase przed uruchomieniem aplikacji.

Aby rozpocząć, przejdź do Baza ogniowa i załóż konto. Na pulpicie nawigacyjnym użytkownika kliknij Utwórz projekt założyć nowy projekt.

Po utworzeniu projektu wybierz i kliknij ikonę kodu na stronie przeglądu projektu, aby zarejestrować swoją aplikację. Rejestracja w Firebase umożliwia dostęp do jej zasobów i korzystanie z nich w celu zbudowania aplikacji internetowej React.

Zapoznaj się z instrukcjami integracji pakietu SDK Firebase z projektem, które znajdziesz poniżej Dodaj pakiet SDK Firebase.

Następny, stworzyć aplikację React i zainstaluj Firebase SDK w swojej aplikacji. Dodatkowo zaimportuj plik Reaguj-haki-firebase pakiet, który upraszcza pracę z Firebase w React.

npm install firebase reagowanie na firebase-hooks

Skonfiguruj Firebase w swojej aplikacji React

W Twoim źródło katalog, utwórz nowy plik i nazwij go, firebase-config.js. Skopiuj zmienne środowiskowe z pulpitu nawigacyjnego projektu Firebase i wklej je do tego pliku.

import {inicjalizujaplikację} z„baza ogniowa/aplikacja”;
import { getFirestore } z„@firebase/firestore”;
import { getAuth, GoogleAuthProvider} z„Firebase/uwierzytelnianie”;
konst FirebaseConfig = {
 Klucz API: "KLUCZ API",
 authDomena: „authDomain”,
 identyfikator projektu: „identyfikator projektu”,
 magazynowanieWiadro: "wiadro do przechowywania",
 przesyłanie wiadomościSenderId: „identyfikator nadawcy wiadomości”,
 identyfikator aplikacji: „Identyfikator aplikacji”
};
konst aplikacja = zainicjuj aplikację (firebaseConfig);
konst db = getFirestore (aplikacja);
konst auth = getAuth (aplikacja)
konst dostawca = nowy GoogleAuthProvider();
eksport {baza danych, autoryzacja, dostawca}

Korzystając z konfiguracji projektu Firebase, inicjujesz funkcje uwierzytelniania Firebase, Firestore i Firebase do użytku w swojej aplikacji.

Skonfiguruj bazę danych Firestore

Ta baza danych będzie przechowywać dane użytkownika i wiadomości na czacie. Przejdź do strony przeglądu projektu i kliknij Utwórz bazę danych przycisk, aby skonfigurować Cloud Firestore.

Zdefiniuj tryb i lokalizację bazy danych.

Na koniec zaktualizuj reguły bazy danych Firestore, aby zezwolić na operacje odczytu i zapisu z aplikacji React. Kliknij na Zasady zakładkę i zmień Czytaj i pisz reguła do PRAWDA.

Po zakończeniu konfigurowania bazy danych możesz utworzyć kolekcję demonstracyjną — jest to baza danych NoSQL w Firestore. Zbiory składają się z dokumentów jako akt.

Aby utworzyć nową kolekcję, kliknij na Rozpocznij zbieranie przycisk i podaj identyfikator kolekcji — nazwę tabeli.

Zintegruj uwierzytelnianie użytkowników Firebase

Firebase zapewnia gotowe rozwiązania uwierzytelnianie i autoryzacja rozwiązania, które są łatwe do wdrożenia, takie jak dostawcy logowania społecznościowego lub dostawca niestandardowego hasła e-mail.

Na stronie przeglądu projektu wybierz Uwierzytelnianie z wyświetlonej listy produktów. Następnie kliknij na Skonfiguruj metodę logowania przycisk, aby skonfigurować dostawcę Google. Wybierz Google z listy dostawców, włącz go i podaj adres e-mail wsparcia projektu.

Utwórz komponent logowania

Po zakończeniu konfigurowania dostawcy w Firebase przejdź do folderu projektu i utwórz nowy folder, składniki, w /src informator. W środku składniki folder, utwórz nowy plik: SignIn.js.

w SignIn.js plik, dodaj poniższy kod:

import Reagować z'reagować';
import { signInWithPopup} z„Firebase/uwierzytelnianie”;
import { autoryzacja, dostawca } z„../firebase-config”

funkcjonowaćZalogować się() {
konst zaloguj się za pomocą Google = () => {
 signInWithPopup (uwierzytelnianie, dostawca)
 };
powrót (




eksportdomyślny Zalogować się
  • Ten kod importuje uwierzytelnianie i obiekty dostawcy Google zainicjowane w pliku konfiguracyjnym Firebase.
  • Następnie określa A Zalogować się funkcja, która implementuje tzw zaloguj się za pomocą wyskakującego okienka metoda z Firebase, która przyjmuje uwierzytelnianie I dostawca komponenty jako parametry. Ta funkcja uwierzytelnia użytkowników za pomocą ich loginów społecznościowych Google.
  • Na koniec zwraca element div zawierający przycisk, który po kliknięciu wywołuje funkcję zaloguj się za pomocą Google funkcjonować.

Utwórz komponent czatu

Ten komponent będzie zawierał główną funkcję aplikacji Chat, czyli okno czatu. Utwórz nowy plik w składniki folder i nazwij go Chat.js.

Dodaj poniższy kod w pliku Chat.js Plik:

import Reaguj, { useState, useEffect } z'reagować'
import {db, autoryzacja} z„../firebase-config”
import Wyślij wiadomość z'./Wyślij wiadomość'
import { kolekcja, zapytanie, limit, orderBy, onSnapshot } z„baza ogniowa / magazyn ogniowy”;
funkcjonowaćCzat() {
konst [wiadomości, ustawWiadomości] = useState([])
konst { userID } = auth.currentUser
 użyjEfekt(() => {
konst q = zapytanie(
 kolekcja (db, „wiadomości”),
 Zamów przez(„utworzony w”),
 limit(50)
 );
konst data = onSnapshot (q, (QuerySnapshot) => {
pozwalać wiadomości = [];
 QuerySnapshot.forEach((doktor) => {
 wiadomości.push({ ...doc.data(), ID: dok.id });
 });
 setMessages (wiadomości) 

 });
powrót() => dane; 

 }, []);

powrót (
  • Ten kod importuje bazę danych, składniki uwierzytelniania zainicjowane w firebase-config.js file i niestandardowe metody Firestore, które ułatwiają manipulowanie przechowywanymi danymi.
  • Realizuje kolekcja, zapytanie, limit, Zamów przez, I onSnapshot Metody Firestore do wysyłania zapytań i przechwytywania migawki aktualnie przechowywanych danych w kolekcji wiadomości Firestore, uporządkowanych według czasu ich utworzenia, i odczytuje tylko 50 najnowszych wiadomości.
  • Metody Firestore są opakowane i uruchamiane wewnątrz pliku UżyjEfekt hook, aby wiadomości były renderowane natychmiast, za każdym razem, gdy naciśniesz przycisk wysyłania, bez odświeżania okna strony. Po odczytaniu danych są one przechowywane w stanie komunikatów.
  • Następnie sprawdza rozróżnienie między wysłanymi i odebranymi wiadomościami — czy identyfikator użytkownika zapisany w wiadomości jest zgodny ID użytkownika dla zalogowanego użytkownika, a następnie ustawia nazwę klasy i stosuje odpowiednią stylizację dla wiadomość.
  • Na koniec renderuje wiadomości, a Wyloguj się przycisk i Wyślij wiadomość część. The Wyloguj się przycisk na kliknięcie obsługi wywołuje auth.signOut() metoda dostarczona przez Firebase.

Utwórz komponent wysyłania wiadomości

Utwórz nowy plik, SendMessage.js plik i dodaj poniższy kod:

import Reaguj, { stan użycia } z'reagować'
import {db, autoryzacja} z„../firebase-config”
import { kolekcja, addDoc, serwerTimestamp} z„baza ogniowa / magazyn ogniowy”;
funkcjonowaćWyślij wiadomość() {
konst [msg, setMsg] = useState('')
konst MessageRef = kolekcja (db, „wiadomości”);

konst wyślijWiadomość = asynchroniczny (e) => {
konst { uid, photoURL } = auth.currentUser

czekać na addDoc (messagesRef, {
 tekst: wiadomość,
 utworzono w: serverTimestamp(),
 identyfikator użytkownika: identyfikator użytkownika,
 URL zdjęcia: URL zdjęcia
 })
 ustawWiadomość('');
 };


powrót (




'Wiadomość...'
 typ="tekst" wartość={wiadomość} 
 onChange={(e) => setMsg (e.target.value)}
 />


eksportdomyślny Wyślij wiadomość
  • Podobny do Chat.js komponent, zaimportuj metody Firestore oraz zainicjowaną bazę danych i komponenty uwierzytelniania.
  • Aby wysłać wiadomości, Wyślij wiadomość funkcja implementuje dodajDoc Metoda Firestore, która tworzy nowy dokument w bazie danych i przechowuje przekazane dane.
  • The dodajDoc Metoda przyjmuje dwa parametry, obiekt danych i obiekt referencyjny, który wskazuje, w której kolekcji chcesz przechowywać dane. Metoda kolekcji Firestore określa kolekcję do przechowywania danych.
  • Na koniec renderuje pole wprowadzania i przycisk na stronie internetowej, aby umożliwić użytkownikom przesyłanie wiadomości do bazy danych.

Zaimportuj komponenty z pliku App.js

Wreszcie w twoim Aplikacja.js plik, zaimportuj plik Zalogować się I Czat komponenty, aby wyświetlić je w przeglądarce.

W Twoim Aplikacja.js plik, usuń kod szablonu i dodaj poniższy kod:

import Czat z„./komponenty/Czat”;
import Zalogować się z„./komponenty/Zaloguj się”;
import { autoryzacja } z„./firebase-config.js”
import { useAuthState } z„react-firebase-hooks/auth”
funkcjonowaćAplikacja() {
konst [użytkownik] = useAuthState (uwierzytelnij)
powrót (
 <>
 {użytkownik? <Czat />: <Zalogować się />}
 </>
 );
}
eksportdomyślny Aplikacja;

Ten kod renderuje Zalogować się I Czat komponenty warunkowo, sprawdzając stan uwierzytelnienia użytkownika. Stan uwierzytelnienia jest usuwany z komponentu uwierzytelniania Firebase za pomocą użyjAuthState hak od Reaguj-haki-firebase pakiet.

Sprawdza, czy użytkownik jest uwierzytelniony, i renderuje Czat składnik inaczej Zalogować się komponent jest renderowany. Na koniec dodaj dowolne style CSS, uruchom serwer programistyczny, aby zapisać zmiany, i przejdź do przeglądarki, aby wyświetlić końcowe wyniki.

Bezserwerowe funkcje Firebase

Firebase zapewnia szereg funkcji poza bazą danych w czasie rzeczywistym i uwierzytelnianiem. Możesz użyć jego funkcji bezserwerowych, aby szybko uruchomić i skalować dowolną aplikację. Ponadto Firebase bezproblemowo integruje się zarówno z aplikacjami internetowymi, jak i mobilnymi, ułatwiając tworzenie aplikacji międzyplatformowych.