How to set up real-time listeners in Supabase?

 

Step 1: Create a Supabase Project

 

• Go to the Supabase website and log in to your account.
• Click on the “New project” button.
• Enter a name for your project and select your preferred database password.
• Choose the region closest to you for optimal performance and click “Create new project”.

 

Step 2: Set up the Database Table

 

• Once your project is created, go to the “Table Editor” in the Supabase dashboard.
• Click on “New Table” to create a new table where you’ll be listening for changes.
• Define your table columns based on your requirements (e.g., id, name, description).
• Make sure to set a primary key, often an id field with an auto-incrementing integer.
• Save your changes.

 

Step 3: Configure Real-time Capabilities

 

• By default, Supabase enables real-time functions for all tables. However, to ensure it’s active:
• Navigate to “Database” > “Replication” in the Supabase dashboard.
• Ensure that the tables you intend to listen to have enabled "Replicate this data in real-time".

 

Step 4: Install the Supabase Client Library

 

• To interact with Supabase in your application, you need to install the Supabase client library.

• If you’re using JavaScript, install it using npm:

  npm install @supabase/supabase-js

 

Step 5: Set up Real-time Listener in Your App

 

• Import the Supabase client library and initialize a client with your Supabase URL and public anon key:

  
  import { createClient } from '@supabase/supabase-js';
  
  const supabaseUrl = 'https://YOUR_SUPABASE_URL';
  const supabaseAnonKey = 'YOUR_PUBLIC_ANON\_KEY';
  
  const supabase = createClient(supabaseUrl, supabaseAnonKey);
  

• Set up a real-time listener for a table:

  
  const subscription = supabase
    .from('YOUR_TABLE_NAME')
    .on('\*', payload => {
      console.log('Change received!', payload);
    })
    .subscribe();
  

 

Step 6: Handle Incoming Real-time Changes

 

• Within the .on('*', callback) function, you can handle different types of changes (INSERT, UPDATE, DELETE) as needed:

  
  .on('INSERT', payload => {
    console.log('New row!', payload.new);
  })
  .on('UPDATE', payload => {
    console.log('Updated row!', payload.new);
  })
  .on('DELETE', payload => {
    console.log('Deleted row!', payload.old);
  })
  

 

Step 7: Unsubscribe When Necessary

 

• If needed, you can unsubscribe from the real-time updates:

  
  supabase.removeSubscription(subscription);
  

• This is usually done when a component unmounts or your application shuts down to prevent memory leaks.

 

Conclusion

 

• With the above steps, you’ve set up real-time listeners using Supabase in your application. Real-time listeners allow your app to react to changes in your database immediately, providing a seamless user experience.