Flutter Mercure 客户端插件 mercure_client 的使用

功能介绍

mercure_client 插件为 Flutter 应用提供了一种快速消费 Mercure 消息的方式。通过该插件，开发者可以轻松地订阅和接收来自 Mercure Hub 的实时更新。

消费消息

以下是如何使用 mercure_client 插件来消费消息的示例代码：

示例代码

首先，确保在 pubspec.yaml 文件中添加了 mercure_client 依赖项：

dependencies:
  flutter:
    sdk: flutter
  mercure_client: ^latest_version # 替换为最新版本号

然后，在 Dart 文件中导入并使用 mercure_client：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Mercure Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MercureHomePage(),
    );
  }
}

class MercureHomePage extends StatefulWidget {
  @override
  _MercureHomePageState createState() => _MercureHomePageState();
}

class _MercureHomePageState extends State<MercureHomePage> {
  final TextEditingController _topicController = TextEditingController(text: '/books/{id}');
  final TextEditingController _tokenController = TextEditingController(text: 'your_jwt_token');
  final TextEditingController _urlController = TextEditingController(text: 'http://example.com/.well-known/mercure');
  final TextEditingController _lastEventIdController = TextEditingController(text: 'last_event_id');

  late Mercure _mercure;
  String _receivedMessage = '';

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

  void _initMercure() {
    _mercure = Mercure(
      url: _urlController.text, // your mercure hub url
      topics: [_topicController.text], // your mercure topics
      token: _tokenController.text, // Bearer authorization
      lastEventId: _lastEventIdController.text, // in case your stored last received event
    );

    final subscription = _mercure.listen((event) {
      setState(() {
        _receivedMessage = event.data;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Mercure Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            TextField(
              controller: _urlController,
              decoration: InputDecoration(labelText: 'Mercure Hub URL'),
            ),
            TextField(
              controller: _topicController,
              decoration: InputDecoration(labelText: 'Topic'),
            ),
            TextField(
              controller: _tokenController,
              decoration: InputDecoration(labelText: 'JWT Token'),
            ),
            TextField(
              controller: _lastEventIdController,
              decoration: InputDecoration(labelText: 'Last Event ID'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                _initMercure();
              },
              child: Text('Connect to Mercure'),
            ),
            SizedBox(height: 20),
            Text('Received Message: $_receivedMessage'),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _mercure.dispose(); // Ensure to close the subscription when the widget is disposed
    super.dispose();
  }
}

说明

• 连接到 Mercure Hub：用户可以通过输入 Mercure Hub URL、主题（topic）、JWT Token 和最后事件 ID 来初始化 Mercure 客户端。
• 监听消息：一旦连接成功，应用将开始监听来自 Mercure Hub 的消息，并在接收到新消息时更新 UI。
• 断开连接：当组件销毁时，确保调用 _mercure.dispose() 来关闭订阅，避免内存泄漏。

此示例展示了如何在 Flutter 应用中集成 mercure_client 插件，并实现与 Mercure Hub 的实时通信功能。希望这个示例能帮助你更好地理解和使用 mercure_client 插件。