NocodegardenNocodegarden

âš¡ Realtime

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

Setup

Add the element Supabase Realtime to your page and configure the following field:

  • Name
    JSON message type
    Type
    App Data
    Description

    Optional. Data type initialized through the API connector, used to define the format of the message you want to broadcast using the "Broadcast message" action. You can leave this field empty if you intend to broadcast only simple text messages.

  • Name
    Expected JSON message response (JSON)
    Type
    JSON
    Description

    By default, the plugin attempts to automatically retrieve the expected result based on the type defined in the API connector. To prevent any retrieval failures and ensure that the plugin can properly publish results from Supabase, we recommend you paste your schema into this field. This schema should match the one you have already entered in the API connector.

  • Name
    User state type
    Type
    App Data
    Description

    Optional. Data type initialized through the API connector, used to define the format of the message you want to broadcast using the "Broadcast message" action. You can leave this field empty if you intend to broadcast only simple text messages.

  • Name
    Expected user state response (JSON)
    Type
    JSON
    Description

    By default, the plugin attempts to automatically retrieve the expected result based on the type defined in the API connector. To prevent any retrieval failures and ensure that the plugin can properly publish results from Supabase, we recommend you paste your schema into this field. This schema should match the one you have already entered in the API connector.

States

The element exposes the following states:

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

Broadcast

  • Messages: list of received messages
  • Last message: last message received
  • JSON messages: list of received JSON messages
  • Last JSON message: last 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.

Clear messages

Clear the realtime messages.

Do you need any help? Feel free to reach out