Not receiving the latest data from realtime stream

[yunpaik]

Hello all,

I implemented a chat feature to my flutter app following https://supabase.com/blog/flutter-tutorial-building-a-chat-app.

It works great and I am able to see the realtime message coming through fine when the app is open.
However, if the app sits in the background for a period of time and comes back to foreground, I am only seeing the messages to the point when the app went to background. I am not seeing the new messages that were added while the app was in the background.

I am speculating that it has something to do with re-establishing the connection, but I am kind of stuck. Any help will be appreciated.

Here's my code snippet:

class _ChatMessagesState extends State<ChatMessages> {
  late final Stream<List<ChatMessage>> chatMessages;

  @override
  void initState() {
    super.initState();

    chatMessages = supabase
        .from('chat')
        .stream(primaryKey: ['id'])
        .eq('room_id', widget.room.id)
        .order('created_at', ascending: true)
        .map((snapshot) =>
            snapshot.map((json) => ChatMessage.fromJson(json)).toList());
  }

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;

    return StreamBuilder(
      stream: chatMessages,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const ChatMessagesLoading();
        }

        if (snapshot.hasError) {
          return const Text('Error');
        }

        if (snapshot.hasData) {
          final messages = snapshot.data!.reversed.toList();

          if (messages.isEmpty) {
            return Center(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 30),
                child: Text(
                  'Start the conversation now!',
                ),
              ),
            );
          }

          return CustomScrollView(
            primary: false,
            reverse: true,
            controller: widget.scrollController,
            slivers: [
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  childCount: messages.length,
                  (context, index) {
                    return Text(
                      messages[index].body
                    );
                  },
                ),
              ),
            ],
          );
        }

        return const Placeholder();
      },
    );
  }
}

[GaryAustin1]

This is known.
https://github.com/orgs/supabase/discussions/5641
supabase/realtime-js#121

Realtime will lose connection in background tabs and closed mobile devices because of power saving throttling done by the browser. You have to handle the situation with a restart and reload any potential missed data when the tab comes out of background.