如何在 Stream Builder 中使用套接字钩子

Question

由于我的 BaaS，我想将实时数据和 StreamBuilder 与名为 realtime_dart 的包一起使用。 Supabase 使用这个包，所以我也需要它。但我不知道如何正确使用 Socket 钩子。

这是我正在使用的包示例 (realtime_dart)

import 'package:realtime_client/realtime_client.dart';

/// Example to use with Supabase Realtime https://supabase.io/
Future<void> main() async {
  final socket = RealtimeClient('ws://SUPABASE_API_ENDPOINT/realtime/v1',
      params: {'apikey': 'SUPABSE_API_KEY'},
      // ignore: avoid_print
      logger: (kind, msg, data) => {print('$kind $msg $data')});

  final channel = socket.channel('realtime:public');
  channel.on('DELETE', (payload, {ref}) {
    print('channel delete payload: $payload');
  });
  channel.on('INSERT', (payload, {ref}) {
    print('channel insert payload: $payload');
  });

  socket.onMessage((message) => print('MESSAGE $message'));

  // on connect and subscribe
  socket.connect();
  channel.subscribe().receive('ok', (_) => print('SUBSCRIBED'));

  // delay 20s to receive events from server
  await Future.delayed(const Duration(seconds: 20));

  // on unsubscribe and disconnect
  channel.unsubscribe();
  socket.disconnect();
}

如何在 StreamBuilder 中使用这个套接字钩子？

谢谢

Answer 1

stream() 包中可能会有一个新的 supabase_dart 功能，您可以直接使用它来收听这样的流：

StreamBuilder<List<Map<String, dynamic>>>(
  stream: supabase.from('chats').stream(),
  builder: (context, snapshot) {
    if (snapshot.connectionState != ConnectionState.active) {
      return preloader;
    }
    final chats = snapshot.data!;
    return ChatCell(chats);
  },
),

尚不可用，但您可以跟踪 PR here

此外，当您使用 Supabase 时，您可以直接使用，尽管您可以使用 realtime_client 或 gotrue 之类的单个包，但使用 supabase_flutter 包会更容易。这随附从身份验证、实时存储和 postgrest 的所有内容！