⚡ Realtime

Add instant messaging and user presence features in your Bubble.io app


Setup

Add the element Supabase Realtime to your page.

Supabase - Database settings

States

The element exposes the following states:

  • Event: event type
  • Subscribed Channels: List of subscribed channels
  • Status: websocket connection status:
  • Error Message

Broadcast

  • Text Message: text message received
  • JSON Message: JSON message received

User Presence

  • Presences User IDs: List of online user IDs that subsribed to the channel
  • Presence User States: List of online user states

Events

The element triggers the following event:

  • Channel Subscribed: Triggered when successfully subscribed to a channel
  • Channel Error Received: Triggered when receiving an error on channel
  • Channel Closed: Triggered when channel is closed
  • Message Received: Triggered when a new message is received on the channel
  • Presence Sync Received: Triggered when receiving a sync event
  • Presence Join Received: Triggered when receiving a join event
  • Presence Leave Received: Triggered when receiving a leave event

Subscribe

Subscribe to a channel using the specified event filters. You can configure the following fields:

  • Name
    Channel Name
    Type
    string
    Description

    Channel to subscribe

  • Name
    Event Names
    Type
    string
    Description

    Act as a filter to specify the event names for which the broadcast will subscribe. For example: event1, event2

  • Name
    Allow Self
    Type
    boolean
    Description

    By default, broadcast messages are only sent to other clients. Set it to true if you want the sender to also receive the message.

  • Name
    Enable User Presence
    Type
    boolean
    Description

    Share user state to all channel's subscribers.

  • Name
    User ID
    Type
    text
    Description

    By default, Presence will generate a unique key to track a client channel's state. If you prefer, you can provide a custom key. This key should be unique among clients.

  • Name
    User State (JSON)
    Type
    JSON
    Description

    Optional. User state in JSON format. Ensure it matches the data type format defined in the API connector.


Send Message

Send a broadcast message to the channel. You can configure the following fields:

  • Name
    Channel Name
    Type
    string
    Description

    Broadcast channel name

  • Name
    Event Names
    Type
    string
    Description

    Act as a filter to specify the event names for which the broadcast will subscribe. The event names should be formatted as text and separated by a comma. For example: event1, event2

  • Name
    Text Message
    Type
    string
    Description

    Text message to broadcast

  • Name
    Message (JSON)
    Type
    string
    Description

    Message to broadcast in JSON format. Ensure it matches the data type format defined in the API connector. Ignored if "Text Message" is specified.


Unsubscribe from channel

Unsubscribe from a channel. You can configure the following fields:

  • Name
    Channel Name
    Type
    string
    Description

    Broadcast channel name


Unsubscribe from all channels

Unsubscribe from all channels.


Do you need any help? Feel free to reach out