@supabase/realtime-js

What is @supabase/realtime-js?

@supabase/realtime-js is a JavaScript client for interacting with Supabase's real-time features. It allows developers to subscribe to changes in their database and receive updates in real-time, enabling functionalities such as live data synchronization, real-time notifications, and collaborative applications.

What are @supabase/realtime-js's main functionalities?

Real-time Database Changes

This feature allows you to subscribe to changes in a specific table in your Supabase database. The code sample demonstrates how to set up a subscription to listen for any changes (insert, update, delete) on the 'your_table' table and log the payload of the change.

const { createClient } = require('@supabase/supabase-js');
const supabase = createClient('https://your-project.supabase.co', 'public-anon-key');

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

Real-time Insertions

This feature allows you to subscribe specifically to insertions in a table. The code sample shows how to listen for new rows being added to 'your_table' and log the payload of the new row.

const { createClient } = require('@supabase/supabase-js');
const supabase = createClient('https://your-project.supabase.co', 'public-anon-key');

const subscription = supabase
  .from('your_table')
  .on('INSERT', payload => {
    console.log('New row added!', payload);
  })
  .subscribe();

Real-time Updates

This feature allows you to subscribe specifically to updates in a table. The code sample demonstrates how to listen for updates to rows in 'your_table' and log the payload of the updated row.

const { createClient } = require('@supabase/supabase-js');
const supabase = createClient('https://your-project.supabase.co', 'public-anon-key');

const subscription = supabase
  .from('your_table')
  .on('UPDATE', payload => {
    console.log('Row updated!', payload);
  })
  .subscribe();

Real-time Deletions

This feature allows you to subscribe specifically to deletions in a table. The code sample shows how to listen for rows being deleted from 'your_table' and log the payload of the deleted row.

const { createClient } = require('@supabase/supabase-js');
const supabase = createClient('https://your-project.supabase.co', 'public-anon-key');

const subscription = supabase
  .from('your_table')
  .on('DELETE', payload => {
    console.log('Row deleted!', payload);
  })
  .subscribe();

Other packages similar to @supabase/realtime-js

socket.io

Socket.IO is a library that enables real-time, bidirectional and event-based communication between web clients and servers. Unlike @supabase/realtime-js, which is tightly integrated with Supabase's database, Socket.IO is more general-purpose and can be used for a wide range of real-time applications, including chat applications, live updates, and collaborative tools.

pusher-js

Pusher is a hosted service that makes it easy to add real-time data and functionality to web and mobile applications. Pusher channels provide a way to subscribe to events and receive updates in real-time. Compared to @supabase/realtime-js, Pusher is a more mature and feature-rich platform but requires a separate service subscription.

firebase

Firebase is a comprehensive app development platform that includes real-time database capabilities. Firebase Realtime Database allows you to store and sync data between your users in real-time. While @supabase/realtime-js focuses on real-time features for Supabase's PostgreSQL database, Firebase offers a NoSQL database with built-in real-time synchronization.

README

Realtime Client

Listens to changes in a PostgreSQL Database and broadcasts them over websockets.

Usage

This is for usage with Supabase Realtime server.

Basic usage:

import { Socket } = '@supabase/realtime-js'

var socket = new Socket(process.env.REALTIME_URL)
socket.connect()

// Listen to only INSERTS on the 'users' table in the 'public' schema
var allChanges = this.socket.channel('realtime:public:users')
  .join()
  .on('INSERT', payload => { console.log('Update received!', payload) })

// Listen to all changes from the 'public' schema
var allChanges = this.socket.channel('realtime:public')
  .join()
  .on('*', payload => { console.log('Update received!', payload) })

// Listen to all changes in the database
let allChanges = this.socket.channel('realtime:*')
  .join()
  .on('*', payload => { console.log('Update received!', payload) })

See full instructions this repository: Supabase Realtime.

Credits

• Basic Node.js client was made by Mario Campa of phoenix-channels.
• API was made by authors of the Phoenix Framework. See their website for complete list of authors.

License

MIT. License is the same as phoenix-channels and Phoenix Framework.