Supabase backend palveluna · Oppitunti

Taulumuutosten tilaaminen

Toteuta asiakaspuolen koodi, joka kuuntelee määritettyjen tietokantataulujen tai -rivien lisäyksiä, päivityksiä ja poistoja.

Oppitunti 2/412 vaihetta

Taulumuutosten tilaaminen on ilmainen Supabase backend palveluna-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Supabase backend palveluna-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Supabase backend palveluna-kurssilla on yhteensä 4 oppituntia.

Tervetuloa reaaliaikaisen datan pariin!

Edellisessä oppitunnissa opimme reaaliaikaisen datan käsitteen. Nyt perehdymme siihen, miten sovelluksesi voi käytännössä kuunnella muutoksia, joita Supabase-tietokannassasi tapahtuu!

Tämä tarkoittaa, että käyttäjät näkevät päivitykset heti ilman näytön päivittämistä. Esimerkkejä ovat reaaliaikainen keskustelu, ilmoitukset ja hallintapaneelit.

Realtime-asiakas

Supabase tarjoaa tehokkaan Realtime-asiakkaan, jonka avulla tietokannan muutosten kuunteleminen on erittäin helppoa. Se perustuu PostgreSQL:n replikointiominaisuuksiin.

Se käyttää WebSocket-yhteyksiä välittömään viestintään.
Sen kanssa toimitaan supabase.realtime-objektin kautta.
Se toimii muodostamalla yhteyden tiettyihin ”kanaviin”.

Kanavan luominen

Ennen muutosten kuuntelemista on luotava kanava. Kanava on kuin tietokannasta tulevien päivitysten vastaanottamiseen varattu yhteys.

Määrität, mistä taulusta olet kiinnostunut, ja voit sitten tilata kyseisen taulun tapahtumia.

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();

Kaikkien tapahtumien kuunteleminen

Edellä olevassa esimerkissä käytetään arvoa event: '*'. Tämä on jokerimerkki, joka kertoo Supabaselle, että haluat saada ilmoituksen kaikentyyppisistä määrittämääsi tauluun kohdistuvista muutoksista.

INSERT: Uusi rivi lisättiin.
UPDATE: Olemassa olevaa riviä muokattiin.
DELETE: Rivi poistettiin.

Jokainen tapahtumatyyppi käynnistää callback-funktiosi.

Koodi: kaikki taulun muutokset

Muokataan kanavan määritystä niin, että se kuuntelee nimenomaisesti kaikkia products-taulun tapahtumatyyppejä. Kuvitellaan, että rakennamme varastonhallintasovellusta!

Suorita tämä koodi ja kuvittele, että uusia tuotteita lisätään, tuotteita päivitetään tai poistetaan.

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.

Tiettyihin tapahtumiin kohdistaminen

Joskus olet kiinnostunut vain tietyntyyppisistä muutoksista. Saatat esimerkiksi haluta tietää vain, milloin uusi kohde lisätään, etkä silloin, kun sitä päivitetään tai poistetaan.

Voit määrittää event-tyypin tilauksen asetuksissa:

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

Rividatan suodattaminen

Tapahtumatyyppien lisäksi voit suodattaa päivityksiä myös rivien sisältämien tietojen perusteella. Tämä on erittäin tehokasta, kun haluat kuunnella tiettyihin tietueisiin kohdistuvia muutoksia!

Käytä sarakearvoissa ehtoja, kuten eq (yhtä suuri kuin) tai neq (eri suuri kuin):

filter: 'id=eq.123' (Kuuntelee muutoksia riville, jonka tunnus on 123)
filter: 'status=neq.archived' (Kuuntelee muutoksia riveille, joiden tila EI ole archived)

Koodi: suodatetut muutokset

Määritetään tilaus, joka kuuntelee vain uusien tuotteiden lisäämistä (INSERT) JA vain silloin, kun niiden category on ”electronics”.

Suorita tämä ja katso, kuinka tarkasti voit kohdentaa kuuntelun!

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.

Saapuvan datan käsittely

Kun tapahtuma esiintyy, callback-funktiosi saa payload-objektin. Tämä objekti sisältää kaikki muutosta koskevat tiedot:

eventType: 'INSERT', 'UPDATE' tai 'DELETE'.
new: Uuden rivin tiedot (INSERT/UPDATE).
old: Vanhan rivin tiedot (UPDATE/DELETE).
table, schema: Tiedot siitä, missä muutos tapahtui.

Näiden tietojen avulla voit päivittää käyttöliittymää tai käynnistää muuta logiikkaa.

Muutosten tilauksen peruuttaminen

Kanavien tilaus on tärkeää peruuttaa, kun niitä ei enää tarvita. Näin vältät muistivuodot ja tarpeettoman verkkoliikenteen.

React-komponentissa voit peruuttaa tilauksen componentWillUnmount-metodissa tai useEffect-siivousfunktiossa. Kutsu vain kanavaobjektin metodia .unsubscribe().

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

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

Pikatarkistus: Realtime-suodattimet

Haluat kuunnella kaikkia orders-taulun päivityksiä, erityisesti tilauksia, joiden status muuttuu arvoksi ”shipped”.

Mitä asetuksia käyttäisit on()-metodissasi?

Vastaa interaktiivisessa oppitunnissa

Kertaus: pysykää ajan tasalla!

Hienoa työtä! Opitte hyödyntämään Supabase Realtimea reaaliaikaisten tietokantamuutosten kuuntelemiseen.

Luotte kanavan tiettyä taulua varten.
Käytätte tilaamiseen metodia .on('postgres_changes', options, callback).
Voitte suodattaa tapahtumatyypin (INSERT, UPDATE, DELETE) ja rividatan perusteella (esimerkiksi filter: 'column=eq.value').
Muistakaa aina peruuttaa tilaus, kun kanavaa ei enää tarvita.

Seuraavaksi rakennamme näiden käsitteiden avulla reaaliaikaisen keskusteluominaisuuden!

Aloita maksutta

Opi Supabase backend palveluna tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 11
Oppitunnit: 40

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Taulumuutosten tilaaminen” ilmainen?

Kyllä – oppitunnin ”Taulumuutosten tilaaminen” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Supabase backend palveluna-kurssin, päivitä CoddyKit PROhon. Supabase backend palveluna-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Taulumuutosten tilaaminen”?

Toteuta asiakaspuolen koodi, joka kuuntelee määritettyjen tietokantataulujen tai -rivien lisäyksiä, päivityksiä ja poistoja. Harjoittelet Supabase backend palveluna-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Supabase backend palveluna-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Supabase backend palveluna-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Taulumuutosten tilaaminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Supabase backend palveluna-oppitunnilla?

Kyllä. Jokainen Supabase backend palveluna-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Reaaliaikaisten tilausten ymmärtäminen
Taulumuutosten tilaaminen
Reaaliaikaisen chat-ominaisuuden rakentaminen
Presence- ja Broadcast-kanavat

← Takaisin: Supabase backend palveluna