public function stream() { header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); header('Connection: keep-alive'); // 建立连接后,您可以输出初始化数据到客户端 echo "event: sse_init\ndata: {}\n\n"; flush(); // 监听事宜源,并输出实时事宜 while (true) { $event = 'my_event'; // 获取要发送的事宜数据 $data = 'Hello SSE!'; // 输失事宜到客户端 echo "event: $event\ndata: $data\n\n"; flush(); // 休眠一段韶光等待下次事宜 sleep(1); }}
上述代码会不断地监听 “my_event” 事宜源,并将数据 “Hello SSE!” 输出到客户端。在每个事宜发送之间,脚本会等待一秒钟以仿照实时数据流。
也可以用thinkPHP的标准返回方法:
public function stream() { $response = new Response(); $response->header('Content-Type', 'text/event-stream'); $response->header('Cache-Control', 'no-cache'); $response->header('Connection', 'keep-alive'); // 建立连接后,您可以输出初始化数据到客户端 $response->data("event: sse_init\n"); $response->data("data: {}\n\n"); // 监听事宜源,并输出实时事宜 $count = 0; while (true) { $event = 'my_event'; // 获取要发送的事宜数据 $data = 'Hello SSE! ' . ++$count; // 输失事宜到客户端 $response->data("event: $event\n"); $response->data("data: $data\n\n"); $response->send(); // 休眠一段韶光等待下次事宜 sleep(1); }}
然后在前端用js吸收事宜流:
var source = new EventSource("<?php echo url('stream'); ?>");source.addEventListener('my_event', function(event) { console.log(event.data);});
然后就会创造,并没有期待的效果涌现,并且浏览器会报错:EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.这个问题卡了良久,PHP中已经设置了相应格式为text/event-stream,但是浏览器吸收到的仍旧是text/html格式,彷佛$response->header('Content-Type', 'text/event-stream');这句代码没有生效一样;后来经由多方调查,thinkPHP利用了数据缓冲来输出内容,这会导致有些相应格式没有生效,以是在上面的PHP代码中添加ob_end_flush();办理问题。以下是精确的PHP代码示例:
public function stream() {// 关闭输出缓冲ob_end_flush(); header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); header('Connection: keep-alive'); // 建立连接后,您可以输出初始化数据到客户端 echo "event: sse_init\ndata: {}\n\n"; flush(); // 监听事宜源,并输出实时事宜 while (true) { $event = 'my_event'; // 获取要发送的事宜数据 $data = 'Hello SSE!'; // 输失事宜到客户端 echo "event: $event\ndata: $data\n\n"; flush(); // 休眠一段韶光等待下次事宜 sleep(1); }}