Flutter实时聊天功能插件flutter_supabase_chat_core的使用

Flutter实时聊天功能插件flutter_supabase_chat_core的使用

简介

Flutter Supabase Chat Core 是一个基于 Supabase 的后端即服务 (BaaS) 实现,用于为您的应用添加聊天支持。它结合了 flutter_chat_typesflutter_chat_ui 包,提供了完整的聊天功能实现。

Pub Pub Points Pub Likes Build Status CodeFactor

GitHub Issues License

Flyer Chat logo


特点

  • 免费、开源和社区驱动:我们不提供付费插件,致力于创建易于使用的几乎即插即用的聊天体验。
  • UI无关:您可以选择任何您喜欢的聊天UI。如果没有,我们提供了自己的免费开源 Flutter Chat UI,可以在几分钟内创建一个可用的聊天界面。
  • 易于使用:返回消息、房间和用户的流数据。通过 Supabase Security Rules 控制数据访问。

快速开始

要求

  • Dart >=2.19.0
  • Flutter >=3.0.0
  • Supabase 项目

创建Supabase项目

  1. 安装Supabase CLI: 官方文档
  2. 打开终端并登录Supabase:
    supabase login
    
  3. 创建新项目(例如 demo-chat):
    supabase projects create demo-chat
    
  4. 选择组织
  5. 选择区域
  6. 插入Postgres数据库的安全密码(保存在安全位置)
  7. 获取项目的 REFERENCE ID:
    supabase projects list
    
  8. 获取 anon key:
    supabase projects api-keys
    

准备Supabase项目

在示例项目 (example/utils) 中有一个脚本,运行该脚本将自动配置Supabase项目,创建表、安全规则、存储桶等必要内容。

运行准备脚本

  • Linux
    cd ./example/utils/
    ./prepare.sh -h "your-postgres-host" -p your-postgres-port -d "your-postgres-database-name" -U "your-postgres-user"
    
  • Windows
    cd .\example\utils\
    .\prepare.ps1 -hostname "your-postgres-host" -port your-postgres-port -database "your-postgres-database-name" -user "your-postgres-user"
    

示例项目

在完成上述步骤后,您需要注册一些用户,示例应用程序将在注册屏幕上自动建议电子邮件和密码,默认密码是 Qawsed1-

包含的小部件

这个包实现了一些纯粹逻辑的小部件(没有特定UI的实现)。这些小部件使得实现与聊天相关的逻辑变得容易。

UserOnlineStateObserver

此小部件应尽可能早地放置在小部件树中,因为它负责检查和更新登录到应用程序的用户状态。当应用程序处于前台时,其他用户会收到在线状态的通知;反之,当应用程序关闭时也会更新状态。

@override
Widget build(BuildContext context) =>
    MaterialApp(
      ...
      home: const UserOnlineStateObserver(
        child: RoomsPage(),
      ),
    );

UserOnlineStatusWidget

此小部件用于获取特定用户的状态。例如,可以用于动画化用户的头像以指示其在线/离线状态。

@override
Widget build(BuildContext context) {
  return UserOnlineStatusWidget(
      uid: user.id,
      builder: (status) {
        // 使用 status == UserOnlineStatus.online 来动画化你的头像
      },
  );
}

RLS (行级安全)

准备脚本会自动配置数据库表和存储桶的安全规则,以下是应用的规则摘要:

chats.users

  • INSERT : 无人,此表由 auth.users 触发器填充。
  • SELECT : 所有已认证用户。
  • UPDATE : 仅用户本人。
  • DELETE : 无人。

chats.rooms

  • INSERT : 所有已认证用户。
  • SELECT : 所有属于聊天室的用户。
  • UPDATE : 所有属于聊天室的用户。
  • DELETE : 所有属于聊天室的用户。

chats.messages

  • INSERT : 所有属于聊天室的用户。
  • SELECT : 所有属于聊天室的用户。
  • UPDATE : 所有属于聊天室的用户。
  • DELETE : 所有属于聊天室的用户。

存储桶

chats_assets

  • INSERT : 所有属于聊天室的用户。
  • SELECT : 所有属于聊天室的用户。
  • UPDATE : 所有属于聊天室的用户。
  • DELETE : 所有属于聊天室的用户。

chats_user_avatar

  • INSERT : 仅用户本人。
  • SELECT : 所有已认证用户。
  • UPDATE : 仅用户本人。
  • DELETE : 仅用户本人。

示例代码

以下是一个完整的示例代码,展示了如何使用 flutter_supabase_chat_core 包来构建一个简单的聊天应用。

import 'package:flutter/material.dart';
import 'package:flutter_supabase_chat_core/flutter_supabase_chat_core.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

