Reaaliaikaisen chat-ominaisuuden rakentaminen
Sovella reaaliaikaisen viestinnän osaamistasi käytännön chat-sovelluksen luomiseen ja esittele viestien välitön toimitus.
Reaaliaikaisen chat-ominaisuuden rakentaminen on ilmainen Supabase backend palveluna-oppitunti CoddyKitissä. Tämä on oppitunti 3/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.
Reaaliaikainen keskustelu: perusta
Tervetuloa rakentamaan reaaliaikaista keskustelua! Pikaviestintä on täydellinen esimerkki tilanteesta, jossa reaaliaikaiset ominaisuudet pääsevät oikeuksiinsa.
Käyttäjät odottavat viestiensä ilmestyvän heti ilman sivun päivittämistä. Supabase Realtime tekee tästä yllättävän helppoa.
Tässä oppitunnissa yhdistämme kokonaisuuden osat: viestien lähettämisen tietokantaan ja muilta käyttäjiltä tulevien uusien viestien vastaanottamisen välittömästi.
Keskusteluviestien taulun suunnittelu
Ensiksi tarvitsemme paikan keskusteluviestien tallentamiseen. Yksinkertainen taulu riittää!
Luomme messages-taulun, jossa on sarakkeet viestin tekstille, lähettäjälle ja lähetysajalle.
id: Perusavain ja yksilöivä tunniste.text: Viestin sisältö (tyyppi:TEXT).user_id: Viestin lähettäjä (tyyppi:UUID, yhdistetty tauluunauth.users).created_at: Viestin lähetysaika (tyyppi:TIMESTAMPTZ, oletusarvonow()).
Supabase-asiakkaan alustaminen
Jotta voit käyttää Supabasea sovelluksestasi, sinun on alustettava asiakaskirjasto. Tämä muodostaa yhteyden projektiisi.
Varmista, että Supabase-URL-osoitteesi ja Anon Key -avaimesi ovat valmiina. (Niitä käsiteltiin aiemmilla oppitunneilla.)
import { createClient } from '@supabase/supabase-js';
const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY';
const supabase = createClient(supabaseUrl, supabaseAnonKey);Tämä supabase-objekti toimii väylänäsi viestien lähettämiseen ja vastaanottamiseen.
Viestien lähettäminen: insert-toiminto
Kun käyttäjä kirjoittaa viestin ja painaa lähetyspainiketta, sovelluksesi on tallennettava viesti tietokantaan.
Käytämme Supabase-asiakkaan insert()-metodia messages-taulussa. Se lisää uuden rivin, joka sisältää viestin tekstin ja lähettäjän tunnuksen.
Kyseessä on suoraviivainen tietokantaan kirjoittava toiminto, aivan kuten minkä tahansa muun datan lisääminen.
Koodi: keskusteluviestin lähettäminen
Kokeilkaa tämän esimerkin suorittamista. Se simuloi viestin lähettämistä Supabasen messages-tauluun.
Muistakaa korvata paikanmerkit omalla Supabase-URL-osoitteellanne ja avaimellanne sekä kelvollisella user_id-arvolla (esimerkiksi todennetulta käyttäjältä saadulla arvolla).
import { createClient } from '@supabase/supabase-js';
// Mock Supabase client for demonstration purposes
// In a real app, use your actual Supabase URL and Anon Key
const supabase = {
from: (tableName) => ({
insert: async (data) => {
console.log(`[DEMO] Attempting to insert into ${tableName}:`);
console.log(JSON.stringify(data, null, 2));
// Simulate a successful response
return { data: data, error: null };
}
})
};
async function sendChatMessage(messageText, senderId) {
const { data, error } = await supabase
.from('messages')
.insert([
{ text: messageText, user_id: senderId }
]);
if (error) {
console.error('Error sending message:', error.message);
} else {
console.log('Message sent successfully:', data);
}
}
// --- Run the example ---
sendChatMessage("Hey there, CoddyKit!", "a1b2c3d4-e5f6-7890-1234-567890abcdef");Viestien vastaanottaminen reaaliajassa
Viestien lähettäminen on vasta puolet kokonaisuudesta. Reaaliaikaisen keskustelun hienous on uusien viestien näkeminen heti!
Supabase Realtime mahdollistaa tietokannan muutosten tilaamisen. Kuuntelemme erityisesti uusia INSERT-tapahtumia messages-taulussa.
Kun kuka tahansa käyttäjä lisää uuden viestin, sovelluksesi saa ilmoituksen ja voi päivittää keskustelunäkymän.
Koodi: uusien viestien tilaaminen
Tämä koodi määrittää kuuntelijan uusille viesteille. Kun viesti lisätään, callback-funktio suoritetaan.
payload.new-objekti sisältää juuri lisätyn viestin kaikki tiedot.
import { createClient } from '@supabase/supabase-js';
// Mock Supabase client for demonstration purposes
const supabase = {
channel: (channelName) => ({
on: (eventType, filter, callback) => {
console.log(`[DEMO] Subscribing to channel "${channelName}" for event "${eventType}" with filter:`, JSON.stringify(filter));
// Simulate a message arriving after a delay
setTimeout(() => {
const mockPayload = {
eventType: 'INSERT',
schema: 'public',
table: 'messages',
new: { id: 2, text: 'This is a new realtime message!', user_id: 'another-user-id', created_at: new Date().toISOString() },
old: {}
};
console.log("[DEMO] Simulating new message arrival...");
callback(mockPayload);
}, 3000); // Simulate message arriving after 3 seconds
return {
subscribe: (cb) => {
console.log("[DEMO] Subscription initiated.");
// Simulate successful subscription immediately
cb('SUBSCRIBED');
}
};
}
})
};
// --- Run the example ---
const chatChannel = supabase.channel('messages_channel');
chatChannel
.on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages' }, (payload) => {
console.log('Realtime: New message received!');
console.log('Message content:', payload.new.text);
console.log('From user:', payload.new.user_id);
// In a real app, you would update your UI here to display the message
})
.subscribe((status) => {
if (status === 'SUBSCRIBED') {
console.log('Successfully subscribed to new messages!');
} else {
console.log('Subscription status:', status);
}
});Viestien näyttäminen käyttöliittymässä
Kun vastaanotat uuden viestin reaaliaikaisen tilauksen kautta, seuraava vaihe on näyttää se keskustelukäyttöliittymässä.
Yleensä otat payload.new-objektin, poimit siitä text-, user_id- ja created_at-arvot ja lisäät viestin sitten dynaamisesti keskusteluikkunaan.
- Luo uusi keskustelukupla tai muu elementti.
- Täytä se viestin tiedoilla.
- Lisää se keskusteluviestien luetteloon.
- Harkitse automaattista vieritystä alareunaan parhaan käyttökokemuksen takaamiseksi!
Käyttäjäkontekstin ja aikaleimojen lisääminen
Peruskeskustelu toimii, mutta hyvä keskustelu näyttää, kuka lähetti mitä ja milloin.
Koska messages-taulussamme on user_id, voit hakea käyttäjäprofiileja (esimerkiksi käyttäjänimen ja avatar-kuvan) näytettäväksi viestien yhteydessä. Tämä voi tarkoittaa yksinkertaista join-liitosta, jos haet vanhoja viestejä, tai käyttäjätietojen hakemista erikseen reaaliaikaisia viestejä varten.
Supabasen automaattisesti lisäämä created_at-aikaleima on olennainen viestien järjestämisessä ja lähetysajan näyttämisessä.
Pikatarkistus: keskustelun kulku
Rakennatte reaaliaikaista keskustelua. Mitkä ovat kaksi ensisijaista Supabase-asiakkaan toimintoa, joita käytätte viestien näyttämiseen välittömästi kaikille käyttäjille?
Kertaus: reaaliaikainen keskusteluominaisuus
Olette onnistuneesti rakentaneet reaaliaikaisen keskusteluominaisuuden ytimen!
Käsittelimme seuraavat aiheet:
- Yksinkertaisen
messages-taulun suunnittelu. - Uusien viestien lähettäminen lisäämällä dataa Supabaseen.
- Uusien viestien vastaanottaminen välittömästi Supabase Realtime -tilausten avulla.
- Viestien integroiminen sovelluksen käyttöliittymään.
Tämä datan lisäämisen ja muutosten tilaamisen malli on tärkeä monissa reaaliaikaisissa sovelluksissa, ei vain keskusteluissa. Jatkakaa tutkimista!
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
Usein kysytyt kysymykset
Onko oppitunti ”Reaaliaikaisen chat-ominaisuuden rakentaminen” ilmainen?
Kyllä – oppitunnin ”Reaaliaikaisen chat-ominaisuuden rakentaminen” 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 ”Reaaliaikaisen chat-ominaisuuden rakentaminen”?
Sovella reaaliaikaisen viestinnän osaamistasi käytännön chat-sovelluksen luomiseen ja esittele viestien välitön toimitus. 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 3/4.
Kuinka kauan ”Reaaliaikaisen chat-ominaisuuden rakentaminen”-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