Android Example [B4X] Supabase - Realtime


This is a very simple tutorial on how to use the Realtime module. A more detailed tutorial is coming soon.

Step 1
Click in your project on "Project -> Build configurations -> Conditional Symbols"
Put SupabaseRealTime and click ok

Step 2
Check in the libraries tab the following libs.:
B4A: WebSocket
B4I: iWebSocket
B4J: jWebSocketClient V2.0+

Step 3
Initialize the SupabaseRealtime class
B4X:
Sub Class_Globals
    Public xSupabase As Supabase
    Private Realtime As SupabaseRealtime
End Sub

#IF B4J
Private Sub xlbl_Connect2Realtime_Click_MouseClicked (EventData As MouseEvent)
#Else
Private Sub xlbl_Connect2Realtime_Click
#End If
 
    Wait For (xSupabase.Auth.isUserLoggedIn) Complete (isLoggedIn As Boolean)
 
    If isLoggedIn = False Then
 
        Wait For (xSupabase.Auth.LogIn_EmailPassword("[email protected]","Test123!!")) Complete (User As SupabaseUser)
        If User.Error.Success Then
            Log("successfully logged in with " & User.Email)
        Else
            Log("Error: " & User.Error.ErrorMessage)
            Return
        End If
 
    End If
 
    '********Realtime part************************
    Realtime.Initialize(Me,"Realtime",xSupabase) 'Initializes the realtime class
    Realtime.Connect 'Connect to the supabase realtime server
 
    Wait For Realtime_Connected 'Client is connected
    Log("Realtime_Connected")
 
End Sub

Supabase provides a globally distributed cluster of Realtime servers that enable the following functionality:

Supabase Dashboard
You need to turn on the realtime feature for each table, a description can be found here:
 

Attachments

  • Supabase Realtime Example.zip
    10.7 KB · Views: 153
Last edited:

Alexander Stolte

Expert
Licensed User
Longtime User
Have you tried the recommended JDK 14 found here: https://www.b4x.com/b4j.html ?
Unfortunately, does not work either. Has already been treated unsuccessfully in the following thread:
 

OliverA

Expert
Licensed User
Longtime User
Has already been treated unsuccessfully in the following thread
All the issues with B4J WebSocket client come from trying to connect to the latest jServer that is included in B4J, which in turn is based on Jetty 11. Is the Supabase endpoint based on Jetty 11+? If not, you may be testing for the wrong thing. Have you tried the WebSocket test sites mentioned by @Erel here: https://www.b4x.com/android/forum/t...t-connect-at-first-attempt.142267/post-901816
 

Alexander Stolte

Expert
Licensed User
Longtime User

OliverA

Expert
Licensed User
Longtime User
Does not work.
I tried it also (today) and noticed it did not work. I put in a wish for an updated version. Currently, jWebSocketClient is based on jServer3. That may be the issue...
 

Alexander Stolte

Expert
Licensed User
Longtime User
Works now with B4J thanks to @OliverA and @Erel

For B4J you need the jWebSocketClient lib. V2.0+

I am working on a small example project where you can create chat rooms and then write to each other in real time. There I will still notice the one or the other optimization possibilities.
 

Waldemar Lima

Well-Known Member
Licensed User
Awesomeeeee.

but need change :
B4X:
Private Sub xlbl_Connect2Realtime_Click_MouseClicked (EventData As MouseEvent)
by
B4X:
Private Sub xlbl_Connect2Realtime_MouseClicked (EventData As MouseEvent)
 
Last edited:

Waldemar Lima

Well-Known Member
Licensed User
I detected a bug.
If I try to log in incorrectly, without first having at least 1 successful login, the messages below occur (apparently, when the login is successful, a supabaseauthtoken.dat file is created)
After the login is successful, this error no longer appears in cases of invalid logins.

however, if I delete this supabaseauthtoken.dat and try again with an incorrect login, the same error occurs again....


1698343823415.png
 

Alexander Stolte

Expert
Licensed User
Longtime User

Waldemar Lima

Well-Known Member
Licensed User
What am I doing wrong?
Shouldn't realtime_data work just by creating a table and triggering its realtime?

1699496093826.png
1699496121818.png

code snippet:
B4X:
    Realtime.Initialize(Me,"Realtime",xSupabase) 'Initializes the realtime class
    Realtime.Connect 'Connect to the supabase realtime server
    
    Wait For Realtime_Connected 'Client is connected
    Log("Realtime_Connected")

    'Subscribe to all database changes on dt_Chat with room_id = 3
    Realtime _
    .Channel("public","dt_Chat","") _
    .On(Realtime.SubscribeType_PostgresChanges) _
    .Event(Realtime.Event_ALL) _
    .Subscribe

    Wait For Realtime_Subscribed 'Successfully subscribed
    Log("Subscribed to topic")
    

End Sub

Private Sub Realtime_DataReceived(Data As SupabaseRealtime_Data)
    
    Log("working ?")
    
    If Data.EventType = Realtime.Event_UPDATE Then 'A record in the database was changed
        
        For Each k As String In Data.Records.Keys
            Log($"Column: "${k}" Value: "${Data.Records.Get(k)}""$)
        Next
        
    End If
    
End Sub
 

Waldemar Lima

Well-Known Member
Licensed User
I'm thinking about creating an example using this Supabase module with jserver...
and I see that there is a file: supabaseauthtoken.dat, is this to maintain the Project Settings, or is it to maintain the current user's authentication token?
 

PoppaBart

Member
What is the most effective way to keep a connection active indefinitely, in this example here, I did a test leaving the application active, however, for a long period of time without activity in supabase... and I get a timeout connection error.

Is there any way to deal with this by preventing the system from crashing or suddenly stopping working thanks to this disconnection?
 

Alexander Stolte

Expert
Licensed User
Longtime User
Can you please create new threads for questions? If someone is also looking for these things, they won't find anything. And it's also nicer not to make threads pages long. Thank you.

and I see that there is a file: supabaseauthtoken.dat, is this to maintain the Project Settings, or is it to maintain the current user's authentication token?
As the name suggests, everything is saved there by your current logged-in user. (AuthToken,RefreshToken and so on)
 
Top