Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

WhatsApp'ın nasıl çalıştığını hiç merak ettiniz mi? Veya farklı kullanıcılar sohbetlerde nasıl bağlanır ve mesaj alışverişinde bulunur? Basitleştirilmiş bir sohbet uygulaması oluşturmak, sohbet uygulamalarının arkasındaki temel işlevleri kavramanın harika bir yolu olabilir.

Bir sohbet uygulaması oluşturmak göz korkutucu bir görev gibi görünebilir, ancak Firebase süreci basitleştirir. Özel bir arka uç veya veritabanı kurulumu ihtiyacını ortadan kaldırarak herhangi bir uygulamayı hızlı bir şekilde önyüklemenizi sağlar.

Firebase Bulut Veritabanı Nedir?

Firebase, gerçek zamanlı veritabanı, kimlik doğrulama ve barındırma gibi çeşitli arka uç hizmetleri sunan bulut tabanlı bir geliştirme platformudur. Veritabanı hizmetlerinin temelinde, verileri gerçek zamanlı olarak depolamak için bir belge modeli kullanan bir NoSQL bulut veritabanı bulunur.

instagram viewer

Firebase Projesini ve React İstemcisini Kurun

Bu sitede bulunan sohbet uygulama kodunu inceleyebilirsiniz. GitHub deposu ve MIT Lisansı altında kullanım için ücretsizdir. Uygulamayı çalıştırmadan önce Firebase'i yapılandırdığınızdan emin olun.

Başlamak için şuraya gidin: Firebase ve bir hesap için kaydolun. Kullanıcı kontrol panelinde tıklayın Proje Oluştur yeni bir proje oluşturmak için.

Projenizi oluşturduktan sonra, başvurunuzu kaydetmek için projenin genel bakış sayfasındaki kod simgesini seçin ve tıklayın. Firebase'e kaydolmak, React web uygulamanızı oluşturmak için kaynaklarına erişmenizi ve bunları kullanmanızı sağlar.

Firebase'in SDK'sını aşağıdaki projenize entegre etme talimatlarını not edin: Firebase SDK'sı ekleyin.

Sonraki, bir React uygulaması oluştur ve Firebase SDK'sını uygulamanıza kurun. Ek olarak, içe aktarın tepki-firebase-kancaları Firebase In React ile çalışmayı basitleştiren paket.

npm firebase tepki-firebase-kancalarını kurun

Firebase'i React Uygulamanızda Yapılandırın

senin içinde kaynak dizini, yeni bir dosya oluşturun ve adlandırın, firebase-config.js. Ortam değişkenlerini firebase proje kontrol panelinizden kopyalayın ve bu dosyaya yapıştırın.

içe aktarmak { Uygulamayı başlat } itibaren"ateş tabanı/uygulama";
içe aktarmak {getFirestore} itibaren"@firebase/firestore";
içe aktarmak { getAuth, GoogleAuthProvider } itibaren"ateş tabanı/yetkilendirme";
sabit firebaseConfig = {
 apiKey: "API_KEY",
 yetki alanı: "yetkili Etki Alanı",
 proje kimliği: "proje kimliği",
 depolamaBucket: "depolama Kovası",
 mesajlaşmaSenderId: "mesaj gönderen kimliği",
 uygulama kimliği: "Uygulama kimliği"
};
sabit uygulama = Uygulamayı başlat (firebaseConfig);
sabit db = getFirestore (uygulama);
sabit auth = getAuth (uygulama)
sabit sağlayıcı = yeni GoogleAuthProvider();
ihracat {db, auth, sağlayıcı}

Firebase projenizin yapılandırmasını kullanarak, uygulamanızda kullanım için Firebase, Firestore ve Firebase'in kimlik doğrulama işlevlerini başlatırsınız.

Firestore Veritabanı Kurma

Bu veritabanı, kullanıcı verilerini ve sohbet mesajlarını saklayacaktır. Proje genel bakış sayfanıza gidin ve tıklayın Veritabanı yarat düğmesine basarak Cloud Firestore'unuzu kurun.

Veritabanı modunu ve konumunu tanımlayın.

Son olarak, React uygulamasından okuma ve yazma işlemlerine izin vermek için Firestore veritabanı kurallarını güncelleyin. Tıkla Tüzük sekmesini değiştirin ve oku ve yaz kural doğru.

Veritabanını kurmayı tamamladığınızda, bir demo koleksiyonu oluşturabilirsiniz — bu, Firestore'da bir NoSQL veritabanıdır. Koleksiyonlar kayıt niteliğindeki belgelerden oluşur.

