Chat-sovelluksen rakentaminen Reactin ja Firebasen avulla

Oletko koskaan miettinyt, kuinka WhatsApp toimii? Tai kuinka eri käyttäjät muodostavat yhteyden ja vaihtavat viestejä chateissa? Yksinkertaistetun chat-sovelluksen luominen voi olla loistava tapa ymmärtää chat-sovellusten ydintoiminnot.

Chat-sovelluksen luominen voi tuntua pelottavalta tehtävältä, mutta Firebase yksinkertaistaa prosessia. Sen avulla voit nopeasti käynnistää minkä tahansa sovelluksen, mikä poistaa mukautetun taustajärjestelmän tai tietokannan asennuksen tarpeen.

Mikä on Firebase Cloud Database

Firebase on pilvipohjainen kehitysalusta, joka tarjoaa erilaisia ​​taustapalveluita, kuten reaaliaikaisen tietokannan, todennuksen ja isännöinnin. Tietokantapalveluidensa ytimessä on NoSQL-pilvitietokanta, joka käyttää dokumenttimallia tietojen tallentamiseen reaaliajassa.

Määritä Firebase-projekti ja React Client

Aloita siirtymällä kohtaan Firebase ja rekisteröidy tilille. Napsauta käyttäjän kojelaudassa Luo projekti uuden projektin perustamiseen.

Kun olet luonut projektin, rekisteröi hakemuksesi valitsemalla ja napsauttamalla koodikuvaketta projektin yleiskatsaussivulla. Rekisteröitymällä Firebaseen voit käyttää ja käyttää sen resursseja React-verkkosovelluksen rakentamiseen.

Huomioi alla olevat ohjeet Firebasen SDK: n integroimiseksi projektiisi Lisää Firebase SDK.

Seuraava, luo React-sovellus ja asenna Firebase SDK sovellukseesi. Lisäksi tuo reagoi-firebase-koukut paketti, joka yksinkertaistaa Firebase In Reactin kanssa työskentelyä.

npm asentaa firebase react-firebase-hooks

Määritä Firebase React-sovelluksessasi

Sinun src hakemistoon, luo uusi tiedosto ja nimeä se, firebase-config.js. Kopioi ympäristömuuttujat Firebase-projektisi hallintapaneelista ja liitä ne tähän tiedostoon.

tuonti { alustaaApp } alkaen"firebase/app";
tuonti { getFirestore } alkaen'@firebase/firestore';
tuonti { getAuth, GoogleAuthProvider } alkaen"firebase/auth";
konst firebaseConfig = {
 apiKey: "API_KEY",
 authDomain: "authDomain",
 projektitunnus: "projektin tunnus",
 varastosäiliö: "tallennusämpäri",
 messagingSenderId: "viestin lähettäjän tunnus",
 appId: "Sovellustunnus"
};
konst app = alustaaApp (firebaseConfig);
konst db = getFirestore (sovellus);
konst auth = getAuth (sovellus)
konst tarjoaja = Uusi GoogleAuthProvider();
viedä {db, todennus, tarjoaja}

Firebase-projektisi määritysten avulla alustat Firebasen, Firestoren ja Firebasen todennustoiminnot käytettäväksi sovelluksessasi.

Luo Firestore-tietokanta

Tämä tietokanta tallentaa käyttäjätiedot ja chat-viestit. Siirry projektisi yleiskatsaussivulle ja napsauta Luo tietokanta -painiketta määrittääksesi Cloud Firestoren.

Määritä tietokannan tila ja sijainti.

Päivitä lopuksi Firestore-tietokannan säännöt sallimaan luku- ja kirjoitustoiminnot React-sovelluksesta. Klikkaa säännöt -välilehti ja muuta Lue ja kirjoita määrätä totta.

Kun olet määrittänyt tietokannan, voit luoda esittelykokoelman – tämä on Firestoren NoSQL-tietokanta. Kokoelmat koostuvat asiakirjoista arkistoihin.

Luo uusi kokoelma napsauttamalla Aloita kerääminen -painiketta ja anna kokoelman tunnus – taulukon nimi.

Integroi Firebase User Authentication

Firebase tarjoaa käyttövalmiiksi todennus ja valtuutus ratkaisuja, jotka on helppo ottaa käyttöön, kuten sosiaalisen kirjautumisen tarjoajat tai mukautettu sähköpostin salasanan tarjoaja.

