Flutter数据同步插件angel3_sync的使用

Flutter数据同步插件angel3_sync的使用

angel3_sync

版本 空安全 Discord 许可证

使用belatuk_pub_sub轻松同步和扩展WebSockets。

使用方法

该包提供了PubSubSynchronizationChannel，可以直接插入到任何AngelWebSocket构造函数中。一旦设置好，应用程序实例将自动同步事件。这是使用Angel3扩展实时应用所需做的所有事情！

await app.configure(AngelWebSocket(
    synchronizationChannel: PubSubSynchronizationChannel(
        pub_sub.IsolateClient('<client-id>', adapter.receivePort.sendPort),
    ),
));

完整示例

以下是一个完整的示例，展示了如何使用angel3_sync插件来实现数据同步。

示例代码

import 'dart:isolate';
import 'package:angel3_framework/angel3_framework.dart';
import 'package:angel3_framework/http.dart';
import 'package:angel3_sync/angel3_sync.dart';
import 'package:angel3_test/angel3_test.dart';
import 'package:angel3_websocket/io.dart' as client;
import 'package:angel3_websocket/server.dart';
import 'package:belatuk_pub_sub/isolate.dart' as pub_sub;
import 'package:belatuk_pub_sub/belatuk_pub_sub.dart' as pub_sub;
import 'package:test/test.dart';

void main() {
  late Angel app1, app2;
  late TestClient app1Client;
  late client.WebSockets app2Client;
  late pub_sub.Server server;
  late ReceivePort app1Port, app2Port;

  setUp(() async {
    var adapter = pub_sub.IsolateAdapter();

    server = pub_sub.Server([
      adapter,
    ])
      ..registerClient(const pub_sub.ClientInfo('angel_sync1'))
      ..registerClient(const pub_sub.ClientInfo('angel_sync2'))
      ..start();

    app1 = Angel();
    app2 = Angel();

    app1.post('/message', (req, res) async {
      // 手动广播。即使app1没有客户端，它也应该传播到app2。
      var ws = req.container!.make<AngelWebSocket>();

      //var body = await req.parseBody();
      var body = {};
      await ws.batchEvent(WebSocketEvent(
        eventName: 'message',
        data: body['message'],
      ));
      return 'Sent: ${body['message']}';
    });

    app1Port = ReceivePort();
    var ws1 = AngelWebSocket(
      app1,
      synchronizationChannel: PubSubSynchronizationChannel(
        pub_sub.IsolateClient('angel_sync1', adapter.receivePort.sendPort),
      ),
    );
    await app1.configure(ws1.configureServer);
    app1.get('/ws', ws1.handleRequest);
    app1Client = await connectTo(app1);

    app2Port = ReceivePort();
    var ws2 = AngelWebSocket(
      app2,
      synchronizationChannel: PubSubSynchronizationChannel(
        pub_sub.IsolateClient('angel_sync2', adapter.receivePort.sendPort),
      ),
    );
    await app2.configure(ws2.configureServer);
    app2.get('/ws', ws2.handleRequest);

    var http = AngelHttp(app2);
    await http.startServer();
    var wsPath =
        http.uri.replace(scheme: 'ws', path: '/ws').removeFragment().toString();
    print(wsPath);
    app2Client = client.WebSockets(wsPath);
    await app2Client.connect();
  });

  tearDown(() {
    server.close();
    app1Port.close();
    app2Port.close();
    app1.close();
    app2.close();
    app1Client.close();
    app2Client.close();
  });

  test('events propagate', () async {
    // 这个测试的目的是展示app1和app2都不知道对方的存在。
    //
    // 不管怎样，app1广播的WebSocket事件也会被app2广播。

    var stream = app2Client.on['message'];
    var response = await app1Client
        .post(Uri.parse('/message'), body: {'message': 'Hello, world!'});
    print('app1 response: ${response.body}');

    var msg = await stream.first.timeout(const Duration(seconds: 5));
    print('app2 got message: ${msg.data}');
  });
}

更多关于Flutter数据同步插件angel3_sync的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然，下面是一个关于如何使用Flutter数据同步插件angel3_sync的代码案例。angel3_sync 是一个用于Flutter应用的实时数据同步库，通常与Angel框架的后端服务一起使用。以下是一个简单的示例，展示了如何设置和使用angel3_sync进行数据同步。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加angel3_sync及其相关依赖：

dependencies:
  flutter:
    sdk: flutter
  angel3_framework: ^4.0.0
  angel3_sync: ^1.0.0
  # 其他依赖...

2. 设置Angel服务器（后端）

在后端设置Angel服务器并启用同步服务。以下是一个简单的Angel服务器示例：

import 'package:angel3_framework/angel3_framework.dart';
import 'package:angel3_sync/angel3_sync.dart';

void main() async {
  var app = Angel();

  // 启用同步服务
  var syncService = SyncService();
  app.use('/sync', syncService.handler);

  // 假设我们有一个简单的内存存储
  var store = Map<String, dynamic>.from({
    'key1': 'value1',
    'key2': 'value2',
  });

  // 处理同步事件
  syncService.on('update', (event) async {
    var data = event.data;
    store[data['key']] = data['value'];
    print('Updated store: $store');
  });

  // 启动服务器
  await app.listen(port: 3000);
  print('Server listening on http://localhost:3000');
}

3. Flutter客户端设置

在Flutter客户端，使用angel3_sync_client来连接到Angel服务器并进行数据同步。

首先，在pubspec.yaml中添加angel3_sync_client依赖：

dependencies:
  flutter:
    sdk: flutter
  angel3_sync_client: ^1.0.0
  # 其他依赖...

然后，在Flutter应用中设置同步客户端：

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

void main() {
  runApp(MyApp());
}

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

class _MyAppState extends State<MyApp> {
  late SyncClient syncClient;

  @override
  void initState() {
    super.initState();

    // 初始化同步客户端
    syncClient = SyncClient(
      url: 'http://localhost:3000/sync',
      channels: ['update'],
    );

    // 监听同步事件
    syncClient.on('update', (event) {
      var data = event.data;
      print('Received update: $data');
      // 在这里更新UI
      setState(() {});
    });

    // 连接到服务器
    syncClient.connect();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Angel3 Sync Example'),
        ),
        body: Center(
          child: Text('Check console for sync updates'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // 发送同步事件
            syncClient.emit('update', {
              'key': 'key3',
              'value': 'value3',
            });
          },
          tooltip: 'Send Update',
          child: Icon(Icons.send),
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 断开连接
    syncClient.disconnect();
    super.dispose();
  }
}

总结

以上代码展示了如何使用angel3_sync在Flutter应用中实现数据同步。后端Angel服务器处理同步事件并更新内存存储，而Flutter客户端则连接到服务器，监听同步事件并发送更新。

请注意，这只是一个简单的示例。在实际应用中，你可能需要处理更复杂的数据结构、持久化存储以及错误处理等。

回到顶部