伺服器傳送事件 (SSE) 透過 HTTP 連線，從伺服器傳送自動更新至用戶端。連線建立後，伺服器就能啟動資料傳輸。
您可能會想使用 SSE 從網路應用程式傳送推播通知。SSE 會單向傳送資訊，因此您不會收到用戶端的更新。
瞭解 SSE 的概念。網頁應用程式會「訂閱」伺服器產生的更新串流，並在發生新事件時傳送通知給用戶端。不過，要真正瞭解伺服器傳送事件，我們必須瞭解其前身 AJAX 的限制。包括：
輪詢：應用程式會重複輪詢伺服器以取得資料。大多數 AJAX 應用程式都會使用這項技巧。使用 HTTP 通訊協定時，資料擷取作業需以要求和回應格式為依據。用戶端會發出要求，並等待伺服器回應資料。如果沒有可用的資料，系統會傳回空白回應。額外的輪詢會增加 HTTP 負擔。
長時間輪詢 (掛起 GET/COMET)：如果伺服器沒有可用的資料，伺服器會將要求保持開啟狀態，直到有新資料可用為止。因此，這項技術通常稱為「懸掛 GET」。取得可用資訊後，伺服器會回應並關閉連線，然後程序重複執行。因此，伺服器會持續以新資料回應。設定時，開發人員通常會使用駭客攻擊，例如將指令碼標記附加至「無限」iframe。
伺服器傳送的事件是從一開始就以高效率為設計目標。與 SSE 通訊時，伺服器可隨時將資料推送至應用程式，而無需提出初始要求。換句話說，在更新過程中，可以透過伺服器將更新串流至用戶端。SSE 會在伺服器和用戶端之間開啟單一單向管道。
伺服器發送事件與長時間輪詢的主要差異在於瀏覽器會直接處理 SSE，而使用者只需監聽訊息即可。
伺服器傳送事件與 WebSocket
為何要選擇伺服器傳送事件，而非 WebSocket？就讓我來回答您的問題！
WebSockets 提供豐富的通訊協定，可進行雙向全雙工通訊。雙向通道更適合遊戲、訊息應用程式，以及任何需要雙向即時更新的用途。
不過，有時候您只需要伺服器的單向通訊。例如，當好友更新狀態、股票代號、新聞動態或其他自動推送資料機制時。換句話說，用戶端 Web SQL 資料庫或 IndexedDB 物件儲存庫的更新。如果您需要將資料傳送至伺服器，XMLHttpRequest 一律會是您的好友。
SSE 會透過 HTTP 傳送。沒有任何特殊的通訊協定或伺服器實作方式可用於運作。WebSocket 需要全雙工連線和新的 WebSocket 伺服器來處理通訊協定。
此外，伺服器發送事件在設計上缺乏 WebSocket 所缺乏的各種功能，包括自動重新連線、事件 ID，以及傳送任意事件的功能。
使用 JavaScript 建立 EventSource
如要訂閱事件串流，請建立 EventSource 物件，並傳遞串流的網址：
const source = new EventSource('stream.php');
接下來，請為 message 事件設定處理常式。您可以選擇監聽 open 和 error：
source.addEventListener('message', (e) => {
console.log(e.data);
});
source.addEventListener('open', (e) => {
// Connection was opened.
});
source.addEventListener('error', (e) => {
if (e.readyState == EventSource.CLOSED) {
// Connection was closed.
}
});
從伺服器推送更新時，onmessage 處理常式會啟動，且 e.data 屬性中會提供新資料。其中一個魔法是，當連線關閉時，瀏覽器會在約 3 秒後自動重新連線至來源。您的伺服器實作程式甚至可以控制這個重新連線逾時時間。
就是這麼簡單！您的用戶端現在可以處理來自 stream.php 的事件。
事件串流格式
從來源傳送事件串流，就是建構純文字回應，並以符合 SSE 格式的 text/event-stream Content-Type 提供。在基本格式中，回應應包含 data: 行，後面接著您的訊息，然後再加上兩個「\n」字元來結束串流：
data: My message\n\n
多行資料
如果訊息較長，您可以使用多行 data: 分隔訊息。以 data: 開頭的兩行或多行連續文字會視為單一資料，也就是只會觸發一次 message 事件。
每行結尾都應以單一 "\n" 結尾 (最後一行除外，該行應以兩個 "\n" 結尾)。傳遞至 message 處理常式的結果，是透過換行字元連接的單一字串。例如：
data: first line\n
data: second line\n\n</pre>
這會在 e.data 中產生「first line\nsecond line」。接著，您可以使用 e.data.split('\n').join('') 重建不含「\n」字元的訊息。
傳送 JSON 資料
使用多行可讓您傳送 JSON 而不破壞語法：
data: {\n
data: "msg": "hello world",\n
data: "id": 12345\n
data: }\n\n
以及可能用於處理該串流的用戶端程式碼：
source.addEventListener('message', (e) => {
const data = JSON.parse(e.data);
console.log(data.id, data.msg);
});
將 ID 與事件建立關聯
您可以透過加入以 id: 開頭的程式碼行，透過串流事件傳送專屬 ID：
id: 12345\n
data: GOOG\n
data: 556\n\n
設定 ID 可讓瀏覽器追蹤上次觸發的事件，以便在與伺服器的連線中斷時，透過新要求設定特殊的 HTTP 標頭 (Last-Event-ID)。這可讓瀏覽器判斷適合觸發的事件。
message 事件包含 e.lastEventId 屬性。
控管重新連線逾時
瀏覽器會在每個連線關閉後大約 3 秒，嘗試重新連線至來源。您可以變更逾時時間，方法是加入以 retry: 開頭的程式碼行，後面接著等待嘗試重新連線的毫秒數。
下列範例會在 10 秒後嘗試重新連線：
retry: 10000\n
data: hello world\n\n
指定事件名稱
單一事件來源可透過加入事件名稱產生不同類型的事件。如果出現以 event: 開頭，後面接著事件專屬名稱的一行，則該事件會與該名稱相關聯。在用戶端上，您可以設定事件監聽器來監聽特定事件。
舉例來說，下列伺服器輸出會傳送三種類型的事件，分別是一般「message」事件、「userlogon」和「update」事件：
data: {"msg": "First message"}\n\n
event: userlogon\n
data: {"username": "John123"}\n\n
event: update\n
data: {"username": "John123", "emotion": "happy"}\n\n
在用戶端設定事件監聽器：
source.addEventListener('message', (e) => {
const data = JSON.parse(e.data);
console.log(data.msg);
});
source.addEventListener('userlogon', (e) => {
const data = JSON.parse(e.data);
console.log(`User login: ${data.username}`);
});
source.addEventListener('update', (e) => {
const data = JSON.parse(e.data);
console.log(`${data.username} is now ${data.emotion}`);
};
伺服器範例
以下是 PHP 中的基本伺服器實作項目：
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache'); // recommended to prevent caching of event data.
/**
* Constructs the SSE data format and flushes that data to the client.
*
* @param string $id Timestamp/id of this connection.
* @param string $msg Line of text that should be transmitted.
**/
function sendMsg($id, $msg) {
echo "id: $id" . PHP_EOL;
echo "data: $msg" . PHP_EOL;
echo PHP_EOL;
ob_flush();
flush();
}
$serverTime = time();
sendMsg($serverTime, 'server time: ' . date("h:i:s", time()));
?>
以下是使用 Express 處理常式在 Node JS 上實作的類似做法：
app.get('/events', (req, res) => {
// Send the SSE header.
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
// Sends an event to the client where the data is the current date,
// then schedules the event to happen again after 5 seconds.
const sendEvent = () => {
const data = (new Date()).toLocaleTimeString();
res.write("data: " + data + '\n\n');
setTimeout(sendEvent, 5000);
};
// Send the initial event immediately.
sendEvent();
});
sse-node.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script>
const source = new EventSource('/events');
source.onmessage = (e) => {
const content = document.createElement('div');
content.textContent = e.data;
document.body.append(content);
};
</script>
</body>
</html>
取消事件串流
通常，瀏覽器會在連線關閉時自動重新連線至事件來源，但這項行為可透過用戶端或伺服器取消。
如要取消用戶端的串流，請呼叫：
source.close();
如要取消伺服器的串流，請回應非 text/event-stream Content-Type，或傳回 200 OK 以外的 HTTP 狀態 (例如 404 Not Found)。
這兩種方法都能防止瀏覽器重新建立連線。
關於安全性
EventSource 產生的要求必須遵循與其他網路 API (例如擷取) 相同的來源政策。如果您需要從不同來源存取伺服器上的 SSE 端點，請參閱如何啟用跨來源資源共享 (CORS)。