Flutter如何实现SSE依赖库功能

在Flutter中如何实现SSE（Server-Sent Events）功能？有没有推荐的依赖库可以使用？具体实现步骤是什么？需要注意哪些问题？

2 回复

Flutter可通过http库或sse包实现SSE功能。使用http库时，监听StreamedResponse的stream；使用sse包则更便捷，直接创建SseClient连接服务器并监听事件流。

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


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

1. 使用 http 包实现基础SSE

import 'dart:async';
import 'dart:convert';
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);
      final stream = response.stream
          .transform(utf8.decoder)
          .transform(const LineSplitter());

      await for (final line in stream) {
        if (line.startsWith('data: ')) {
          yield line.substring(6);
        }
      }
    } finally {
      client.close();
    }
  }
}

2. 使用专门的SSE包（推荐）

在 pubspec.yaml 中添加依赖：

dependencies:
  sse: ^4.1.0

使用示例：

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

class FlutterSSEExample {
  late SSEClient _client;
  
  void connectToSSE() {
    _client = SSEClient.connect(
      'http://your-server.com/events',
      method: 'GET'
    );
    
    _client.stream.listen((data) {
      print('收到事件: $data');
      // 处理接收到的数据
    }, onError: (error) {
      print('连接错误: $error');
    });
  }
  
  void disconnect() {
    _client.close();
  }
}

3. 完整使用示例

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

class SSEPage extends StatefulWidget {
  @override
  _SSEPageState createState() => _SSEPageState();
}

class _SSEPageState extends State<SSEPage> {
  late SSEClient _sseClient;
  List<String> messages = [];

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

  void _connectSSE() {
    _sseClient = SSEClient.connect(
      'http://localhost:8080/events',
      method: 'GET'
    );

    _sseClient.stream.listen((data) {
      setState(() {
        messages.add('${DateTime.now()}: $data');
      });
    }, onError: (error) {
      print('SSE错误: $error');
    });
  }

  @override
  void dispose() {
    _sseClient.close();
    super.dispose();
  }

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

主要特点：

  • 自动重连：sse包支持自动重连机制
  • 错误处理：提供完整的错误处理回调
  • 轻量级：专门为SSE协议优化
  • 易于使用：简单的API设计

推荐使用专门的 sse 包，它提供了更好的稳定性和功能完整性。

回到顶部