PHPとJavaScriptを使用したServer-Sent Events (SSE) 通信の実装方法

概要

Server-Sent Events (SSE) は、サーバーからクライアントへの一方向の通信を確立するための技術です。SSEを使用すると、サーバーからクライアントに対してリアルタイムでデータを送信できます。WebSocketとは異なり、SSEはHTTPプロトコルを使用し、ブラウザでのサポートが広範です。このガイドでは、PHPを使用してサーバー側を実装し、JavaScriptを使用してクライアント側でSSEを受信する方法を説明します。

サーバー側（PHP）の実装

まず、PHPスクリプトを作成して、SSEストリームを生成します。以下は、サーバー側のPHPコード例です。

`sse.php`

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$counter = rand(1, 10);

while (true) {
    // 現在の時間を取得
    $curDate = date(DATE_ISO8601);
    echo "data: The server time is: {$curDate}\n\n";
    echo "data: Random number: {$counter}\n\n";
    $counter++;
    
    // バッファをフラッシュしてデータを送信
    ob_flush();
    flush();
    
    // 3秒待機
    sleep(3);
}
?>

説明

ヘッダーの設定: Content-Type を text/event-stream に設定し、Cache-Control を no-cache に設定します。
無限ループ: 無限ループを使って、クライアントに対して定期的にデータを送信します。
データの送信: echo でデータを送信し、ob_flush() と flush() を使って出力バッファをフラッシュします。
待機: sleep(3) で3秒間待機します。

クライアント側（JavaScript）の実装

次に、クライアント側でSSEストリームを受信するJavaScriptコードを作成します。

`index.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSE Example</title>
</head>
<body>
    <h1>Server-Sent Events Example</h1>
    <div id="result"></div>

    <script>
        if (!!window.EventSource) {
            var source = new EventSource('sse.php');

            source.onmessage = function(event) {
                var resultDiv = document.getElementById('result');
                resultDiv.innerHTML += event.data + '<br>';
            };

            source.onerror = function(event) {
                console.error("EventSource failed:", event);
            };
        } else {
            console.log("Your browser doesn't support SSE.");
        }
    </script>
</body>
</html>

説明

EventSourceの作成: EventSource を使ってサーバー側の sse.php に接続します。
メッセージの受信: source.onmessage を使って、サーバーから送信されるデータを受信します。
エラーハンドリング: source.onerror を使って、エラーが発生した場合にエラーメッセージを表示します。

まとめ

SSEを使用すると、サーバーからクライアントに対してリアルタイムでデータを送信することができます。PHPとJavaScriptを組み合わせることで、簡単にSSE通信を実装できます。SSEは、チャットアプリケーションやリアルタイムダッシュボードなど、多くのユースケースで非常に有用です。