Realtime with Supabase in flutterflow

I have created a custom widget to listen to the realtime changes from the table in my supabase. I have also turned on realtime on supabase side. However, while test mode, I can not get any changes while I am doing changes on supabase manually. In browser console I got the error that "A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received." For reference, I am writing code of that custom widget here:

// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/backend/schema/structs/index.dart';
import '/backend/schema/enums/enums.dart';
import '/backend/supabase/supabase.dart';
import '/actions/actions.dart' as action_blocks;
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/custom_code/actions/index.dart'; // Imports custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:supabase_flutter/supabase_flutter.dart';

// ... (Previous imports remain unchanged)

class RealtimeTest2 extends StatefulWidget {
  const RealtimeTest2({
    Key? key,
    this.width,
    this.height,
    this.id,
    required this.refreshPageUI,
  }) : super(key: key);

  final double? width;
  final double? height;
  final int? id;
  final Future<dynamic> Function() refreshPageUI;

  @override
  _RealtimeTestState createState() => _RealtimeTestState();
}

class _RealtimeTestState extends State<RealtimeTest2> {
  late final SupabaseClient supabase;

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

    SupaFlow.initialize(); // Initialize Supabase Flutter

    supabase = SupaFlow.client; // Access Supabase client from SupaFlow

    supabase.channel('realtime_test').on(
      RealtimeListenTypes.postgresChanges,
      ChannelFilter(
        event: 'INSERT',
        schema: 'PUBLIC',
        table: 'realtime_test',
      ),
      (payload, [ref]) {
        final String content = payload['new']['change'];

        // Assuming 'realTimeTest' is a property in FFAppState
        FFAppState().realTimeTest = 'New row inserted';

        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Updated message: $content')),
        );
      },
    ).subscribe();

    // Calling the method from the widget
    widget.refreshPageUI();
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Please help me through this. I am getting zero errors while compiling this code. So this code seems working except in test mode.

3
1 reply