HTML - サーバーから送信されるイベント

こんにちは、Web開発者志望の方々！今日は、サーバーから送信されるイベント（Server-Sent Events, SSE）の興味深い世界に飛び込みます。プログラミングが初めての方でも心配しないでください。私はこのトピックをステップバイステップでガイドします。これまでに多くの生徒を指導してきました。コーヒーを片手に、始めましょう！

HTML - Server Sent Events

サーバーから送信されるイベントとは？

コードに進む前に、サーバーから送信されるイベントとは何かを理解しましょう。オンラインでライブスポーツ試合を見ているとします。ページをリフレッシュせずに得点の更新をリアルタイムで見たいと思いませんか？それがSSEの出番です！

サーバーから送信されるイベントは、ウェブページがサーバーからの更新を自動的に受信できるようにします。まるでサーバーに直接電話線がつながっていて、サーバーがいつでもメッセージを送信できる状態です。

ウェブアプリケーションでのSSEの使用方法

概念を理解したので、ウェブアプリケーションにSSEをどのように実装するか見てみましょう。まずはクライアントサイドのコード、すなわちHTMLとJavaScriptから始めます。

ステップ1: EventSourceオブジェクトの作成

まず、JavaScriptコード内にEventSourceオブジェクトを作成します。このオブジェクトはサーバーとの接続を確立します。

<h1>ライブスポーツスコア</h1>
<div id="score"></div>

<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("score_updates.php");
source.onmessage = function(event) {
document.getElementById("score").innerHTML = event.data;
};
} else {
document.getElementById("score").innerHTML = "申し訳ありませんが、あなたのブラウザはサーバーから送信されるイベントをサポートしていません...";
}
</script>

これを分解すると：

ヘッダーとdiv要素を作成し、スコアを表示します。
スクリプト内でまずブラウザがEventSourceをサポートしているか確認します。
サポートしている場合、新しいEventSourceオブジェクトを作成し、サーバーサイドスクリプトのURLを指定します。
onmessageイベントハンドラを設定し、サーバーからのメッセージ受信時に呼び出されます。
ファンクション内で「score」divの内容をサーバーから受信したデータで更新します。
ブラウザがSSEをサポートしていない場合、ユーザーにその旨を通知するメッセージを表示します。

サーバーサイドスクリプトの設定

次に、サーバーサイドスクリプトがイベントを送信する方法を見てみましょう。この例ではPHPを使用しますが、他のサーバーサイド言語でも同様の概念が適用できます。

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

function sendUpdate($score) {
echo "data: $score\n\n";
ob_flush();
flush();
}

$score = 0;
while (true) {
$score++;
sendUpdate("Current Score: $score");
sleep(5);  // 次の更新まで5秒待機
}
?>

このスクリプトを分析すると：

SSEに適したヘッダーを設定します。
データを送信するためのsendUpdate関数を定義します。
無限ループを開始します（実際のアプリケーションでは停止条件を設定します）。
各イテレーションでスコアをインクリメントし、更新を送信します。
次の更新まで5秒待機します。

サーバーから送信されるイベントの処理

クライアントサイドとサーバーサイドのコードが揃ったので、異なるタイプのイベントをどのように処理するか見てみましょう。

<h1>ライブスポーツアップデート</h1>
<div id="score"></div>
<div id="commentary"></div>

<script>
var source = new EventSource("sports_updates.php");

source.addEventListener('score', function(e) {
document.getElementById('score').innerHTML = e.data;
}, false);

source.addEventListener('commentary', function(e) {
document.getElementById('commentary').innerHTML = e.data;
}, false);

source.onerror = function(e) {
console.log("エラー: " + e);
};
</script>

この例では：

スコアと解説の2つのdiv要素を作成します。
「score」と「commentary」の2つのイベントリスナーを設定します。
各イベントは異なる要素を更新します。
エラーハンドラを追加し、エラーをログに記録します。

対応するサーバーサイドスクリプトは以下のようになります：

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

function sendEvent($event, $data) {
echo "event: $event\n";
echo "data: $data\n\n";
ob_flush();
flush();
}

$score = 0;
$commentary = ["素晴らしいセーブ！", "接近したシュート！", "イエローカード！"];

while (true) {
$score++;
sendEvent('score', "Current Score: $score");

if ($score % 3 == 0) {
$randomComment = $commentary[array_rand($commentary)];
sendEvent('commentary', $randomComment);
}

sleep(5);
}
?>

このスクリプトは、5秒ごとに「score」イベントを送信し、スコアが3の倍数のときに「commentary」イベントを送信します。

メソッドの概要

以下に、使用した主要なメソッドをまとめた表を示します：

メソッド	説明
`new EventSource(url)`	サーバーとの新しい接続を作成します
`EventSource.onmessage`	特定のイベント名なしでメッセージを処理します
`EventSource.addEventListener(event, callback)`	特定のイベント名のメッセージを処理します
`EventSource.onerror`	接続のエラーを処理します

結論

以上で、サーバーから送信されるイベントの基本をカバーしました。SSEはリアルタイムウェブアプリケーションを作成するための強力なツールですが、一方通行の通信です。双方向通信が必要な場合は、将来的にWebSocketを検討してみてください。

どのプログラミング概念も、実際にやることで学ぶのが一番です。自分でSSEアプリケーションを作ってみてください。もしかしたら、ライブチャットシステムや株価表示システムなど、無限の可能性があります！

未来のWeb開発者たち、ハッピーコーディングを！すべての専門家もかつては初心者でした。すぐに理解がいかない場合はがっかりしないでください。続けて練習を続けると、すぐにプロになるでしょう！

Credits: Image by storyset