Supabase Realtime allow us to subscribe to change events in the database - insert, update and delete - and update the UI dynamically. In this lesson, we enable replication on the messages table to tell Supabase we want to know about changes to this table.

Additionally, we use the Supabase client to set up a subscription for insert events on the messages table. This will receive websocket updates from Supabase, which we can handle in a callback function, and merge our server state with realtime updates, to allow our application to dynamically update as new messages are sent.

Code Snippets

Subscribe to realtime updates

useEffect(() => {
  const channel = supabase
    .channel("*")
    .on(
      "postgres_changes",
      { event: "INSERT", schema: "public", table: "messages" },
      (payload) => {
        const newMessage = payload.new as Message;

        if (!messages.find((message) => message.id === newMessage.id)) {
          setMessages([...messages, newMessage]);
        }
      }
    )
    .subscribe();

  return () => {
    supabase.removeChannel(channel);
  };
}, [supabase, messages, setMessages]);