Supabase som Backend as a Service · Lektion

Prenumerera på tabelländringar

Implementera klientkod som lyssnar efter infogningar, uppdateringar och borttagningar i specifika databastabeller eller rader.

Lektion 2 av 412 steg

Prenumerera på tabelländringar är en gratis lektion i Supabase som Backend as a Service på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Supabase som Backend as a Service, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Supabase som Backend as a Service innehåller totalt 4 lektioner.

Välkommen till realtidsdata!

I den föregående lektionen lärde vi oss om idén med realtidsdata. Nu ska vi gå igenom hur appen faktiskt kan lyssna efter ändringar i Supabase-databasen!

Det innebär att användarna kan se uppdateringar direkt utan att uppdatera skärmen. Tänk på livechatt, aviseringar eller instrumentpaneler.

Realtime-klienten

Supabase tillhandahåller en kraftfull Realtime-klient som gör det mycket enkelt att lyssna efter databasändringar. Den bygger på PostgreSQL:s replikeringsfunktioner.

Den använder WebSockets för direktkommunikation.
Du interagerar med den via objektet supabase.realtime.
Den fungerar genom att ansluta till specifika ”kanaler”.

Skapa en kanal

Innan du kan lyssna efter ändringar behöver du skapa en kanal. En kanal fungerar ungefär som en dedikerad linje för att ta emot uppdateringar från databasen.

Du anger vilken tabell du är intresserad av och kan sedan prenumerera på händelser i den tabellen.

import { createClient } from '@supabase/supabase-js';

const SUPABASE_URL = 'YOUR_SUPABASE_URL';
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY';

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

// Create a channel for the 'messages' table
const messagesChannel = supabase.channel('table-db-changes')
  .on(
    'postgres_changes',
    { event: '*', schema: 'public', table: 'messages' },
    (payload) => {
      console.log('Change received!', payload);
    }
  )
  .subscribe();

console.log('Subscribed to messages channel...');

// In a real app, you'd keep this running to listen.
// For this example, we'll just show the setup.
// You'd typically unsubscribe when the component unmounts.
// messagesChannel.unsubscribe();

Lyssna efter alla händelser

Exemplet ovan använder event: '*'. Det är ett jokertecken som talar om för Supabase att du vill få aviseringar om alla typer av ändringar i den angivna tabellen.

INSERT: En ny rad har lagts till.
UPDATE: En befintlig rad har ändrats.
DELETE: En rad har tagits bort.

Varje händelsetyp utlöser din callback-funktion.

Kod: Alla ändringar i tabellen

Vi ska förfina kanalinställningen så att den uttryckligen lyssnar efter alla händelsetyper i tabellen products. Föreställ dig att vi bygger en lagerhanteringsapp!

Kör koden och föreställ dig att nya produkter läggs till, uppdateras eller tas bort.

import { createClient } from '@supabase/supabase-js';

const SUPABASE_URL = 'YOUR_SUPABASE_URL';
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY';

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

const productChanges = supabase.channel('product_updates')
  .on(
    'postgres_changes',
    { event: '*', schema: 'public', table: 'products' },
    (payload) => {
      console.log('Product change detected:', payload.eventType);
      console.log('New data:', payload.new);
      console.log('Old data:', payload.old);
    }
  )
  .subscribe();

console.log('Listening for all changes on products table...');

// This script would typically run in a browser or Node.js environment
// where Supabase client is properly initialized and events would stream.
// For this interactive example, it shows the setup.
// In a real scenario, you'd wait for actual database events.

Rikta in dig på specifika händelser

Ibland är du bara intresserad av vissa typer av ändringar. Du kanske till exempel bara vill veta när en ny post läggs till, inte när den uppdateras eller tas bort.

Du kan ange händelsetypen event i prenumerationsalternativen:

event: 'INSERT'
event: 'UPDATE'
event: 'DELETE'

Filtrera efter raddata

Utöver händelsetyper kan du även filtrera uppdateringar utifrån data i själva raderna. Det är mycket användbart när du vill lyssna efter ändringar i specifika poster!

