Gathering detailed insights and metrics for @supabase/realtime-js
An isomorphic Javascript client for Supabase Realtime server.
Installations
npm install @supabase/realtime-jsDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
18.20.5
NPM Version
10.8.2
Score
82.8
Supply Chain
99.1
Quality
91
Maintenance
100
Vulnerability
100
License
Releases
118
Contributors
100
Languages
3
TypeScript
JavaScript
CSS
TypeScript (96.49%)
JavaScript (2.97%)
CSS (0.54%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Download Statistics
Total Downloads
35,445,920
Last Day
103,299
Last Week
1,009,456
Last Month
3,783,528
Last Year
23,316,646
GitHub Statistics
MIT License
331 Stars
335 Commits
61 Forks
27 Watchers
12 Branches
100 Contributors
Updated on Feb 12, 2025
Bundle Size
23.20 kB
Minified
7.40 kB
Minified + Gzipped
Maintainers
12
Package Meta Information
Latest Version
2.11.3
Package Id
@supabase/realtime-js@2.11.3
Unpacked Size
381.26 kB
Size
55.71 kB
File Count
93
NPM Version
10.8.2
Node Version
18.20.5
Published on
Dec 06, 2024
Total Downloads
Cumulative downloads
Total Downloads
35,445,920
Last Day
3.1%
103,299
Compared to previous day
Last Week
6.7%
1,009,456
Compared to previous week
Last Month
31.7%
3,783,528
Compared to previous month
Last Year
175.3%
23,316,646
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Supabase Realtime Client
Send ephemeral messages with Broadcast, track and synchronize state with Presence, and listen to database changes with Postgres Change Data Capture (CDC).
Guides · Reference Docs · Multiplayer Demo
Overview
This client enables you to use the following Supabase Realtime's features:
- Broadcast: send ephemeral messages from client to clients with minimal latency. Use cases include sharing cursor positions between users.
- Presence: track and synchronize shared state across clients with the help of CRDTs. Use cases include tracking which users are currently viewing a specific webpage.
- Postgres Change Data Capture (CDC): listen for changes in your PostgreSQL database and send them to clients.
Usage
Installing the Package
1npm install @supabase/realtime-js
Creating a Channel
1import { RealtimeClient } from '@supabase/realtime-js' 2 3const client = new RealtimeClient(REALTIME_URL, { 4 params: { 5 apikey: API_KEY 6 }, 7}) 8 9const channel = client.channel('test-channel', {}) 10 11channel.subscribe((status, err) => { 12 if (status === 'SUBSCRIBED') { 13 console.log('Connected!') 14 } 15 16 if (status === 'CHANNEL_ERROR') { 17 console.log(`There was an error subscribing to channel: ${err.message}`) 18 } 19 20 if (status === 'TIMED_OUT') { 21 console.log('Realtime server did not respond in time.') 22 } 23 24 if (status === 'CLOSED') { 25 console.log('Realtime channel was unexpectedly closed.') 26 } 27})
Notes:
REALTIME_URLis'ws://localhost:4000/socket'when developing locally and'wss://<project_ref>.supabase.co/realtime/v1'when connecting to your Supabase project.API_KEYis a JWT whose claims must containexpandrole(existing database role).- Channel name can be any
string.
Broadcast
Your client can send and receive messages based on the event.
1// Setup... 2 3const channel = client.channel('broadcast-test', { broadcast: { ack: false, self: false } }) 4 5channel.on('broadcast', { event: 'some-event' }, (payload) => 6 console.log(payload) 7) 8 9channel.subscribe(async (status) => { 10 if (status === 'SUBSCRIBED') { 11 // Send message to other clients listening to 'broadcast-test' channel 12 await channel.send({ 13 type: 'broadcast', 14 event: 'some-event', 15 payload: { hello: 'world' }, 16 }) 17 } 18})
Notes:
- Setting
acktotruemeans that thechannel.sendpromise will resolve once server replies with acknowledgement that it received the broadcast message request. - Setting
selftotruemeans that the client will receive the broadcast message it sent out. - Setting
privatetotruemeans that the client will use RLS to determine if the user can connect or not to a given channel.
Presence
Your client can track and sync state that's stored in the channel.
1// Setup... 2 3const channel = client.channel( 4 'presence-test', 5 { 6 config: { 7 presence: { 8 key: '' 9 } 10 } 11 } 12) 13 14channel.on('presence', { event: 'sync' }, () => { 15 console.log('Online users: ', channel.presenceState()) 16}) 17 18channel.on('presence', { event: 'join' }, ({ newPresences }) => { 19 console.log('New users have joined: ', newPresences) 20}) 21 22channel.on('presence', { event: 'leave' }, ({ leftPresences }) => { 23 console.log('Users have left: ', leftPresences) 24}) 25 26channel.subscribe(async (status) => { 27 if (status === 'SUBSCRIBED') { 28 const status = await channel.track({ 'user_id': 1 }) 29 console.log(status) 30 } 31})
Postgres CDC
Receive database changes on the client.
1// Setup... 2 3const channel = client.channel('db-changes') 4 5channel.on('postgres_changes', { event: '*', schema: 'public' }, (payload) => { 6 console.log('All changes in public schema: ', payload) 7}) 8 9channel.on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages' }, (payload) => { 10 console.log('All inserts in messages table: ', payload) 11}) 12 13channel.on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'users', filter: 'username=eq.Realtime' }, (payload) => { 14 console.log('All updates on users table when username is Realtime: ', payload) 15}) 16 17channel.subscribe(async (status) => { 18 if (status === 'SUBSCRIBED') { 19 console.log('Ready to receive database changes!') 20 } 21})
Get All Channels
You can see all the channels that your client has instantiatied.
1// Setup... 2 3client.getChannels()
Cleanup
It is highly recommended that you clean up your channels after you're done with them.
- Remove a single channel
1// Setup... 2 3const channel = client.channel('some-channel-to-remove') 4 5channel.subscribe() 6 7client.removeChannel(channel)
- Remove all channels
1// Setup... 2 3const channel1 = client.channel('a-channel-to-remove') 4const channel2 = client.channel('another-channel-to-remove') 5 6channel1.subscribe() 7channel2.subscribe() 8 9client.removeAllChannels()
Credits
This repo draws heavily from phoenix-js.
License
MIT.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
all changesets reviewed
Reason
no binaries found in the repo
Reason
12 commit(s) and 4 issue activity found in the last 90 days -- score normalized to 10
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: MIT License: LICENSE.md:0
Reason
packaging workflow detected
Details
- Info: Project packages its releases by way of GitHub Actions.: .github/workflows/release.yml:11
Reason
dependency not pinned by hash detected -- score normalized to 3
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/supabase/realtime-js/ci.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/supabase/realtime-js/ci.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/supabase/realtime-js/ci.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/supabase/realtime-js/ci.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docs.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/supabase/realtime-js/docs.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docs.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/supabase/realtime-js/docs.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/docs.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/supabase/realtime-js/docs.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/supabase/realtime-js/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/supabase/realtime-js/release.yml/master?enable=pin
- Info: 0 out of 6 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 3 third-party GitHubAction dependencies pinned
- Info: 2 out of 2 npmCommand dependencies pinned
Reason
7 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-7m27-7ghc-44w9
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
- Warn: Project is vulnerable to: GHSA-9crc-q9x8-hgqq
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/ci.yml:1
- Warn: no topLevel permission defined: .github/workflows/docs.yml:1
- Warn: no topLevel permission defined: .github/workflows/release.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 30 are checked with a SAST tool
Score
5.6
/10
Last Scanned on 2025-02-10
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More