Flutter服务器发送事件（SSE）通信插件sse_channel的使用

简介

sse_channel 是一个用于处理服务器发送事件（Server Sent Events, SSE）连接的Flutter插件。它提供了一个 StreamChannel 的包装，使得在Flutter应用中与支持SSE的服务器进行交互变得更加简单。

安装

在你的pubspec.yaml文件中添加依赖：

dependencies:
  sse_channel: ^latest_version # 替换为最新版本号

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

使用示例

基本用法

下面是一个简单的例子，展示了如何使用sse_channel来监听来自服务器的消息，并向服务器发送消息。

示例代码

import 'package:sse_channel/sse_channel.dart';
import 'dart:convert';

void main() async {
  // 连接到SSE服务器
  final channel = await SseChannel.connect(Uri.parse('http://127.0.0.1:8080/sseHandler'));

  // 监听从服务器接收到的消息
  channel.stream.listen(
    (message) {
      // 将接收到的消息转换为Map对象
      Map<String, dynamic> data = jsonDecode(message);
      print('Received message from server: ${data['message']}');
    },
    onError: (error) {
      print('Error occurred: $error');
    },
    onDone: () {
      print('Connection closed');
    },
  );

  // 向服务器发送消息
  channel.sink.add(jsonEncode({'message': 'Hello Server'}));

  // 关闭连接
  // 注意：在实际应用中，你可能需要根据业务逻辑来决定何时关闭连接
  // await channel.close();
}

创建完整的Flutter Demo

为了更好地理解sse_channel的工作方式，我们创建一个完整的Flutter应用程序示例。这个示例将包括UI部分和后台逻辑。

主文件 lib/main.dart

import 'package:flutter/material.dart';
import 'package:sse_channel/sse_channel.dart';
import 'dart:convert';

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

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

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

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

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

  Future<void> connectToSSE() async {
    channel = await SseChannel.connect(Uri.parse('http://127.0.0.1:8080/sseHandler'));

    channel.stream.listen(
      (message) {
        setState(() {
          messages.add('Received: ${jsonDecode(message)['message']}');
        });
      },
      onError: (error) {
        print('Error occurred: $error');
      },
      onDone: () {
        print('Connection closed');
      },
    );

    // 发送初始化消息给服务器
    channel.sink.add(jsonEncode({'message': 'Client connected'}));
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SSE Channel Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Expanded(
              child: ListView.builder(
                itemCount: messages.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(messages[index]),
                  );
                },
              ),
            ),
            ElevatedButton(
              onPressed: () {
                // 向服务器发送新消息
                channel.sink.add(jsonEncode({'message': 'New message from client'}));
              },
              child: Text('Send Message to Server'),
            ),
          ],
        ),
      ),
    );
  }
}

总结

通过上述代码，你可以看到如何使用sse_channel包在Flutter应用中实现与服务器的SSE通信。这不仅简化了开发过程，还提高了代码的可读性和维护性。希望这个指南对你有所帮助！

如果你有任何问题或需要进一步的帮助，请随时提问。