Real-time Database (Supabase, Firebase) — Realtime

Real-time Database Database yang otomatis push perubahan ke client. Tidak perlu manage WebSocket sendiri — database menangani sync. Supabase Realtime import {…

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

FeatureSupabaseFirebase RTDB
DatabasePostgreSQLJSON tree
Query powerFull SQLLimited
Realtime mechanismPostgreSQL WAL → WebSocketNative sync protocol
Offline supportLimitedExcellent
Self-hostYesNo

Kapan Pakai Real-time DB?

Yang akan kamu pelajari