Flutter实时聊天功能插件flutter_supabase_chat_core的使用
Flutter实时聊天功能插件flutter_supabase_chat_core的使用
简介
Flutter Supabase Chat Core 是一个基于 Supabase 的后端即服务 (BaaS) 实现,用于为您的应用添加聊天支持。它结合了 flutter_chat_types 和 flutter_chat_ui 包,提供了完整的聊天功能实现。
特点
- 免费、开源和社区驱动:我们不提供付费插件,致力于创建易于使用的几乎即插即用的聊天体验。
- UI无关:您可以选择任何您喜欢的聊天UI。如果没有,我们提供了自己的免费开源 Flutter Chat UI,可以在几分钟内创建一个可用的聊天界面。
- 易于使用:返回消息、房间和用户的流数据。通过 Supabase Security Rules 控制数据访问。
快速开始
要求
- Dart >=2.19.0
- Flutter >=3.0.0
- Supabase 项目
创建Supabase项目
- 安装Supabase CLI: 官方文档
- 打开终端并登录Supabase:
supabase login
- 创建新项目(例如
demo-chat
):supabase projects create demo-chat
- 选择组织
- 选择区域
- 插入Postgres数据库的安全密码(保存在安全位置)
- 获取项目的
REFERENCE ID
:supabase projects list
- 获取
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
更多关于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',
),
),
],
),
);
}
}
注意
- 错误处理:示例代码中没有包含错误处理逻辑。在实际应用中,你应该添加适当的错误处理来确保应用的健壮性。
- 实时更新:
flutter_supabase_chat_core
插件应该提供了实时更新的功能,但具体实现可能依赖于插件的内部机制。你可能需要监听聊天室的变化来更新 UI。 - UI 优化:示例中的 UI 非常基础,你可能需要根据你的应用需求进行进一步的优化和美化。
- 依赖版本:请确保使用最新的
flutter_supabase_chat_core
版本,并查阅官方文档以获取最新的使用指南和 API 参考。
这个示例应该为你提供了一个良好的起点,以在你的 Flutter 应用中实现实时聊天功能。如果你有任何进一步的问题或需要更详细的帮助,请查阅 flutter_supabase_chat_core
的官方文档或社区资源。