Realtime subscription works in editor, not in live version

Ask us anything
1

Hey !

I have this super strange behaviour on this process :

  1. On app load, the user subscribes to a table changes
  2. On changes on this channel, the user might be redirected to another page (depending on the change) (made a workflow at top level “app workflows“ in the “more section“ where you can make “on app load“ workflows) using “on realtime database change“

This works flawlessly in editor mode but not in live version

Anyone has a clue ?

Thanks !

Supabase Realtime dont works
2

Hi Philibert :waving_hand:

We are going to need more information to be able to guide you better.

What do you mean it doesn’t work, what happens?

Are you using Supabase?
If so you might need to check your RLS in your backend tables.

3

Hi,

Thanks for your answer

  1. Yes i use supabase
  2. RLS are fine (select for everyone, even not loggedin users)
  3. Nothing happends : the workflow does not fire. I do not know if the socket is not opened or …
    => the weirdest is that it works in the weweb editor but not in the live version
    (Both on the main/live branch of supabase)
  4. My guess : comes from realtime : if i display a change on the page, it does display untill i fetch the collection again …

Any clues ?

Thanks !

4

I have the same problem, I noticed that if I leave the application inactive for a while or change tabs it stops updating in real time.

1 Like
5

I 've sucessfully implemented realtime with supabase so it should work, could you maybe share a video of your config ?

Tip : You can check the subscription state by trying to update the presence on the subscribed channel.

6

A limitation of real-time setups is that the socket may be closed when the browser tab changes or the application becomes inactive. To mitigate this, I run a small script every 30 seconds (a heartbeat) to check whether the socket connection to the server is still alive, and reconnect if needed.

7

I faced the same issue and created a solution for it.
I shared a post explaining how I handled this problem with an event listener + auto-resubscribe workflow.
Here’s the link to the topic: https://community.weweb.io/t/pwa-closes-the-supabase-realtime-socket-when-switching-tabs-solution-with-event-listener-auto-resubscribe-in-weweb/20185

1 Like
8

Thanks for all your answers !

Problem here : even on first load like 1 sec after loading the app it does not work anymore … (not closing the app or changing tab) - Works in the editor, not in the live version (I tried different browsers)

PS : I’ve had the issue on realtime not always live refreshed but here the bug occurs directly … I don’t even know how to debug / what to look at …

=> any clues why it works live and not in editor ?

(workflow) :

    1. On app load, the user subscribes to a table change
    2. On changes on this channel, the user might be redirected to another page (depending on the change) (made a workflow at top level “app workflows“ in the “more section“ where you can make “on app load“ workflows) using “on realtime database change“

    => This works flawlessly in editor mode but not in live version

Thanks !

9

Hello, anyone found a solution for that matter ? Yet the subscription socket fails but even on first attempt .. any clues ?
(Browser console : WebSocket connection to ‘ws://localhost:XXXX/’ failed:)

Thank you !

PWA closes the Supabase Realtime socket when switching tabs — solution with “event listener + auto-resubscribe” in WeWeb
10

Hi @Philibert I am wondering if you can try something else (perhaps the bug is in the realtime database changes stream), how about take that same logic and put it in a custom channel. So for example user gets to the page, you create a channel for them that is their own user_id or something. And then when you want the workflow to trigger you broadcast that event to their own channel. Or if the change is supposed to go to everybody. Then pick a stable channel name, like the name of your app. Then when the change is supposed to happen you broadcast the event to channel = your app name and since every user on login gets subscribe to that channel, they will get the event.

So to recap what I am suggesting is. Stop relying on the database propagating the change to the frontend for now (cos we don’t know why that isn’t working for you, it works for me, but let’s move that aside), is it possible for you from the frontend to know when this change is supposed to happen? If yes, then at the point in the workflow where if a user has done action X, then they should be redirected to Y. At that point, you use realtime to broadcast the event to a channel that you know for sure the user must’ve subscribed to (e.g. your app name), and then let realtime trigger the navigation.

I am suggesting this because while I can’t say much on whether database realtime channels have a bug (I have only used it in one place), I have used custom realtime channels over 50 times and those ones for sure work in editor, and in live mode, and they are in use, right now as I type this. So those are surely working, I can even trigger them from an API call from my backend. So, I have tested them extensively hence my advice, since it seems you have had this issue for a while.

Cheers

1 Like