Real-time Database
Database yang otomatis push perubahan ke client. Tidak perlu manage WebSocket sendiri — database menangani sync.
Supabase Realtime
import { createClient } from "@supabase/supabase-js";
const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);
// Listen to INSERT on messages table
const channel = supabase
.channel("messages")
.on("postgres_changes", {
event: "INSERT",
schema: "public",
table: "messages",
filter: "channel_id=eq.123",
}, (payload) => {
console.log("New message:", payload.new);
addMessage(payload.new);
})
.subscribe();
// Listen to all changes (INSERT, UPDATE, DELETE)
supabase.channel("orders")
.on("postgres_changes", {
event: "*",
schema: "public",
table: "orders",
}, (payload) => {
console.log(payload.eventType, payload.new);
})
.subscribe();
Firebase Realtime Database
import { getDatabase, ref, onValue, push } from "firebase/database";
const db = getDatabase();
// Listen to data
onValue(ref(db, "messages/room-1"), (snapshot) => {
const messages = [];
snapshot.forEach(child => {
messages.push({ id: child.key, ...child.val() });
});
setMessages(messages);
});
// Write data (automatically synced to all listeners)
push(ref(db, "messages/room-1"), {
text: "Hello!",
author: "Budi",
timestamp: Date.now(),
});
Comparison
| Feature | Supabase | Firebase RTDB |
|---|---|---|
| Database | PostgreSQL | JSON tree |
| Query power | Full SQL | Limited |
| Realtime mechanism | PostgreSQL WAL → WebSocket | Native sync protocol |
| Offline support | Limited | Excellent |
| Self-host | Yes | No |
Kapan Pakai Real-time DB?
- Pakai — Prototyping, simple real-time needs, tim kecil
- Jangan — Complex business logic, high-throughput, custom sync requirements