Använd villkor som eq (lika med) eller neq (inte lika med) för kolumnvärden:

filter: 'id=eq.123' (Lyssna efter ändringar i raden med ID 123)
filter: 'status=neq.archived' (Lyssna efter ändringar där status INTE är archived)

Kod: Filtrerade ändringar

Vi konfigurerar en prenumeration som bara lyssnar efter att nya produkter läggs till (INSERT) OCH endast om deras category är 'electronics'.

Kör koden och se hur specifikt du kan filtrera!

import { createClient } from '@supabase/supabase-js';

const SUPABASE_URL = 'YOUR_SUPABASE_URL';
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY';

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

const newElectronics = supabase.channel('new_electronics_channel')
  .on(
    'postgres_changes',
    {
      event: 'INSERT',
      schema: 'public',
      table: 'products',
      filter: 'category=eq.electronics' // Filter by category
    },
    (payload) => {
      console.log('New electronic product added:', payload.new.name);
      console.log('Details:', payload.new);
    }
  )
  .subscribe();

console.log('Listening for new electronic products...');

// This code demonstrates the filter setup.
// Actual events would be logged if matching data is inserted.

Hantera inkommande data

När en händelse inträffar tar callback-funktionen emot ett payload-objekt. Objektet innehåller alla detaljer om ändringen:

eventType: 'INSERT', 'UPDATE' eller 'DELETE'.
new: Den nya raddatan (för INSERT/UPDATE).
old: Den gamla raddatan (för UPDATE/DELETE).
table, schema: Information om var ändringen inträffade.

Med dessa data kan du uppdatera gränssnittet eller utlösa annan logik.

Avsluta prenumerationer på ändringar

Det är viktigt att avsluta prenumerationer på kanaler när de inte längre behövs. Det förhindrar minnesläckor och onödig nätverkstrafik.

I en React-komponent kan du avsluta prenumerationen i componentWillUnmount eller i en rensningsfunktion för useEffect. Anropa bara .unsubscribe() på kanalobjektet.

const myChannel = supabase.channel('my_channel')
  .on(...)
  .subscribe();

// Later, when you're done listening:
myChannel.unsubscribe();
console.log('Unsubscribed from my_channel.');

Snabbtest: Realtime-filter

Du vill lyssna efter alla uppdateringar av tabellen orders, särskilt för beställningar där status ändras till 'shipped'.

Vilka alternativ skulle du använda i metoden on()?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Håll dig uppdaterad!

Bra jobbat! Du har lärt dig att använda Supabase Realtime för att lyssna efter ändringar i databasen i realtid.

Du skapar en kanal för en specifik tabell.
Du använder .on('postgres_changes', options, callback) för att prenumerera.
Du kan filtrera efter händelsetyp (INSERT, UPDATE, DELETE) och efter raddata (till exempel filter: 'column=eq.value').
Kom alltid ihåg att avsluta prenumerationen när en kanal inte längre behövs.

Härnäst bygger vi en livechatt med hjälp av dessa koncept!

Gratis att börja

Lär dig Supabase som Backend as a Service 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: 40

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Prenumerera på tabelländringar” gratis?

Ja – hela texten till ”Prenumerera på tabelländringar” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Supabase som Backend as a Service, kan Ni uppgradera till CoddyKit PRO. Kursen i Supabase som Backend as a Service innehåller totalt 4 lektioner.

Vad lär jag mig i ”Prenumerera på tabelländringar”?

Implementera klientkod som lyssnar efter infogningar, uppdateringar och borttagningar i specifika databastabeller eller rader. Ni övar på Supabase som Backend as a Service 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 Supabase som Backend as a Service?

Du behöver inga förkunskaper. Utbildningen i Supabase som Backend as a Service 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 2 av 4.

Hur lång tid tar lektionen ”Prenumerera på tabelländringar”?

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 Supabase som Backend as a Service-lektionen?

Ja. Varje Supabase som Backend as a Service-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 Supabase som Backend as a Service