Flutter实时数据流监听插件stream_feed_listener的使用

Flutter实时数据流监听插件stream_feed_listener的使用

Stream Activity Feeds Listener

Stream Activity Feeds Listener 是一个用于构建动态应用的服务。此库可以在任何 Dart 项目中使用，并且可以在 Flutter 的移动和 Web 应用中集成。

快速链接

  • 注册 获取 Stream Activity Feeds 的 API 密钥。
  • 教程 学习如何设置时间线 feed、关注其他 feed 并发布新活动。
  • Stream Activity Feeds UI Kit 使用通知和社会 feed 快速启动设计。

🛠 安装

从 pub 安装

Pub

下一步是将 stream_feed_listener 添加到您的依赖项中，只需打开 pubspec.yaml 并将其添加到 dependencies 部分。

dependencies:
  flutter:
    sdk: flutter

  stream_feed_listener: ^[最新版本]

使用于 Flutter

该包可以集成到 Flutter 应用程序中。请记住，切勿在 Flutter Web 应用、移动应用或非可信环境（如桌面应用）中暴露应用程序密钥。

🔌 使用

API 客户端设置（服务器端 + 客户端）

如果您想直接在 Web 或移动应用中使用 API 客户端，则需要在服务器端生成用户令牌并传递。

服务器端令牌生成

// 实例化一个新的客户端（服务器端）
const apiKey = '我的API密钥';
const secret = '我的API秘密';

// 实例化一个新的客户端（服务器端）
var client = StreamFeedClient(apiKey, secret: secret, runner: Runner.server);

// 可选地提供应用程序标识符和选项对象，指定要使用的数据中心和请求超时（15秒）
client = StreamFeedClient(apiKey,
  secret: secret,
  runner: Runner.server,
  appId: 'yourappid',
  runner: Runner.server,
  options: StreamHttpClientOptions(
    location: Location.usEast,
    connectTimeout: Duration(seconds: 15),
  ),
);

// 为用户 ID 为 "the-user-id" 的用户创建令牌
final userToken = client.frontendToken('the-user-id');

⚠️ 注意：出于安全考虑，绝不能公开您的 API 秘密或生成的客户端令牌，强烈建议在客户端令牌中使用 exp 声明。

客户端 API 初始化

// 实例化新的客户端并设置用户令牌
var client = StreamFeedClient(apiKey);

await client.setUser(user: user, token: frontendToken);

🔮 示例

// 服务器端实例化一个 feed 对象
var user1 = client.flatFeed('user', '1');

