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は、チャットアプリケーションやリアルタイムダッシュボードなど、多くのユースケースで非常に有用です。