index.htmlから呼ばれるPHPの実装：
api.php
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
while (1) {
echo 'data: Hello from server! ' . date('Y-m-d H:i:s'), "\n\n";
ob_flush();
flush();
sleep(1);
}
index.htmlの実装：
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>index.html</title>
</head>
<body>
<ul id="eventList">
</ul>
<script>
var es = new EventSource('api.php');
es.addEventListener('message', function (event) {
console.log(event.data);
var newElement = document.createElement("li");
var eventList = document.getElementById('eventList');
newElement.innerHTML = "message: " + event.data;
eventList.appendChild(newElement);
});
</script>
</body>
</html>
- Apache
- PHP（Apacheモジュール）
- Chrome 43
の環境では特に問題なくできた。
nginx + php-fpmの場合
nginx + php-fpmの場合、普通にしてるとサーバでバッファリングされてしまうので
nginx.conf の server {} の中で
fastcgi_keep_conn on; # < solution
proxy_buffering off;
gzip off;
とすればいい。
http://serverfault.com/questions/488767/how-do-i-enable-php-s-flush-with-nginxphp-fpm
によると
header('Content-Encoding: none;');
でもいいと書いてあったが、自分の環境ではうまくいかなかった。
ブラウザ実装状況
http://caniuse.com/#feat=eventsource
Firefox、Chromeはほぼ大丈夫。
Androidは4.4から。
IEは11でもダメ。