Flutter SSE如何实现

在Flutter中如何实现SSE(Server-Sent Events)功能？目前需要从服务器持续接收事件流数据，但不太清楚Flutter端应该如何正确建立连接、监听消息以及处理错误。官方文档中没有找到明确的SSE实现方案，请问有推荐的Dart包或原生实现方式吗？应该如何处理连接断开重连、消息解析等常见问题？

2 回复

Flutter中实现SSE（Server-Sent Events）可使用http和dart:async库。创建StreamSubscription监听服务器事件流，通过http.get()获取响应流并解析事件。示例代码：

final client = http.Client();
final request = http.Request('GET', Uri.parse(url));
final response = await client.send(request);
response.stream
    .transform(utf8.decoder)
    .listen((data) => print('Data: $data'));

注意处理连接断开和错误重连。

更多关于Flutter SSE如何实现的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现SSE（Server-Sent Events）可以通过以下几种方式：

1. 使用 http 包实现

import 'package:http/http.dart' as http;

class SSEClient {
  static Stream<String> subscribeToSSE(String url) async* {
    final client = http.Client();
    final request = http.Request('GET', Uri.parse(url));
    request.headers['Accept'] = 'text/event-stream';
    request.headers['Cache-Control'] = 'no-cache';

    try {
      final response = await client.send(request);
      
      await for (var chunk in response.stream.transform(utf8.decoder)) {
        final lines = chunk.split('\n');
        for (final line in lines) {
          if (line.startsWith('data: ')) {
            yield line.substring(6);
          }
        }
      }
    } finally {
      client.close();
    }
  }
}

2. 使用专门的 sse 包

首先添加依赖：

dependencies:
  sse: ^4.1.0

使用示例：

import 'package:sse/client/sse_client.dart';

class FlutterSSE {
  static SSEClient? _client;
  
  static Future<void> connect(String url) async {
    _client = SSEClient.connect(Uri.parse(url));
    
    _client!.stream.listen((event) {
      print('收到事件: $event');
      // 处理接收到的数据
    });
  }
  
  static void disconnect() {
    _client?.close();
  }
}

3. 完整使用示例

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

class _SSEExampleState extends State<SSEExample> {
  StreamSubscription? _subscription;
  List<String> messages = [];

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

  void _connectToSSE() {
    _subscription = SSEClient.subscribeToSSE('http://your-server.com/events')
        .listen((data) {
      setState(() {
        messages.add(data);
      });
    }, onError: (error) {
      print('SSE连接错误: $error');
    });
  }

  @override
  void dispose() {
    _subscription?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: messages.length,
        itemBuilder: (context, index) => ListTile(
          title: Text(messages[index]),
        ),
      ),
    );
  }
}

注意事项

  1. 服务器端需要设置正确的CORS头
  2. 事件格式：服务器应返回 data: {message}\n\n 格式
  3. 错误处理：需要处理连接断开和重连逻辑
  4. 性能考虑：及时取消订阅避免内存泄漏

推荐使用专门的sse包，它提供了更好的错误处理和连接管理功能。

回到顶部