Flutter服务器发送事件（SSE）插件dart_sse的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter服务器发送事件（SSE）插件dart_sse的使用

dart_sse 是一个帮助消费服务端发送事件（SSE）的 Dart 包。

该包是从 pratikbaid3/flutter_client_sse 分支创建的。

特性

  • 消费服务端发送的事件。
  • 返回解析后的事件模型，包括 id 和 data。

开始使用

GET 请求
// GET REQUEST

final SSEClient getClient = SSEClient(
  authenticate: (request) async {
    request.headers['Cookie'] =
        'jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InRlc3QiLCJpYXQiOjE2NDMyMTAyMzEsImV4cCI6MTY0MzgxNTAzMX0.U0aCAM2fKE1OVnGFbgAU_UVBvNwOMMquvPY8QaLD138; Path=/; Expires=Wed, 02 Feb 2022 15:17:11 GMT; HttpOnly; SameSite=Strict';
    return request;
  },
);

getClient.listen(
  (event) {
    print('Id: ${event.id ?? ''}');
    print('Event: ${event.event ?? ''}');
    print('Data: ${event.data ?? ''}');
  },
);

getClient.subscribeToSSE(
  method: SSERequestType.get,
  url: 'http://localhost:12000/sse',
  headers: {
    'Accept': 'text/event-stream',
    'Cache-Control': 'no-cache',
  },
);
POST 请求
/// POST REQUEST
final SSEClient postClient = SSEClient(
  authenticate: (request) async {
    request.headers['Cookie'] =
        'jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InRlc3QiLCJpYXQiOjE2NDMyMTAyMzEsImV4cCI6MTY0MzgxNTAzMX0.U0aCAM2fKE1OVnGFbgAU_UVBvNwOMMquvPY8QaLD138; Path=/; Expires=Wed, 02 Feb 2022 15:17:11 GMT; HttpOnly; SameSite=Strict';
    return request;
  },
);

postClient.subscribeToSSE(
  method: SSERequestType.post,
  url:
      'http://localhost:12000/api/activity-stream?historySnapshot=FIVE_MINUTE',
  headers: {
    'Accept': 'text/event-stream',
    'Cache-Control': 'no-cache',
  },
  body: {
    'name': 'Hello',
    'customerInfo': {'age': 25, 'height': 168},
  },
).listen(
  (event) {
    print('Id: ${event.id!}');
    print('Event: ${event.event!}');
    print('Data: ${event.data!}');
  },
);
认证

SSEClient 可以通过 authenticate 方法进行配置。该方法允许在发送请求前修改 HTTP 请求。

此回调函数会在每次请求前被调用，即使是在重试时也是如此。如果抛出错误，则会再次调用 authenticate。如果遇到与刷新令牌相关的错误，可以在重新连接到 SSE 之前更新令牌。

运行示例后端

后端使用 NestJS 实现，提供一个单一的 SSE API。

安装
$ yarn install
运行应用
# 开发模式
$ yarn run start

# 监视模式
$ yarn run start:dev
运行示例
dart run example/main.dart

示例代码

// ignore_for_file: avoid_print

import 'package:dart_sse/dart_sse.dart';

void main() {
  // GET REQUEST

  final SSEClient getClient = SSEClient(
    authenticate: (request) async {
      request.headers['Cookie'] =
          'jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InRlc3QiLCJpYXQiOjE2NDMyMTAyMzEsImV4cCI6MTY0MzgxNTAzMX0.U0aCAM2fKE1OVnGFbgAU_UVBvNwOMMquvPY8QaLD138; Path=/; Expires=Wed, 02 Feb 2022 15:17:11 GMT; HttpOnly; SameSite=Strict';
      return request;
    },
  );

  getClient.listen(
    (event) {
      print('Id: ${event.id ?? ''}');
      print('Event: ${event.event ?? ''}');
      print('Data: ${event.data ?? ''}');
    },
  );

  getClient.subscribeToSSE(
    method: SSERequestType.get,
    url: 'http://localhost:12000/sse',
    headers: {
      'Accept': 'text/event-stream',
      'Cache-Control': 'no-cache',
    },
  );

  /// POST REQUEST
  final SSEClient postClient = SSEClient(
    authenticate: (request) async {
      request.headers['Cookie'] =
          'jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InRlc3QiLCJpYXQiOjE2NDMyMTAyMzEsImV4cCI6MTY0MzgxNTAzMX0.U0aCAM2fKE1OVnGFbgAU_UVBvNwOMMquvPY8QaLD138; Path=/; Expires=Wed, 02 Feb 2022 15:17:11 GMT; HttpOnly; SameSite=Strict';
      return request;
    },
  );

  postClient.subscribeToSSE(
    method: SSERequestType.post,
    url:
        'http://localhost:12000/api/activity-stream?historySnapshot=FIVE_MINUTE',
    headers: {
      'Accept': 'text/event-stream',
      'Cache-Control': 'no-cache',
    },
    body: {
      'name': 'Hello',
      'customerInfo': {'age': 25, 'height': 168},
    },
  ).listen(
    (event) {
      print('Id: ${event.id!}');
      print('Event: ${event.event!}');
      print('Data: ${event.data!}');
    },
  );
}

更多关于Flutter服务器发送事件（SSE）插件dart_sse的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter服务器发送事件（SSE）插件dart_sse的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中使用dart_sse插件来实现服务器发送事件（SSE）的示例代码。dart_sse插件允许Flutter应用通过SSE从服务器接收实时数据。

首先，确保你已经在pubspec.yaml文件中添加了dart_sse依赖：

dependencies:
  flutter:
    sdk: flutter
  dart_sse: ^x.y.z  # 请替换为最新的版本号

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

接下来是一个简单的示例，展示如何使用dart_sse连接到SSE服务器并处理接收到的事件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SSEExample(),
    );
  }
}

class SSEExample extends StatefulWidget {
  @override
  _SSEExampleState createState() => _SSEExampleState();
}

class _SSEExampleState extends State<SSEExample> {
  EventSource? _eventSource;
  List<String> _events = [];

  @override
  void initState() {
    super.initState();
    // 连接到SSE服务器
    _eventSource = EventSource(
      'https://example.com/sse-endpoint',  // 请替换为你的SSE服务器URL
      onOpen: (EventSource eventSource) {
        print('Connection opened');
      },
      onMessage: (MessageEvent messageEvent) {
        setState(() {
          _events.add(messageEvent.data);
        });
        print('Received message: ${messageEvent.data}');
      },
      onError: (EventSourceErrorEvent errorEvent) {
        print('Error: ${errorEvent.error}');
      },
      onClose: (CloseEvent closeEvent) {
        print('Connection closed');
      },
    );
  }

  @override
  void dispose() {
    // 关闭连接
    _eventSource?.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SSE Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Received Events:', style: TextStyle(fontSize: 20)),
            SizedBox(height: 16),
            Expanded(
              child: ListView.builder(
                itemCount: _events.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(_events[index]),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个Flutter应用，并在MyApp类中设置了主页面SSEExample。
  2. 在SSEExample类的_SSEExampleState中，我们在initState方法中初始化了一个EventSource实例，连接到指定的SSE服务器URL。
  3. 我们定义了四个回调函数来处理SSE连接的不同事件：onOpen、onMessage、onError和onClose。
  4. 当接收到消息时，我们更新UI以显示接收到的事件。
  5. 在dispose方法中，我们关闭SSE连接以释放资源。

请确保将https://example.com/sse-endpoint替换为你的实际SSE服务器URL。

这个示例展示了如何使用dart_sse插件在Flutter应用中实现SSE功能，并实时处理从服务器接收到的事件。

回到顶部