Valitse projektisi yleiskatsaussivulta Todennus näytetyistä tuoteluettelosta. Napsauta seuraavaksi Määritä kirjautumistapa -painiketta määrittääksesi Google-palveluntarjoajan. Valitse Google palveluntarjoajien luettelosta, ota se käyttöön ja täytä projektin tukisähköposti.

Luo kirjautumiskomponentti

Kun olet määrittänyt palveluntarjoajan Firebasessa, siirry projektikansioosi ja luo uusi kansio, komponentit, sisällä /src hakemistosta. Sisällä komponentit kansio, luo uusi tiedosto: SignIn.js.

Vuonna SignIn.js tiedosto, lisää alla oleva koodi:

tuonti Reagoi alkaen'reagoi';
tuonti { kirjaudu sisäänPonnahdusikkunassa } alkaen"firebase/auth";
tuonti { todennus, tarjoaja } alkaen'../firebase-config'

toimintoKirjaudu sisään() {
konst signInWithGoogle = () => {
 kirjaudu sisään ponnahdusikkunalla (todennus, tarjoaja)
 };
palata (


Kirjaudu sisään Googlella</button>
 </div>
 )
}
viedäoletuksena Kirjaudu sisään

• Tämä koodi tuo Firebase-määritystiedostossa alustamasi todennus- ja Google-palveluntarjoajan objektit.
• Sitten se määrittelee a Kirjaudu sisään toiminto, joka toteuttaa kirjaudu sisäänPonnahdusikkunalla Firebasen menetelmä, joka ottaa käyttöön todennus ja tarjoaja komponentteja parametreina. Tämä toiminto todentaa käyttäjät heidän Googlen sosiaalisilla kirjautumisilla.
• Lopuksi se palauttaa div: n, joka sisältää painikkeen, jota napsautettuna kutsuu kirjaudu sisäänGooglella toiminto.

Luo chat-komponentti

Tämä komponentti sisältää Chat-sovelluksesi pääominaisuuden, keskusteluikkunan. Luo uusi tiedosto sisään komponentit kansio ja nimeä se Chat.js.

Lisää alla oleva koodi Chat.js Tiedosto:

tuonti React, { useState, useEffect } alkaen'reagoi'
tuonti { db, todennus } alkaen'../firebase-config'
tuonti Lähetä viesti alkaen'./Lähetä viesti'
tuonti { collection, query, limit, orderBy, onSnapshot } alkaen"firebase/firestore";
toimintoChat() {
konst [viestit, setMessages] = useState([])
konst { käyttäjätunnus } = auth.currentUser
 useEffect(() => {
konst q = kysely(
 kokoelma (db, "viestit"),
 orderBy("createdAt"),
 raja(50)
 );
konst data = onSnapshot (q, (QuerySnapshot) => {
antaa viestit = [];
 QuerySnapshot.forEach((doc) => {
 messages.push({ ...doc.data(), id: doc.id });
 });
 setMessages (viestit) 

 });
palata() => tiedot; 

 }, []);

palata (


 auth.signOut()}>Kirjaudu ulos</button>
 {viestit && viestit.kartta((viesti, id, uid, photoURL) =>
 avain={id} 
 className={`msg ${userID auth.currentUser.uid? 'lähetetty': 'otettu vastaan'}`}>

{viesti.teksti}</p>
 </div>
 )} 

 </div>
 )
}
viedäoletuksena Chat

• Tämä koodi tuo tietokannan, todennuskomponentit, jotka on alustettu firebase-config.js tiedosto ja Firestore mukautetut menetelmät, jotka helpottavat tallennettujen tietojen käsittelyä.
• Se toteuttaa kokoelma, kysely, raja, tilauksen mukaan, ja onSnapshot Firestore-menetelmät kyselyjen tekemiseen ja tilannekuvan kaappaamiseen Firestore-viestikokoelmaan tällä hetkellä tallennetuista tiedoista, jotka on järjestetty niiden luontihetken mukaan, ja lukee vain 50 viimeisintä viestiä.
• Firestore-menetelmät kääritään ja suoritetaan a useEffect koukku varmistaaksesi, että viestit näytetään välittömästi aina, kun painat lähetyspainiketta, sivuikkunaa päivittämättä. Kun tiedot on luettu, ne tallennetaan viestitilaan.
• Sen jälkeen se tarkistaa erottaakseen lähetetyt ja vastaanotetut viestit – jos viestin mukana tallennettu käyttäjätunnus täsmää kirjautuneen käyttäjän käyttäjätunnus ja sen jälkeen määrittää luokan nimen ja käyttää asianmukaista tyyliä viesti.
• Lopuksi se tekee viestit, a Kirjaudu ulos -painiketta ja Lähetä viesti komponentti. The Kirjaudu ulos -painiketta klikkaamalla ohjaaja soittaa auth.signOut() Firebasen tarjoama menetelmä.

