Flutter Web 中如何接收服务器发送的事件（SSE）？

Question

我尝试了几种不同的 SSE 插件来接收 Flutter Web 应用程序中服务器发送的事件，所有这些插件都可以连接，但我在 Flutter 中没有收到任何事件。但是，如果我在 Chrome 中打开 DevTools 并转到 Network -> EventStream，我会看到来自服务器的事件。我在应用程序中没有收到它们的原因可能是什么？

我尝试过sse，sse_client和eventsource，但结果都是一样的。

以下是我如何使用 sse_client 插件实现应用程序：

sseClient = SseClient.connect(Uri.parse('https://example.com/test-sse/index.php'));
print('sse connected');

sseClient.stream.listen(
    (event) {
      print('sse event: ${event.toString()}');
  },
  onError: (err){
    print('sse error');
  },
  onDone: (){
    print('sse closed');
  },
);

我得到的唯一输出是

sse connected

，然后什么也没有 - 即使事件不断出现在 DevTools Network/EventStream 选项卡中。

这是我的 PHP 测试脚本：

<?php

ob_end_clean();

set_time_limit(60);

while (true) {
    // Headers must be processed line by line.
    header('Access-Control-Allow-Origin: http://localhost:56008');
    header('Access-Control-Allow-Credentials: true');
    header('Content-Type: text/event-stream; charset=utf-8');
    header('Cache-Control: no-cache');

    $data = [
        'message' => 'Event: server-time='.date('G:H:s', time()),
        'dummy' => str_repeat(' ',1024*64)
    ];
    print("id: ".microtime()."\n");
    print("event: ping\n");
    print('data: '.json_encode($data)."\n");
    print("\n");

    ob_flush();
    flush();
    
    sleep(1);
}

我尝试删除

id

和

dummy

等，但结果是相同的 - 浏览器收到事件，但应用程序没有收到任何内容。

Answer 1

在网络上使用

fetch_client

，直到 此开放式 Flutter 问题得到解决。

sse_stream.dart

：在 Android/iOS/Mac/Windows 上获取流：

import 'package:http/http.dart';

Future<ByteStream> getStream(Request request) async {
  final client = Client();
  StreamedResponse response = await client.send(request);
  return response.stream;
}

sse_stream_web.dart

：在网络上获取流：

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

Future<ByteStream> getStream(Request request) async {
  final FetchClient fetchClient = FetchClient(mode: RequestMode.cors);
  final FetchResponse response = await fetchClient.send(request);
  return response.stream;
}

有条件进口：

import 'path/to/sse_stream.dart' if (dart.library.js) 'path/to/sse_client_web.dart';