PHP
Server-Sent-Events

Server Sent Events最小限のサンプル(PHP)

More than 1 year has passed since last update.

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.confserver {} の中で

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はほぼ大丈夫。
Anrdoidは4.4から。
IEは11でもダメ。