Yeni bir koleksiyon oluşturmak için tıklayın Koleksiyonu başlat düğmesini tıklayın ve bir koleksiyon kimliği - bir tablo adı sağlayın.

Firebase Kullanıcı Kimlik Doğrulamasını Entegre Edin

Firebase kullanıma hazır özellikler sunar Kimlik doğrulama ve yetkilendirme sosyal oturum açma sağlayıcıları veya özel e-posta-şifre sağlayıcısı gibi uygulaması kolay çözümler.

Projenizin genel bakış sayfasında, kimlik doğrulama görüntülenen ürün listesinden. Ardından, Oturum açma yöntemini ayarla Google sağlayıcısını yapılandırmak için düğme. Sağlayıcılar listesinden Google'ı seçin, etkinleştirin ve proje destek e-postasını doldurun.

Oturum Açma Bileşeni Oluşturma

Sağlayıcıyı Firebase'de yapılandırmayı tamamladığınızda, proje klasörünüze gidin ve yeni bir klasör oluşturun, bileşenler, içinde /src dizin. İçinde bileşenler klasör, yeni bir dosya oluşturun: SignIn.js.

İçinde SignIn.js dosya, aşağıdaki kodu ekleyin:

içe aktarmak Tepki itibaren'tepki';
içe aktarmak { SignInWithPopup } itibaren"ateş tabanı/yetkilendirme";
içe aktarmak { kimlik doğrulama, sağlayıcı } itibaren'../firebase-config'

