Flutter Meteor DDP插件dart_meteor的使用

Flutter Meteor DDP插件dart_meteor的使用

简介

dart_meteor 是一个用于 Dart 和 Flutter 开发者的 Meteor DDP 库。它使得在 Flutter 应用中与 Meteor 后端建立连接变得简单，并且可以无缝地与 StreamBuilder 和 FutureBuilder 一起使用。

版本变更

• 3.0.0 版本变更

  • meteor.collection('collectionName') 的流现在在初始时返回 snapshot.hasData == true，并且包含一个空的映射。

• 2.0.0 版本变更

  • 调用 Meteor 方法和订阅时传递参数变为可选。例如：

    // 旧版本
    meteor.call('your_method_name', [param1, param2]);
    
    // 新版本
    meteor.call('your_method_name', args: [param1, param2]);
    

  • 订阅也类似：

    // 旧版本
    meteor.subscribe('your_pub', [param1, param2]);
    
    // 新版本
    meteor.subscribe('your_pub', args: [param1, param2]);
    

  • 不再需要调用 meteor.prepareCollection('your_collection_name')，可以直接通过 meteor.collection('messages').listen((value) { ... }) 访问集合。
  • 支持 DateTime 类型，可以直接传递和接收 DateTime 变量。

使用示例

1. 创建 MeteorClient 实例

首先，在应用的全局作用域中创建一个 MeteorClient 实例，以便在整个项目中使用。

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

// 创建 MeteorClient 实例
MeteorClient meteor = MeteorClient.connect(url: 'https://yourdomain.com');

void main() => runApp(MyApp());

2. 使用 StreamBuilder 构建 UI

在 StatefulWidget 或 StatelessWidget 中，可以使用 StreamBuilder 或 FutureBuilder 来根据来自 Meteor DDP 服务器的响应构建 UI。

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _methodResult = '';

  // 调用 Meteor 方法
  void _callMethod() {
    meteor.call('helloMethod').then((result) {
      setState(() {
        _methodResult = result.toString();
      });
    }).catchError((err) {
      if (err is MeteorError) {
        setState(() {
          _methodResult = err.message;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Package dart_meteor Example'),
        ),
        body: Container(
          padding: EdgeInsets.all(8.0),
          child: Column(
            children: <Widget>[
              // 显示连接状态并提供连接/断开按钮
              StreamBuilder<DdpConnectionStatus>(
                stream: meteor.status(),
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    if (snapshot.data.status == DdpConnectionStatusValues.connected) {
                      return ElevatedButton(
                        child: Text('Disconnect'),
                        onPressed: () {
                          meteor.disconnect();
                        },
                      );
                    }
                    return ElevatedButton(
                      child: Text('Connect'),
                      onPressed: () {
                        meteor.reconnect();
                      },
                    );
                  }
                  return Container();
                },
              ),
              // 显示当前连接状态
              StreamBuilder<DdpConnectionStatus>(
                stream: meteor.status(),
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return Text('Meteor Status ${snapshot.data.toString()}');
                  }
                  return Text('Meteor Status: ---');
                },
              ),
              // 用户登录/登出按钮
              StreamBuilder(
                stream: meteor.userId(),
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return ElevatedButton(
                      child: Text('Logout'),
                      onPressed: () {
                        meteor.logout();
                      },
                    );
                  }
                  return ElevatedButton(
                    child: Text('Login'),
                    onPressed: () {
                      meteor.loginWithPassword('yourusername', 'yourpassword');
                    },
                  );
                },
              ),
              // 显示当前用户信息
              StreamBuilder(
                stream: meteor.user(),
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return Text(snapshot.data.toString());
                  }
                  return Text('User: ----');
                },
              ),
              // 调用 Meteor 方法的按钮
              ElevatedButton(
                child: Text('Method Call'),
                onPressed: _callMethod,
              ),
              // 显示方法调用结果
              Text(_methodResult),
            ],
          ),
        ),
      ),
    );
  }
}

3. 调用 Meteor 方法

调用 Meteor 方法会返回一个 Future，必须处理 catchError 以防止应用程序崩溃。

meteor.call('helloMethod').then((result) {
  setState(() {
    _methodResult = result.toString();
  });
}).catchError((err) {
  if (err is MeteorError) {
    setState(() {
      _methodResult = err.message;
    });
  }
});

你也可以使用 FutureBuilder 来调用方法：

FutureBuilder<int>(
  future: meteor.call('sumMethod', args: [5, 10]),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      // 你的 snapshot.data 应该是 5 + 10 = 15
      return Text('Answer is: ${snapshot.data}');
    }
  },
),

4. 集合与订阅

你可以通过调用 meteor.collection('your_collection_name') 来访问集合。它返回一个 Stream，可以与 StreamBuilder 一起使用来监听集合的更新。

meteor.collection('your_collections');

要使集合在 Flutter 应用中可用，可以通过订阅服务器上的数据：

class YourWidget extends StatefulWidget {
  YourWidget() {}

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

class _YourWidgetState extends State<YourWidget> {
  SubscriptionHandler? _subscriptionHandler;

  @override
  void initState() {
    super.initState();
    _subscriptionHandler = meteor.subscribe('your_pub', args: ['param_1', 'param_2']);
  }

  @override
  void dispose() {
    _subscriptionHandler?.stop();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: meteor.collection('your_collection'),
      builder: (context, AsyncSnapshot<Map<String, dynamic>> snapshot) {
        int docCount = 0;
        if (snapshot.hasData) {
          docCount = snapshot.data!.length;
        }
        return Text('Total document count: $docCount');
      },
    );
  }
}

集合以 Map<String, dynamic> 的形式返回，键是文档的 _id，值是整个文档。

例如：

{
  "DGbsysgxzSf7Cr8Jg": {
    "_id": "DGbsysgxzSf7Cr8Jg", 
    "field1": 0, 
    "field2": "a", 
    "field3": true, 
    "field4": SomeDate
  }
}

5. 直接访问最新数据

如果你不想通过流来访问数据，可以直接使用 meteor.collectionCurrentValue('your_collection_name')、meteor.userCurrentValue() 和 meteor.userIdCurrentValue() 来获取最新的值。

例如，通过 _id 访问文档：

// 非响应式
final id = 'DGbsysgxzSf7Cr8Jg';
final doc = meteor.collectionCurrentValue('your_collection_name')[id];
if (doc != null) {
  // do something
}

// 非响应式
final userId = 'Sf7Cr8JgDGbsysgxz';
final user = meteor.collectionCurrentValue('users')[userId];
if (user != null) {
  // do something
}