HTML - 伺服器發送事件

你好，有志於網頁開發的各位！今天，我們將要深入探索伺服器發送事件（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 元素，我們將在其中顯示比分。
在 script 中，我們首先檢查瀏覽器是否支持 EventSource。
如果支持，我們創建一個新的 EventSource 物件，指定我們伺服器端腚本的 URL。
然後我們設置一個 onmessage 事件處理程序。這個函數將在我們從伺服器收到訊息時被調用。
在函數內部，我們更新 "score" div 的內容，以顯示從伺服器接收到的數據。
如果瀏覽器不支持 SSE，我們顯示一條訊息，通知用戶。

伺服器端腚本對 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>

在這個例子中：

我們創建了兩個 div 元素，一個用於比分，一個用於評論。
我們為兩種類型的事件設置事件監聽器：'score' 和 'commentary'。
每個事件更新頁面上不同的元素。
我們還添加了一個錯誤處理程序來記錄任何錯誤。

對應的伺服器端腚本可能會像這樣：

<?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 = ["Great save!", "Close shot!", "Yellow card!"];

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 是創建實時網頁應用程序的強大工具，但它只是單向通訊。如果你需要雙向通訊，將來你可能想研究 WebSockets。

與任何編程概念一樣，最好的學習方式是實踐。嘗試創建你自己的 SSE 應用程序 - 也許是一個即時聊天系統或股票行情系統。可能性無限！

快樂編程，未來的網頁開發者！記住，每個專家都曾經是新手，所以如果事情不立即明朗，不要氣餒。持續練習，你很快就會變成專家！

Credits: Image by storyset