Luo Lähetä viesti -komponentti

Luo uusi tiedosto, SendMessage.js tiedosto ja lisää alla oleva koodi:

tuonti Reagoi, { useState } alkaen'reagoi'
tuonti { db, todennus } alkaen'../firebase-config'
tuonti { kokoelma, addDoc, serverTimestamp} alkaen"firebase/firestore";
toimintoLähetä viesti() {
konst [msg, setMsg] = useState('')
konst messagesRef = kokoelma (db, "viestit");

konst lähetäMsg = asynk (e) => {
konst { uid, photoURL } = auth.currentUser

odottaa addDoc (messagesRef, {
 teksti: msg,
 CreatedAt: serverTimestamp(),
 uid: uid,
 photoURL: photoURL
 })
 setMsg('');
 };
palata (



'Viesti...'
 tyyppi="teksti" arvo={msg} 
 onChange={(e) => setMsg (e.target.value)}
 />
Lähetä</button>
 </div>
 )
}
viedäoletuksena Lähetä viesti

• Samanlainen kuin Chat.js komponentti, tuo Firestore-menetelmät sekä alustetut tietokanta- ja todennuskomponentit.
• Viestien lähettämistä varten Lähetä viesti toiminto toteuttaa addDoc Firestore-menetelmä, joka luo uuden dokumentin tietokantaan ja tallentaa välitetyt tiedot.
• The addDoc menetelmä ottaa kaksi parametria, tietoobjektin ja viiteobjektin, joka osoittaa, mihin kokoelmaan tiedot haluat tallentaa. Firestore-keräysmenetelmä määrittää kokoelman tietojen tallentamista varten.
• Lopuksi se tuottaa verkkosivulle syöttökentän ja painikkeen, jonka avulla käyttäjät voivat lähettää viestejä tietokantaan.

Tuo komponentit App.js-tiedostoon

Lopuksi sinun App.js tiedosto, tuo Kirjaudu sisään ja Chat komponentteja hahmontaaksesi ne selaimessasi.

Sinun App.js tiedosto, poista yleiskoodi ja lisää alla oleva koodi:

tuonti Chat alkaen'./components/Chat';
tuonti Kirjaudu sisään alkaen'./components/SignIn';
tuonti { auth } alkaen'./firebase-config.js'
tuonti { useAuthState } alkaen"react-firebase-hooks/auth"
toimintoSovellus() {
konst [käyttäjä] = useAuthState (auth)
palata (
 <>
 {käyttäjä? <Chat />: <Kirjaudu sisään />}
 </>
 );
}
viedäoletuksena Sovellus; 

Tämä koodi tekee Kirjaudu sisään ja Chat komponentit ehdollisesti tarkistamalla käyttäjän todennustilan. Todennustila puretaan Firebase-todennuskomponentin avulla useAuthState koukku reagoi-firebase-koukut paketti.

Se tarkistaa, onko käyttäjä todennettu, ja tekee sen Chat komponentti muuten Kirjaudu sisään komponentti renderöidään. Lisää lopuksi kaikki CSS-tyylit, pyöritä kehityspalvelinta tallentaaksesi muutokset ja siirry selaimeesi nähdäksesi lopulliset tulokset.

Palvelimeton Firebase

Firebase tarjoaa joukon ominaisuuksia reaaliaikaisen tietokannan ja todennuksen lisäksi. Voit käyttää sen palvelinttomia toimintoja minkä tahansa sovelluksen nopeaan käynnistykseen ja skaalaamiseen. Lisäksi Firebase integroituu saumattomasti sekä verkko- että mobiilisovelluksiin, mikä helpottaa eri alustojen sovellusten rakentamista.