Applikationer med Firebase Auth och Realtime Database · Lektion

Lyssna efter ändringar i realtid

Gör Er app verkligt live genom att prenumerera på händelser i Realtime Database, reagera på värde- och barnändringar när de sker och städa bort lyssnare för att undvika läckor.

Lektion 4 av 413 steg

Lyssna efter ändringar i realtid är en gratis lektion i Applikationer med Firebase Auth och Realtime Database på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Applikationer med Firebase Auth och Realtime Database, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Applikationer med Firebase Auth och Realtime Database innehåller totalt 4 lektioner.

Från hämtning till ström

När data läses en gång får Ni en ögonblicksbild. Kraften i Realtime Database är liveuppdateringar: appen reagerar så fort data ändras på servern, utan polling.

Detta görs genom att koppla lyssnare till en plats i databasen.

Value-händelsen

Den vanligaste lyssnaren är value. Den utlöses direkt en gång med aktuella data och sedan varje gång något under den platsen ändras.

import { getDatabase, ref, onValue } from 'firebase/database';

const db = getDatabase();
onValue(ref(db, 'scores/global'), (snapshot) => {
  console.log('New value:', snapshot.val());
});

Läsa ögonblicksbilden

Callback-funktionen tar emot en DataSnapshot. Använd .val() för data, .exists() för att kontrollera om data finns och .key för nodens namn.

onValue(ref(db, 'user/42'), (snap) => {
  if (snap.exists()) {
    console.log(snap.key, snap.val());
  }
});

Underordnade händelser

För listor skickar value-händelser hela noden igen vid varje ändring. Underordnade händelser är effektivare och utlöses per objekt:

onChildAdded
onChildChanged
onChildRemoved

Använda onChildAdded

onChildAdded utlöses en gång för varje befintligt underordnat objekt och sedan för varje nytt objekt. Det passar perfekt för chattmeddelanden eller flöden.

import { onChildAdded } from 'firebase/database';

onChildAdded(ref(db, 'messages'), (snap) => {
  appendMessage(snap.key, snap.val());
});

Reagera på ändringar och borttagningar

Kombinera tillägg med hanterare för ändringar och borttagningar för att hålla användargränssnittet synkroniserat utan att återrendera allt.

import { onChildChanged, onChildRemoved } from 'firebase/database';

onChildChanged(ref(db, 'messages'), s => updateMessage(s.key, s.val()));
onChildRemoved(ref(db, 'messages'), s => removeMessage(s.key));

Läsa en gång

Ibland vill Ni ha aktuella data utan en pågående prenumeration. Använd get för en engångsläsning i stället för en lyssnare.

import { get } from 'firebase/database';

const snap = await get(ref(db, 'config'));
console.log(snap.val());

Koppla från lyssnare

Lyssnare förblir aktiva tills de tas bort och förbrukar bandbredd och minne. Koppla alltid från dem när en vy avmonteras genom att använda unsubscribe-funktionen som returneras av onValue.

const unsubscribe = onValue(ref(db, 'scores'), cb);
// later, when leaving the screen:
unsubscribe();

Hantera fel

Lyssnare kan misslyckas, ofta eftersom Security Rules nekar läsåtkomst. Ange en felcallback så att fel blir synliga i stället för att förbli dolda.

onValue(ref(db, 'private'), (snap) => render(snap), (error) => {
  console.error('Read failed:', error.message);
});

Prestandatips

Håll lyssnarna effektiva:

Lyssna på den minsta sökväg som innehåller de data Ni behöver
Föredra underordnade händelser för stora listor
Koppla aldrig en value-lyssnare till databasens rot

Exempel på en liveuppdaterad räknare

Så här sätts allt ihop: koppla en value-lyssnare till en räknarnod, uppdatera DOM i callback-funktionen och avsluta prenumerationen vid rensning. Talet ändras i realtid för varje ansluten klient.

const unsub = onValue(ref(db, 'visitors/count'), (snap) => {
  document.getElementById('count').textContent = snap.val() ?? 0;
});

Snabb kontroll

Testa Er förståelse av lyssnare i realtid.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Appen kan nu reagera på data så fort den ändras.

Använd onValue för enskilda noder
Använd underordnade händelser för effektiva listor
Läs en gång med get när ingen prenumeration behövs
Koppla alltid från lyssnare och hantera fel
Lyssna på den snävaste användbara sökvägen

Gratis att börja

Lär dig Applikationer med Firebase Auth och Realtime Database med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 11
Lektioner: 44

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Lyssna efter ändringar i realtid” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Applikationer med Firebase Auth och Realtime Database, inklusive ”Lyssna efter ändringar i realtid”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Applikationer med Firebase Auth och Realtime Database innehåller totalt 4 lektioner.

Vad lär jag mig i ”Lyssna efter ändringar i realtid”?

Gör Er app verkligt live genom att prenumerera på händelser i Realtime Database, reagera på värde- och barnändringar när de sker och städa bort lyssnare för att undvika läckor. Ni övar på Applikationer med Firebase Auth och Realtime Database med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Applikationer med Firebase Auth och Realtime Database?

Du behöver inga förkunskaper. Utbildningen i Applikationer med Firebase Auth och Realtime Database på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Lyssna efter ändringar i realtid”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Applikationer med Firebase Auth och Realtime Database-lektionen?

Ja. Varje Applikationer med Firebase Auth och Realtime Database-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Applikationer med Firebase Auth och Realtime Database