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

Question

因为我的 BaaS，我想使用名为 realtime_dart 的包中的实时数据和 StreamBuilder。 Supabase 使用这个包，所以我也需要它。但是我不知道如何正确使用Socket hooks。

这里是我使用的包的例子(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

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

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 的一切！

8 月 14 日编辑

stream() 已登陆最新版本的 supabase_flutter。

API 与我上面解释的有所不同，因为您需要在最后调用 execute()，如下所示：

supabase.from('chats').stream().execute();

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

How to use socket hooks with Stream Builder

flutter

dart

websocket

supabase

这里是我使用的包的例子(realtime_dart)

如何将此套接字挂钩与 StreamBuilder 一起使用？

8 月 14 日编辑