import 'src/pages/home.dart';
import 'src/theme/color_schemes.dart';
import 'supabase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Supabase.initialize(
    url: supabaseOptions.url,
    anonKey: supabaseOptions.anonKey,
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({
    super.key,
  });

  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Supabase Chat',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: lightColorScheme,
        ),
        darkTheme: ThemeData(
          useMaterial3: true,
          colorScheme: darkColorScheme,
        ),
        themeMode: ThemeMode.dark,
        home: const UserOnlineStateObserver(
          child: HomePage(),
        ),
      );
}

总结

通过 flutter_supabase_chat_core 包,您可以快速且轻松地为您的Flutter应用添加实时聊天功能。希望这篇指南对您有所帮助,如果您有任何问题或需要进一步的帮助,请随时查阅官方文档或参与社区讨论。


更多关于Flutter实时聊天功能插件flutter_supabase_chat_core的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter实时聊天功能插件flutter_supabase_chat_core的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,我可以为你提供一个关于如何使用 flutter_supabase_chat_core 插件来实现 Flutter 实时聊天功能的代码示例。flutter_supabase_chat_core 是一个用于 Flutter 的 Supabase 聊天插件,它允许你轻松地在你的应用中集成实时聊天功能。

以下是一个基本的代码示例,展示了如何使用 flutter_supabase_chat_core 来设置聊天室并发送消息。

1. 添加依赖

首先,在你的 pubspec.yaml 文件中添加 flutter_supabase_chat_core 依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_supabase_chat_core: ^latest_version  # 请使用最新版本号

然后运行 flutter pub get 来获取依赖。

2. 配置 Supabase

你需要在 Supabase 创建一个项目并获取你的匿名密钥和 URL。然后,在你的 Flutter 应用中配置这些凭据。

3. 初始化聊天客户端

在你的应用入口(例如 main.dart)中初始化聊天客户端:

import 'package:flutter/material.dart';
import 'package:flutter_supabase_chat_core/flutter_supabase_chat_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // Supabase 配置
  final supabaseUrl = 'YOUR_SUPABASE_URL';
  final supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY';

  // 初始化 Supabase 客户端
  final supabaseClient = SupabaseClient(supabaseUrl, supabaseAnonKey);

  // 初始化聊天客户端
  final chatClient = ChatClient(supabaseClient);

  // 等待聊天客户端初始化完成(如果需要)
  // 注意:这个初始化通常是异步的,具体取决于插件的实现
  // await chatClient.initialize(); // 如果插件提供了这样的方法

  runApp(MyApp(chatClient: chatClient));
}

class MyApp extends StatelessWidget {
  final ChatClient chatClient;

  MyApp({required this.chatClient});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Supabase Chat Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChatScreen(chatClient: chatClient),
    );
  }
}

4. 创建聊天屏幕

创建一个新的 Dart 文件(例如 chat_screen.dart)来实现聊天屏幕:

import 'package:flutter/material.dart';
import 'package:flutter_supabase_chat_core/flutter_supabase_chat_core.dart';

class ChatScreen extends StatefulWidget {
  final ChatClient chatClient;

  ChatScreen({required this.chatClient});

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

class _ChatScreenState extends State<ChatScreen> {
  late ChatRoom chatRoom;

  @override
  void initState() {
    super.initState();
    // 假设你已经有一个 chatRoomId
    final chatRoomId = 'YOUR_CHAT_ROOM_ID';
    widget.chatClient.getChatRoom(chatRoomId).then((room) {
      setState(() {
        chatRoom = room;
      });
    });
  }

  void sendMessage(String message) async {
    final sentMessage = await chatRoom.sendMessage(message);
    print('Message sent: ${sentMessage.content}');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat Room'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: chatRoom.messages.length,
              itemBuilder: (context, index) {
                final message = chatRoom.messages[index];
                return ListTile(
                  title: Text(message.content),
                );
              },
            ),
          ),
          TextField(
            onSubmitted: (message) {
              sendMessage(message);
            },
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Send a message',
            ),
          ),
        ],
      ),
    );
  }
}

注意

  1. 错误处理:示例代码中没有包含错误处理逻辑。在实际应用中,你应该添加适当的错误处理来确保应用的健壮性。
  2. 实时更新flutter_supabase_chat_core 插件应该提供了实时更新的功能,但具体实现可能依赖于插件的内部机制。你可能需要监听聊天室的变化来更新 UI。
  3. UI 优化:示例中的 UI 非常基础,你可能需要根据你的应用需求进行进一步的优化和美化。
  4. 依赖版本:请确保使用最新的 flutter_supabase_chat_core 版本,并查阅官方文档以获取最新的使用指南和 API 参考。

这个示例应该为你提供了一个良好的起点,以在你的 Flutter 应用中实现实时聊天功能。如果你有任何进一步的问题或需要更详细的帮助,请查阅 flutter_supabase_chat_core 的官方文档或社区资源。

回到顶部