// 从第5到第10个活动获取（慢分页）
final activities = await user1.getActivities(limit: 5, offset: 5);
// 过滤 id 小于给定 UUID 的活动
final filtered_activities = await user1.getActivities(
      limit: 5,
      filter: Filter().idLessThan('e561de8f-00f1-11e4-b400-0cc47a024be0')

// 所有 API 调用都是异步执行的，并返回 Promise 对象
await user1
    .getActivities(
        limit: 5,
        filter: Filter().idLessThan('e561de8f-00f1-11e4-b400-0cc47a024be0'))
    .then((value) => /* 成功回调 */
        print(value))
    .onError((error,
              stackTrace) => /* 失败回调，reason.error 包含解释 */
        print(error));

// 创建一个新的活动
final activity = Activity( actor: '1', verb: 'tweet', object: '1', foreignId: 'tweet:1' );
final added_activity = await user1.addActivity(activity);
// 创建一个更复杂的活动
final complex_activity = Activity(
    actor: '1',
    verb: 'run',
    object: '1',
    foreignId: 'run:1',
    extraData: {
      'course': {'name': 'Golden Gate park', 'distance': 10},
      'participants': ['Thierry', 'Tommaso'],
      'started_at': DateTime.now().toIso8601String(),
    },
  );
final added_complex_activity = await user1.addActivity(complex_activity);

// 通过活动 ID 删除活动
await user1.removeActivityById('e561de8f-00f1-11e4-b400-0cc47a024be0');
// 或通过外部 ID 删除活动
await user1.removeActivityByForeignId('tweet:1');

// 将通知 feed 标记为已读
await notification1.getActivities(
  marker: ActivityMarker().allRead(),
);

// 将通知 feed 标记为已查看
await notification1.getActivities(
  marker: ActivityMarker().allSeen(),
);

// 关注另一个 feed
await user1.follow(client.flatFeed('flat', '42'));

// 取消关注另一个 feed
await user1.unfollow(client.flatFeed('flat', '42'));

// 取消关注另一个 feed 同时保留之前发布的活动
await user1.unfollow(client.flatFeed('flat', '42'), keepHistory: true);

// 不复制历史记录关注另一个 feed
await user1.follow(client.flatFeed('flat', '42'), activityCopyLimit: 0);

// 列出关注者和关注者
await user1.followers(limit: 10, offset: 10);
await user1.following(limit: 10, offset: 0);

await user1.follow(client.flatFeed('flat', '42'));

// 添加多个活动
const activities = [
  Activity(actor: '1', verb: 'tweet', object: '1'),
  Activity(actor: '2', verb: 'tweet', object: '3'),
];
await user1.addActivities(activities);

// 使用 to 参数指定额外的 feed 推送活动（特别是通知风格 feed）
final to = FeedId.fromIds(['user:2', 'user:3']);
final activityTo = Activity(
  to: to,
  actor: '1',
  verb: 'tweet',
  object: '1',
  foreignId: 'tweet:1',
);
await user1.addActivity(activityTo);

// 将一个活动添加到多个 feed
final feeds = FeedId.fromIds(['flat:1', 'flat:2', 'flat:3', 'flat:4']);
final activityTarget = Activity(
  actor: 'User:2',
  verb: 'pin',
  object: 'Place:42',
  target: 'Board:1',
);

// ⚠️ 仅限服务器端！
await client.batch.addToMany(activityTarget, feeds!);

// 批量创建关注关系（让 flat:1 关注 user:1、user:2 和 user:3 feed 的单个请求）
const follows = [
  Follow('flat:1', 'user:1'),
  Follow('flat:1', 'user:2'),
  Follow('flat:1', 'user:3'),
];

// ⚠️ 仅限服务器端！
await client.batch.followMany(follows);

// 更新部分活动
final set = {
  'product.price': 19.99,
  shares: {
    facebook: '...',
    twitter: '...',
  },
};
final unset = ['daily_likes', 'popularity'];

// ...通过 ID 更新
final update = ActivityUpdate.withId( '54a60c1e-4ee3-494b-a1e3-50c06acb5ed4', set, unset);
await client.updateActivityById(update);
// ...或通过组合外部 ID 和时间更新
const timestamp = DateTime.now();
const foreignID= 'product:123';
final update2 = ActivityUpdate.withForeignId(
  foreignID,
  timestamp,
  set,
  unset,
);
await client.updateActivityById(update2);

// 更新现有活动的 'to' 字段
// client.flatFeed("user", "ken").function (foreign_id, timestamp, new_targets, added_targets, removed_targets)
// new_targets, added_targets, 和 removed_targets 都是 feed ID 的数组
// 提供 new_targets 参数（将替换活动上的所有目标），或者提供 added_targets 和 removed_targets 参数
// 注意 - updateActivityToTargets 方法不应用于浏览器环境。
await client.flatFeed('user', 'ken').updateActivityToTargets('foreign_id:1234', timestamp, ['feed:1234']);
await client.flatFeed('user', 'ken').updateActivityToTargets('foreign_id:1234', timestamp, null, ['feed:1234']);
await client.flatFeed('user', 'ken').updateActivityToTargets('foreign_id:1234', timestamp, null, null, ['feed:1234']);

Realtime (Faye)

Stream 使用 Faye 实现实时通知。以下是订阅 feed 更改的快速指南：

// ⚠️ userToken 是在服务器端生成的（参见上一节）
final client = StreamFeedClient('YOUR_API_KEY', token: userToken, appId: 'APP_ID');
final user1 = client.flatFeed('user', '1');

// 订阅更改
final subscription = await userFeed.subscribe((message) => print(message));
// 现在每当 feed 用户 1 发生更改时，
// 回调将被调用

// 要取消订阅，可以调用从 subscribe 调用返回的对象的 cancel 方法。
// 这将从该频道移除侦听器。
await subscription.cancel();

🔮 示例项目

在 example 文件夹中有一个详细的 Flutter 示例项目。您可以直接运行并玩转它。

Contributing

代码约定

  • 在提交代码之前，请确保运行 dartfmt。
  • 确保所有公共方法和函数都有良好的文档说明。

运行测试

  • 运行 flutter test

发布新版本

  • 在 pubspec.yaml 和 version.dart 中更新包版本。
  • 在 CHANGELOG.md 中添加更改日志条目。
  • 运行 flutter pub publish 发布包。

监视模型并生成 JSON 代码

JSON 序列化依赖于代码生成；在对库进行更改时请确保保持其运行。

flutter pub run build_runner watch
1 回复

更多关于Flutter实时数据流监听插件stream_feed_listener的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


stream_feed_listener 是一个用于在 Flutter 应用中监听实时数据流的插件。它通常用于与 Stream（一个实时数据流平台）集成，以便在应用中实时更新和显示数据。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  stream_feed_listener: ^0.1.0  # 请检查最新版本

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

基本用法

  1. 初始化 Stream 客户端

    在使用 stream_feed_listener 之前，你需要初始化 Stream 客户端。通常，你需要在应用的入口处进行初始化。

    import 'package:stream_feed_flutter/stream_feed_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  final client = StreamFeedClient(
    'YOUR_API_KEY',
    'YOUR_API_SECRET',
  );
  
  runApp(MyApp(client: client));
}

  2. 使用 StreamFeedListener

    StreamFeedListener 是一个 Widget，它可以监听 Stream 数据流的变化，并在数据更新时自动刷新 UI。

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

