Adding Real-Time Functionality to Lovable Using Supabase Realtime

-- Table exists but Realtime is not enabled
CREATE TABLE public.messages (
  id uuid DEFAULT gen_random_uuid() PRIMARY KEY,
  content text NOT NULL,
  user_id uuid REFERENCES auth.users(id),
  created_at timestamptz DEFAULT now()
);

-- Enable Realtime publication for the messages table
ALTER PUBLICATION supabase_realtime ADD TABLE public.messages;

import { useEffect, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
function ChatRoom() {
  const [messages, setMessages] = useState<any[]>([]);
  useEffect(() => {
    // Only fetches once — no live updates
    supabase.from("messages").select("*").then(({ data }) => {
      if (data) setMessages(data);
    });
  }, []);
  return <div>{messages.map(m => <p key={m.id}>{m.content}</p>)}</div>;
}

import { useEffect, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
function ChatRoom() {
  const [messages, setMessages] = useState<any[]>([]);
  useEffect(() => {
    // Initial fetch
    supabase.from("messages").select("*").order("created_at").then(({ data }) => {
      if (data) setMessages(data);
    });
    // Subscribe to new inserts in real time
    const channel = supabase
      .channel("messages-realtime")
      .on(
        "postgres_changes",
        { event: "INSERT", schema: "public", table: "messages" },
        (payload) => {
          // Append new message without re-fetching everything
          setMessages((prev) => [...prev, payload.new]);
        }
      )
      .subscribe();
    // Cleanup: remove channel on unmount to prevent memory leaks
    return () => {
      supabase.removeChannel(channel);
    };
  }, []);
  return <div>{messages.map(m => <p key={m.id}>{m.content}</p>)}</div>;
}

// No real-time typing indicator — users have no idea if someone is typing

import { useEffect, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
function useTypingIndicator(roomId: string, userId: string) {
  const [typingUsers, setTypingUsers] = useState<string[]>([]);
  useEffect(() => {
    const channel = supabase.channel(`typing-${roomId}`);
    channel
      .on("broadcast", { event: "typing" }, (payload) => {
        // Another user started typing
        if (payload.payload.userId !== userId) {
          setTypingUsers((prev) =>
            prev.includes(payload.payload.userId) ? prev : [...prev, payload.payload.userId]
          );
          // Remove after 3 seconds of no activity
          setTimeout(() => {
            setTypingUsers((prev) => prev.filter((id) => id !== payload.payload.userId));
          }, 3000);
        }
      })
      .subscribe();
    return () => { supabase.removeChannel(channel); };
  }, [roomId, userId]);
  const sendTyping = () => {
    supabase.channel(`typing-${roomId}`).send({
      type: "broadcast",
      event: "typing",
      payload: { userId },
    });
  };
  return { typingUsers, sendTyping };
}

// No way to know which users are currently online

import { useEffect, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
interface OnlineUser {
  id: string;
  name: string;
  online_at: string;
}
function useOnlineUsers(roomId: string, currentUser: { id: string; name: string }) {
  const [onlineUsers, setOnlineUsers] = useState<OnlineUser[]>([]);
  useEffect(() => {
    const channel = supabase.channel(`presence-${roomId}`);
    channel
      .on("presence", { event: "sync" }, () => {
        // Gather all present users into a flat array
        const state = channel.presenceState<OnlineUser>();
        const users = Object.values(state).flat();
        setOnlineUsers(users);
      })
      .subscribe(async (status) => {
        if (status === "SUBSCRIBED") {
          // Announce this user's presence
          await channel.track({
            id: currentUser.id,
            name: currentUser.name,
            online_at: new Date().toISOString(),
          });
        }
      });
    return () => { supabase.removeChannel(channel); };
  }, [roomId, currentUser.id]);
  return onlineUsers;
}