Flutter Web中Server-Sent Events(SSE)无法接收事件求助

核心问题分析 #

从你的代码来看，主要问题出在PHP服务端的响应头重复发送以及SSE格式细节上：

• 你在while循环内重复调用header()，但HTTP响应头只能在输出内容前发送一次，循环内的header调用会被忽略，可能导致客户端无法正确识别SSE流格式。
• 部分环境下换行符格式不统一，可能干扰SSE解析逻辑。

修正后的PHP服务端代码 #

<?php
ob_end_clean();
set_time_limit(60);

// 所有响应头仅发送一次，放在循环外部
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');
header('Connection: keep-alive'); // 维持长连接的必要头

while (true) {
    $data = [
        'message' => 'Event: server-time='.date('G:H:s', time()),
        'dummy' => str_repeat(' ', 1024*64)
    ];
    
    // 使用明确的\n换行，避免环境差异导致的格式错误
    echo "id: " . microtime() . "\n";
    echo "event: ping\n";
    echo 'data: ' . json_encode($data) . "\n";
    echo "\n"; // SSE事件结束的必须标记

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

Flutter Web端注意事项 #

1. 插件兼容性与事件监听：部分SSE插件在Web端封装了浏览器原生EventSource，如果服务端指定了事件名称ping，可尝试对应插件的事件过滤监听（不同插件API有差异，需参考文档），基础监听代码可保留原逻辑，同时补充错误信息的具体打印：

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: $err'); // 打印具体错误信息排查
  },
  onDone: (){
    print('sse closed');
  },
);

2. 跨域配置校验：确保Access-Control-Allow-Origin与前端运行地址完全匹配（包括端口），避免潜在的跨域拦截。
3. 清除浏览器缓存：强制刷新页面（Ctrl+F5），避免旧缓存干扰SSE流解析。

内容的提问来源于stack exchange，提问作者Magnus