class MyApp extends StatelessWidget {
  final StreamFeedClient client;

  MyApp({required this.client});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stream Feed Listener Example'),
        ),
        body: StreamFeedListener(
          client: client,
          feedGroup: 'user',
          userId: 'user1',
          builder: (context, activities) {
            return ListView.builder(
              itemCount: activities.length,
              itemBuilder: (context, index) {
                final activity = activities[index];
                return ListTile(
                  title: Text(activity.actor),
                  subtitle: Text(activity.verb),
                );
              },
            );
          },
        ),
      ),
    );
  }
}

  3. 处理数据流

    StreamFeedListener 会自动监听指定 feedGroup 和 userId 的数据流，并在数据发生变化时调用 builder 方法。你可以在 builder 方法中构建 UI 来显示数据。

高级用法

  • 自定义数据流：你可以通过 StreamFeedListener 的 filter 和 sort 参数来自定义数据流的过滤和排序逻辑。

  • 错误处理：你可以通过 onError 回调来处理监听过程中可能发生的错误。

  • 手动刷新：你可以通过 StreamFeedListener 的 refresh 方法来手动刷新数据流。

示例代码

以下是一个完整的示例代码，展示了如何使用 stream_feed_listener 插件来监听和显示实时数据流：

import 'package:flutter/material.dart';
import 'package:stream_feed_flutter/stream_feed_flutter.dart';
import 'package:stream_feed_listener/stream_feed_listener.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  final client = StreamFeedClient(
    'YOUR_API_KEY',
    'YOUR_API_SECRET',
  );
  
  runApp(MyApp(client: client));
}

class MyApp extends StatelessWidget {
  final StreamFeedClient client;

  MyApp({required this.client});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stream Feed Listener Example'),
        ),
        body: StreamFeedListener(
          client: client,
          feedGroup: 'user',
          userId: 'user1',
          builder: (context, activities) {
            return ListView.builder(
              itemCount: activities.length,
              itemBuilder: (context, index) {
                final activity = activities[index];
                return ListTile(
                  title: Text(activity.actor),
                  subtitle: Text(activity.verb),
                );
              },
            );
          },
        ),
      ),
    );
  }
}
回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！