Flutter性能监控插件refena_inspector_client的使用

Flutter性能监控插件refena_inspector_client的使用

简介

refena_inspector_client 是 Refena 的性能监控插件，用于在开发过程中监控和调试 Flutter 应用。通过该插件，开发者可以实时查看应用的状态、执行自定义操作、并跟踪应用中的事件。

安装

首先，在 pubspec.yaml 文件中添加 refena_inspector_client 依赖：

# pubspec.yaml
dependencies:
  refena_inspector_client: <version>

dev_dependencies:
  refena_inspector: <version>

请将 <version> 替换为最新的版本号。你可以通过 Pub 查看最新版本。

使用示例

下面是一个完整的示例代码，展示了如何使用 refena_inspector_client 插件来监控和调试 Flutter 应用。

import 'package:refena/refena.dart';
import 'package:refena_inspector_client/refena_inspector_client.dart';

/// 运行此 main 函数，
/// 然后运行 inspector 服务器，命令如下：
/// `dart run refena_inspector`
void main() async {
  // 创建 RefenaContainer 实例，并添加观察者
  final ref = RefenaContainer(
    observers: [
      // 添加 RefenaInspectorObserver 以启用性能监控
      RefenaInspectorObserver(
        host: 'localhost', // 设置服务器地址
        actions: {
          'Test message': (Ref ref) => ref.message('test'), // 自定义操作：发送测试消息
          'Authentication': { // 认证相关的操作
            'Login': InspectorAction( // 登录操作
              params: {
                'name': ParamSpec.string(), // 用户名参数
                'password': ParamSpec.string(), // 密码参数
              },
              action: (ref, params) {
                ref.message(
                  'Login with ${params['name']} and ${params['password']}', // 发送登录信息
                );
              },
            ),
            'Register': InspectorAction( // 注册操作
              params: {
                'name': ParamSpec.string(required: true), // 必填用户名
                'age': ParamSpec.int(defaultValue: 20), // 年龄，默认值为20
                'height': ParamSpec.double(required: true), // 必填身高
                'premium': ParamSpec.bool(defaultValue: false), // 是否为高级用户，默认为false
              },
              action: (ref, params) {
                ref.message(
                  'Register with name: ${params['name']}, age: ${params['age']}, height: ${params['height']}, premium: ${params['premium']}', // 发送注册信息
                );
              },
            ),
            'Logout': (Ref ref) => throw 'Logout error', // 退出登录操作，抛出错误
            'Admin': { // 管理员相关的操作
              'Test': {
                'Hello': (Ref ref) => ref.message('Hello'), // 测试操作：发送 "Hello"
                'World': (Ref ref) => ref.message('World'), // 测试操作：发送 "World"
              }
            },
          },
        },
      ),
      // 添加 RefenaTracingObserver 以排除特定事件
      RefenaTracingObserver(
        exclude: (e) {
          return e.debugLabel.endsWith('5'); // 排除以 '5' 结尾的事件
        },
      ),
      // 添加 RefenaDebugObserver 以启用调试模式
      RefenaDebugObserver(),
    ],
  );

  int i = 0;
  while (true) {
    await Future.delayed(Duration(seconds: 1)); // 每秒执行一次
    ref.message('Hello! $i'); // 发送消息
    i++;
  }
}

说明

1. RefenaContainer: 这是 Refena 的核心容器，用于管理依赖注入和状态。我们通过 observers 参数添加了多个观察者，其中包括 RefenaInspectorObserver 用于性能监控。

2. RefenaInspectorObserver: 这个观察者负责与 Inspector 服务器通信，允许你在开发过程中实时查看应用的状态和执行自定义操作。你可以通过 actions 参数定义一系列可执行的操作，例如登录、注册、发送消息等。

3. InspectorAction: 用于定义具体的操作。每个操作可以接受参数（params），并且可以通过 action 回调函数执行相应的逻辑。你可以根据需要定义任意数量的操作和参数。

4. RefenaTracingObserver: 用于跟踪应用中的事件，并可以根据条件排除某些事件。在这个例子中，我们排除了所有以 ‘5’ 结尾的事件。

5. RefenaDebugObserver: 启用调试模式，帮助你更好地理解应用的内部工作原理。

运行步骤

1. 启动 Inspector 服务器
   在终端中运行以下命令启动 Inspector 服务器：

   dart run refena_inspector