Flutter实时用户在线状态管理插件firebase_presence的使用

Flutter实时用户在线状态管理插件firebase_presence的使用

FirebasePresence

FirebasePresence 是一个解决方案，用于观察和收集应用程序及其用户活动的详细生命周期和连接数据，然后将其报告到 Firebase Realtime 数据库。这在用户在线/离线状态管理方面非常有用，还可以检查用户是否专注于应用程序。

特性

  • 实时推送/获取在线/离线状态到RTDB。
  • 实时推送/获取生命周期状态数据到RTDB（可选）。
  • 指定一个 Firebase 用户以进行在线/生命周期数据记录。
  • 生命周期状态回调。
  • 可选的错误处理。
  • 可选的自动清理。

如何使用？

生命周期数据由 WidgetsBindingObserver 确定，而用户存在状态则完全依赖于 FirebaseDatabase 实例来提供其连接状态。

快速开始

将你的 MaterialApp 包裹在 FirebasePresence 中，并让它完成其余的工作。

你也可以考虑将特定视图或小部件包裹在 FirebasePresence 中，以便针对应用内的特定视图，这些视图需要特定的在线和生命周期数据。如果这样做，则提供唯一的 DatabaseReference 可以帮助隔离写入 Firebase Realtime 数据库的数据。

FirebasePresence(
  setLifeCycleState: true,
  setOnlinePresence: true,
  autoDispose: true,
  databaseReference: database.ref('presence'),
  onDetachedCallback: () => print('Detached.'),
  onInactiveCallback: () => print('Inactive.'),
  onResumedCallback: () => print('Resumed.'),
  onPausedCallback: () => print('Paused.'),
  onErrorCallback: (e, s) => print(e),
  errorBuilder: (error, stackTrace) => const Text('Error'),
  child: MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Firebase Presence'),
      ),
      body: FirebasePresenceBuilder(
        userId: auth.currentUser!.uid,
        databaseReference: database.ref('presence'),
        onError: (e, s) => Text(e.toString()),
        builder: (data) => data != null
            ? Column(
                children: [
                  Text(data.isOnline.toString()), // 显示用户是否在线
                  Text(data.lastSeen.toString()), // 显示最后一次看到的时间
                  Text(data.appLifeCycle.toString()), // 显示应用程序的生命周期状态
                ],
              )
            : const Text('No data.'),
      ),
    ),
  ),
);

FirebasePresence 参数

  • setLifeCycleState - 是否在实时数据库中设置生命周期状态。
  • setOnlinePresence - 是否在实时数据库中设置在线状态。
  • autoDispose - 是否自动清理生命周期状态监听器。
  • databaseReference - 一个表示存储在线数据路径的 DatabaseReference 对象。
  • onDetachedCallback - 当生命周期事件处于分离状态时调用。
  • onInactiveCallback - 当生命周期事件处于不活跃状态时调用。
  • onResumedCallback - 当生命周期事件处于恢复状态时调用。
  • onPausedCallback - 当生命周期事件处于暂停状态时调用。
  • onErrorCallback - 当发生错误时调用。
  • errorBuilder - 发生错误时显示的小部件。
  • child - 子小部件。

FirebasePresenceBuilder

FirebasePresenceBuilder 是一个小部件，它从客户端设备上使用的 FirebasePresence 实例获取在线数据。

FirebasePresenceBuilder 参数

  • userId - 要检查在线状态的用户的用户ID。
  • databaseReference - 一个表示存储在线数据路径的 DatabaseReference 对象。
  • onError - 接收来自RTDB的数据时显示的小部件。
  • builder - 收到来自RTDB的数据时显示的小部件。

FirebasePresenceWidgetState 枚举

代表 FirebasePresence 小部件的各种生命周期状态。

  • init - 表示小部件已初始化其数据。
  • inactive - 表示此小部件的非活跃生命周期状态。
  • paused - 表示此小部件的暂停生命周期状态。
  • resumed - 表示此小部件的恢复生命周期状态。
  • detached - 表示此小部件的分离生命周期状态。
  • error - 表示在发送或接收RTDB数据时发生错误。
  • Null - 表示从RTDB接收到的数据为null。

Cloud Firestore / Cloud 函数反映在线数据

此外，我们可以通过云函数将在线数据反映到 Cloud Firestore。

示例

// 在线状态
exports.onUserStatusChange = functions.database
  // 数据库引用应与 `FirebasePresence` 小部件上指定的一致
  .ref("/presence/{uid}")
  .onUpdate(async (change, context) => {
    // 获取写入实时数据库的数据
    const data = change.after.val();

    // 获取到Firestore文档的引用
    const userAccountStatusRef = firestore.doc(`users/${context.params.uid}`);

    // 更新Firestore中的值
    console.log();
    return userAccountStatusRef.set({
      account: { presence: data },
    });
  });

更多关于Flutter实时用户在线状态管理插件firebase_presence的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter实时用户在线状态管理插件firebase_presence的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter应用程序中，使用firebase_presence插件可以帮助你轻松管理和监控用户的在线状态。firebase_presence依赖于Firebase Realtime Database来记录和查询用户的在线/离线状态。以下是如何在Flutter应用中使用firebase_presence插件的详细步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加firebase_presence插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.0.0
  firebase_database: ^10.0.0
  firebase_presence: ^1.0.0

然后运行 flutter pub get 来安装依赖。

2. 初始化 Firebase

确保你已经在Firebase控制台中创建了项目，并将 google-services.json（Android）或 GoogleService-Info.plist（iOS）文件添加到你的Flutter项目中。

在 main.dart 中初始化 Firebase：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Presence Demo',
      home: PresenceScreen(),
    );
  }
}

3. 使用 firebase_presence 插件

接下来，你可以在 PresenceScreen 中使用 firebase_presence 插件来管理用户的在线状态。

import 'package:flutter/material.dart';
import 'package:firebase_presence/firebase_presence.dart';
import 'package:firebase_database/firebase_database.dart';

class PresenceScreen extends StatefulWidget {
  [@override](/user/override)
  _PresenceScreenState createState() => _PresenceScreenState();
}

class _PresenceScreenState extends State<PresenceScreen> {
  FirebasePresence _presence;
  DatabaseReference _databaseReference;
  List<String> _onlineUsers = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    _initializePresence();
  }

  void _initializePresence() async {
    _databaseReference = FirebaseDatabase.instance.reference();
    _presence = FirebasePresence(_databaseReference);

    // 设置当前用户的在线状态
    await _presence.online();

    // 监听在线用户列表
    _databaseReference.child('online_users').onValue.listen((event) {
      if (event.snapshot.value != null) {
        final Map<dynamic, dynamic> users = event.snapshot.value;
        setState(() {
          _onlineUsers = users.keys.cast<String>().toList();
        });
      }
    });
  }

  [@override](/user/override)
  void dispose() {
    // 当用户离开页面时，设置离线状态
    _presence.offline();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Online Users'),
      ),
      body: ListView.builder(
        itemCount: _onlineUsers.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_onlineUsers[index]),
          );
        },
      ),
    );
  }
}
回到顶部