Skip to main content
Module

x/live/deps.ts>supabase.RealtimeChannel

Open-Source web editor based on Preact, Tailwind and TypeScript. The other side of code.
deco-cx/deco
Very Popular
Go to Latest
class supabase.RealtimeChannel
Re-export
import { supabase } from "https://deno.land/x/live@1.63.12/deps.ts";
const { RealtimeChannel } = supabase;

A channel is the basic building block of Realtime and narrows the scope of data flow to subscribed clients. You can think of a channel as a chatroom where participants are able to see who's online and send and receive messages.

Constructors

new
RealtimeChannel(
topic: string,
)

Properties

bindings: { [key: string]: { type: string; filter: { [key: string]: any; }; callback: Function; id?: string; }[]; }
broadcastEndpointURL: string
joinedOnce: boolean
joinPush: Push
pushBuffer: Push[]
rejoinTimer: Timer
state: CHANNEL_STATES
subTopic: string
timeout: number
topic: string

Topic name can be any string.

Methods

_fetchWithTimeout(
url: string,
options: { [key: string]: any; },
timeout: number,
): Promise<Response>
on(
type: `${REALTIME_LISTEN_TYPES.PRESENCE}`,
filter: { event: `${REALTIME_PRESENCE_LISTEN_EVENTS.SYNC}`; },
callback: () => void,
): RealtimeChannel

Creates an event handler that listens to changes.

on<T extends { [key: string]: any; }>(
type: `${REALTIME_LISTEN_TYPES.PRESENCE}`,
filter: { event: `${REALTIME_PRESENCE_LISTEN_EVENTS.JOIN}`; },
callback: (payload: RealtimePresenceJoinPayload<T>) => void,
): RealtimeChannel
on<T extends { [key: string]: any; }>(
type: `${REALTIME_LISTEN_TYPES.PRESENCE}`,
filter: { event: `${REALTIME_PRESENCE_LISTEN_EVENTS.LEAVE}`; },
callback: (payload: RealtimePresenceLeavePayload<T>) => void,
): RealtimeChannel
on<T extends { [key: string]: any; }>(
type: `${REALTIME_LISTEN_TYPES.POSTGRES_CHANGES}`,
filter: RealtimePostgresChangesFilter<`${REALTIME_POSTGRES_CHANGES_LISTEN_EVENT.ALL}`>,
callback: (payload: RealtimePostgresChangesPayload<T>) => void,
): RealtimeChannel
on<T extends { [key: string]: any; }>(
type: `${REALTIME_LISTEN_TYPES.POSTGRES_CHANGES}`,
filter: RealtimePostgresChangesFilter<`${REALTIME_POSTGRES_CHANGES_LISTEN_EVENT.INSERT}`>,
callback: (payload: RealtimePostgresInsertPayload<T>) => void,
): RealtimeChannel
on<T extends { [key: string]: any; }>(
type: `${REALTIME_LISTEN_TYPES.POSTGRES_CHANGES}`,
filter: RealtimePostgresChangesFilter<`${REALTIME_POSTGRES_CHANGES_LISTEN_EVENT.UPDATE}`>,
callback: (payload: RealtimePostgresUpdatePayload<T>) => void,
): RealtimeChannel
on<T extends { [key: string]: any; }>(
type: `${REALTIME_LISTEN_TYPES.POSTGRES_CHANGES}`,
filter: RealtimePostgresChangesFilter<`${REALTIME_POSTGRES_CHANGES_LISTEN_EVENT.DELETE}`>,
callback: (payload: RealtimePostgresDeletePayload<T>) => void,
): RealtimeChannel
on(
type: `${REALTIME_LISTEN_TYPES.BROADCAST}`,
filter: { event: string; },
callback: (payload: { [key: string]: any; type: `${REALTIME_LISTEN_TYPES.BROADCAST}`; event: string; }) => void,
): RealtimeChannel

The following is placed here to display on supabase.com/docs/reference/javascript/subscribe.

on<T extends { [key: string]: any; }>(
type: `${REALTIME_LISTEN_TYPES.BROADCAST}`,
filter: { event: string; },
callback: (payload: { type: `${REALTIME_LISTEN_TYPES.BROADCAST}`; event: string; payload: T; }) => void,
): RealtimeChannel
presenceState<T extends { [key: string]: any; } = { }>(): RealtimePresenceState<T>
send(args: { [key: string]: any; type: "broadcast" | "presence" | "postgres_changes"; event: string; payload?: any; }, opts?: { [key: string]: any; }): Promise<RealtimeChannelSendResponse>

Sends a message into the channel.

subscribe(callback?: (status: `${REALTIME_SUBSCRIBE_STATES}`, err?: Error) => void, timeout?: number): RealtimeChannel

Subscribe registers your client with the server

track(payload: { [key: string]: any; }, opts?: { [key: string]: any; }): Promise<RealtimeChannelSendResponse>
unsubscribe(timeout?: number): Promise<"ok" | "timed out" | "error">

Leaves the channel.

Unsubscribes from server events, and instructs channel to terminate on server. Triggers onClose() hooks.

To receive leave acknowledgements, use the a receive hook to bind to the server ack, ie: channel.unsubscribe().receive("ok", () => alert("left!") )

untrack(opts?: { [key: string]: any; }): Promise<RealtimeChannelSendResponse>
updateJoinPayload(payload: { [key: string]: any; }): void