işlevKayıt olmak() {
sabit SignInWithGoogle = () => {
 signInWithPopup (kimlik doğrulama, sağlayıcı)
 };
geri dönmek (




ihracatvarsayılan Kayıt olmak
  • Bu kod, Firebase yapılandırma dosyasında başlattığınız kimlik doğrulamasını ve Google sağlayıcı nesnelerini içe aktarır.
  • Daha sonra bir tanımlar Kayıt olmak uygulayan fonksiyon oturum açmaWithPopup alan Firebase yöntemi kimlik doğrulama Ve Sağlayıcı bileşenler parametre olarak Bu işlev, kullanıcıların Google sosyal oturum açma bilgileriyle kimliklerini doğrulayacaktır.
  • Son olarak, tıklandığında çağıran bir düğme içeren bir div döndürür. Google ile giriş yap işlev.

Bir Sohbet Bileşeni Oluşturun

Bu bileşen, Sohbet uygulamanızın ana özelliği olan sohbet penceresini barındıracaktır. İçinde yeni bir dosya oluşturun bileşenler klasör ve adlandırın Chat.js.

içine aşağıdaki kodu ekleyin Chat.js Dosya:

içe aktarmak Tepki, { useState, useEffect } itibaren'tepki'
içe aktarmak { veri tabanı, kimlik doğrulama } itibaren'../firebase-config'
içe aktarmak Mesaj gönder itibaren'./Mesaj gönder'
içe aktarmak { koleksiyon, sorgu, limit, orderBy, onSnapshot } itibaren"ateş üssü/ateş deposu";
işlevSohbet() {
sabit [mesajlar, setMessages] = useState([])
sabit { kullanıcı kimliği } = auth.currentUser
 useEffect(() => {
sabit q = sorgu(
 koleksiyon (db, "mesajlar"),
 tarafından sipariş("oluşturuldu"),
 limit(50)
 );
sabit veri = onSnapshot (q, (QuerySnapshot) => {
izin vermek mesajlar = [];
 QuerySnapshot.forEach((doktor) => {
 mesajlar.push({ ...doc.data(), İD: doc.id });
 });
 setMessages (mesajlar) 

 });
geri dönmek() => veri; 

 }, []);

geri dönmek (
  • Bu kod, veritabanında başlatılan kimlik doğrulama bileşenleri olan veritabanını içe aktarır. firebase-config.js dosya ve depolanan verilerin işlenmesini kolaylaştıran Firestore özel yöntemleri.
  • Şunları uygular: Toplamak, sorgu, limit, tarafından sipariş, Ve anlık görüntüde Firestore mesajları koleksiyonunda şu anda depolanan verilerin, oluşturuldukları zamana göre sıralanmış ve yalnızca en son 50 mesajı okuyan bir anlık görüntüsünü sorgulamak ve yakalamak için Firestore yöntemleri.
  • Firestore yöntemleri sarılır ve bir içinde çalıştırılır. useEffect gönder düğmesine her bastığınızda, sayfa penceresini yenilemeden mesajların hemen işlenmesini sağlamak için kanca. Veriler okunduktan sonra mesajlar durumunda saklanır.
  • Ardından, gönderilen ve alınan mesajları ayırt etmeyi kontrol eder — mesajla birlikte saklanan kullanıcı kimliğinin eşleşip eşleşmediğini oturum açmış kullanıcı için kullanıcı kimliği ve ardından sınıf adını ayarlar ve sınıf için uygun stili uygular. İleti.
  • Son olarak, mesajları işler, bir oturumu Kapat düğmesi ve Mesaj gönder bileşen. bu oturumu Kapat düğme tıklamada işleyici çağırır auth.signOut() Firebase tarafından sağlanan yöntem.

Bir Mesaj Gönderme Bileşeni Oluşturun

Yeni bir dosya oluşturun, SendMessage.js dosyasını açın ve aşağıdaki kodu ekleyin:

içe aktarmak Tepki, { useState } itibaren'tepki'
içe aktarmak { veri tabanı, kimlik doğrulama } itibaren'../firebase-config'
içe aktarmak { koleksiyon, addDoc, serverTimestamp} itibaren"ateş üssü/ateş deposu";
işlevMesaj gönder() {
sabit [msg, setMsg] = useState('')
sabit mesajlarRef = koleksiyon (db, "mesajlar");

sabit mesaj gönder = zaman uyumsuz (e) => {
sabit { uid, photoURL } = auth.currentUser

beklemek addDoc (mesajlarRef, {
 metin: mesaj,
 Oluşturulma Yeri: serverTimestamp(),
 uid: uid,
 fotoğraf URL'si: fotoğraf URL'si
 })
 setMsg('');
 };


geri dönmek (




'İleti...'
 tür="metin" değer={mesaj} 
 onChange={(e) => setMsg (e.target.value)}
 />


ihracatvarsayılan Mesaj gönder
  • Benzer Chat.js bileşeni, Firestore yöntemlerini ve başlatılan veritabanı ve kimlik doğrulama bileşenlerini içe aktarın.
  • Mesaj göndermek için, Mesaj gönder işlevi uygular ek belge Veritabanında yeni bir belge oluşturan ve iletilen verileri depolayan Firestore yöntemi.
  • bu ek belge yöntemi iki parametre alır, veri nesnesi ve verileri hangi koleksiyonu depolamak istediğinizi gösteren bir referans nesnesi. Firestore toplama yöntemi, verilerin depolanacağı koleksiyonu belirtir.
  • Son olarak, kullanıcıların veritabanına mesaj göndermesine izin vermek için web sayfasında bir giriş alanı ve bir düğme oluşturur.

App.js Dosyasındaki Bileşenleri İçe Aktarın

Son olarak, senin Uygulama.js dosya, içe aktar Kayıt olmak Ve Sohbet bileşenleri tarayıcınızda işlemek için.

senin içinde Uygulama.js dosyasını açın, standart kodu silin ve aşağıdaki kodu ekleyin:

içe aktarmak Sohbet itibaren'./bileşenler/Sohbet';
içe aktarmak Kayıt olmak itibaren'./bileşenler/Giriş';
içe aktarmak { yetkilendirme } itibaren'./firebase-config.js'
içe aktarmak { kullanımAuthState } itibaren'react-firebase-hooks/auth'
işlevUygulama() {
sabit [kullanıcı] = useAuthState (yetkilendirme)
geri dönmek (
 <>
 {kullanıcı? <Sohbet />: <Kayıt olmak />}
 </>
 );
}
ihracatvarsayılan Uygulama;

Bu kod, Kayıt olmak Ve Sohbet Bir kullanıcının kimlik doğrulama durumunu kontrol ederek bileşenleri koşullu olarak. Kimlik doğrulama durumu, Firebase kimlik doğrulama bileşeninden, kullanımAuthState gelen kanca tepki-firebase-kancaları paket.

Bir kullanıcının kimliğinin doğrulanıp doğrulanmadığını kontrol eder ve Sohbet aksi halde bileşen Kayıt olmak bileşen işlenir. Son olarak, herhangi bir CSS stilini ekleyin, değişiklikleri kaydetmek için geliştirme sunucusunu çalıştırın ve nihai sonuçları görmek için tarayıcınıza gidin.

Firebase Sunucusuz İşlevler

Firebase, gerçek zamanlı bir veritabanı ve kimlik doğrulamanın ötesinde bir dizi özellik sunar. Herhangi bir uygulamayı hızlı bir şekilde önyüklemek ve ölçeklendirmek için sunucusuz işlevlerini kullanabilirsiniz. Ayrıca Firebase, hem web hem de mobil uygulamalarla sorunsuz bir şekilde bütünleşerek platformlar arası uygulamalar oluşturmayı kolaylaştırır.