Saluran Kehadiran dan Siaran
Jelajahi lebih dari sekadar perubahan tabel dengan Supabase Realtime Presence untuk melacak siapa yang sedang online, serta Broadcast untuk mengirim pesan sementara antarklien.
Saluran Kehadiran dan Siaran adalah pelajaran Supabase Backend as a Service gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Supabase Backend as a Service, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Supabase Backend as a Service mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
Two More Realtime Features
Besides Postgres change streams, Supabase Realtime offers Presence (track online users) and Broadcast (send transient messages). Neither requires a database table.
What Is Presence?
Presence lets each client share small state (like a username or cursor position) and see everyone else's state in the same channel in real time.
Creating a Channel
A channel is a named room clients join.
const room = supabase.channel('room-1', {
config: { presence: { key: 'user-42' } }
});Tracking Presence
After subscribing, call track to publish your state to everyone in the channel.
room.subscribe(async (status) => {
if (status === 'SUBSCRIBED') {
await room.track({ name: 'Ada', online_at: Date.now() });
}
});Reading Who Is Online
Listen for sync events and read the current presence state of all members.
room.on('presence', { event: 'sync' }, () => {
const state = room.presenceState();
console.log('Online:', Object.keys(state).length);
});Join and Leave Events
Presence emits join and leave events so you can animate users appearing and disappearing.
room.on('presence', { event: 'join' }, ({ newPresences }) => {
console.log('Joined:', newPresences.length);
});What Is Broadcast?
Broadcast sends low-latency messages to everyone in a channel without storing them. Great for cursors, typing indicators, and game moves.
Sending a Broadcast
Use send with a custom event name and payload.
room.send({
type: 'broadcast',
event: 'cursor',
payload: { x: 120, y: 80 }
});Receiving a Broadcast
Subscribe to the same event name to handle incoming messages.
room.on('broadcast', { event: 'cursor' }, ({ payload }) => {
console.log('Cursor at', payload.x, payload.y);
});Cleaning Up
Always remove channels when a component unmounts to free connections.
function cleanup(channel, supabase) {
supabase.removeChannel(channel);
return 'removed';
}
console.log(cleanup('chan', { removeChannel: () => {} }));Choosing the Right Tool
Use Postgres changes for persisted data, Presence for online status, and Broadcast for fast disposable messages.
Quick Check
Test your understanding of Presence and Broadcast.
Recap
You learned to track online users with Presence and send ephemeral messages with Broadcast, plus when to use each versus Postgres change streams, and to clean up channels.
Belajar Supabase Backend as a Service dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 11
- Pelajaran
- 40
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Saluran Kehadiran dan Siaran” gratis?
Ya — teks lengkap “Saluran Kehadiran dan Siaran” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Supabase Backend as a Service, upgrade ke CoddyKit PRO. Kursus Supabase Backend as a Service mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Saluran Kehadiran dan Siaran”?
Jelajahi lebih dari sekadar perubahan tabel dengan Supabase Realtime Presence untuk melacak siapa yang sedang online, serta Broadcast untuk mengirim pesan sementara antarklien. Kamu berlatih Supabase Backend as a Service dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Supabase Backend as a Service?
Tidak diperlukan pengalaman sebelumnya. Supabase Backend as a Service di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Saluran Kehadiran dan Siaran” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Supabase Backend as a Service ini?
Ya. Setiap pelajaran Supabase Backend as a Service menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Memahami Langganan Waktu Nyata
- Berlangganan Perubahan Tabel
- Membangun Fitur Obrolan Langsung
- Saluran Kehadiran dan Siaran