核心要點(diǎn)

• 服務(wù)器發(fā)送事件 (SSE) 使服務(wù)器能夠隨時向?yàn)g覽器推送數(shù)據(jù)，從而實(shí)現(xiàn)諸如實(shí)時新聞快報、天氣預(yù)報和股票價格等功能。瀏覽器發(fā)出初始請求以建立連接，服務(wù)器保持連接打開以發(fā)送文本消息。
• SSE 比 WebSockets 更簡單，使用標(biāo)準(zhǔn) HTTP，支持單向通信，並提供自動重新連接。服務(wù)器可以隨時終止 SSE 響應(yīng)，但如果連接中斷，瀏覽器會自動嘗試重新連接。
• 服務(wù)器可以提供任意數(shù)量的 SSE 通道 URL 或單個端點(diǎn) URL。來自服務(wù)器的消息可以具有關(guān)聯(lián)的事件，以識別特定類型的信息。服務(wù)器還可以數(shù)據(jù)行後發(fā)送 ID，以便在連接斷開時重新發(fā)送任何錯過的消息。
• 瀏覽器可以使用 EventSource 對象的 .close() 方法終止 SSE 通信。服務(wù)器可以通過觸發(fā) res.end() 或發(fā)送重試延遲來終止連接，然後在同一瀏覽器嘗試重新連接時返回 HTTP 狀態(tài) 204。只有瀏覽器可以通過創(chuàng)建新的 EventSource 對象來重新建立連接。

本文將探討如何使用服務(wù)器發(fā)送事件 (SSE) 使客戶端能夠通過 HTTP 連接接收來自服務(wù)器的自動更新。我們還將探討其用途，並展示如何使用 Node.js 使用服務(wù)器發(fā)送事件的實(shí)際演示。

• 服務(wù)器發(fā)送事件的優(yōu)勢
• 服務(wù)器發(fā)送事件快速入門
  • 重要提示
• 高級服務(wù)器發(fā)送事件
  • 單個與多個 SSE 通道
  • 在單個通道上發(fā)送不同的數(shù)據(jù)
  • 使用數(shù)據(jù)標(biāo)識符
  • 指定重試延遲
  • 其他事件處理程序
  • 終止 SSE 通信
• 結(jié)論

服務(wù)器發(fā)送事件的優(yōu)勢

Web 基於請求-響應(yīng) HTTP 消息。您的瀏覽器發(fā)出 URL 請求，服務(wù)器返回數(shù)據(jù)。這可能會導(dǎo)致瀏覽器對圖像、CSS、JavaScript 等發(fā)出更多請求，服務(wù)器做出響應(yīng)。服務(wù)器無法主動向?yàn)g覽器發(fā)送消息，那麼它如何指示數(shù)據(jù)已更改？幸運(yùn)的是，您可以使用服務(wù)器發(fā)送事件 (SSE) 添加諸如實(shí)時新聞快報、天氣預(yù)報和股票價格等功能。

使用標(biāo)準(zhǔn) Web 技術(shù)實(shí)現(xiàn)實(shí)時數(shù)據(jù)更新一直是可能的：

• 20 世紀(jì) 90 年代的 Web 使用全頁或框架/iframe 刷新。
• 2000 年代的 Web 引入了 Ajax，它可以使用長輪詢來請求數(shù)據(jù)並使用新信息更新相應(yīng)的 DOM 元素。

這兩個選項都不是理想的，因?yàn)闉g覽器必須觸髮刷新。如果它過於頻繁地發(fā)出請求，則不會有任何數(shù)據(jù)更改，因此瀏覽器和服務(wù)器都會執(zhí)行不必要的工作。如果它請求太慢，它可能會錯過重要的更新，而您正在關(guān)注的股票價格已經(jīng)暴跌！

服務(wù)器發(fā)送事件 (SSE) 允許服務(wù)器隨時向?yàn)g覽器推送數(shù)據(jù)：

• 瀏覽器仍然發(fā)出初始請求以建立連接。
• 服務(wù)器返回事件流響應(yīng)並保持連接打開。
• 服務(wù)器可以在任何時候使用此連接發(fā)送文本消息。
• 傳入的數(shù)據(jù)會在瀏覽器中引發(fā) JavaScript 事件。事件處理程序函數(shù)可以解析數(shù)據(jù)並更新 DOM。

本質(zhì)上，SSE 是一個無限的數(shù)據(jù)流?？梢詫⑵湟暈橄螺d一個無限大的文件，該文件以您可以攔截和讀取的小塊的形式下載。

SSE 最初於 2006 年實(shí)施，所有主要瀏覽器都支持該標(biāo)準(zhǔn)。它可能不如 WebSockets 廣為人知，但服務(wù)器發(fā)送事件更簡單，使用標(biāo)準(zhǔn) HTTP，支持單向通信，並提供自動重新連接。本教程提供了無需第三方模塊的示例 Node.js 代碼，但 SSE 可用於其他服務(wù)器端語言，包括 PHP。

服務(wù)器發(fā)送事件快速入門

以下演示實(shí)現(xiàn)了一個 Node.js Web 服務(wù)器，該服務(wù)器以至少每三秒一次的隨機(jī)間隔輸出 1 到 1000 之間的隨機(jī)數(shù)。

您可以在這裡找到我們的 Node.js SSE 演示。

該代碼使用標(biāo)準(zhǔn) Node.js http 和 url 模塊來創(chuàng)建 Web 服務(wù)器和解析 URL：

import http from "node:http";
import url from "node:url";

服務(wù)器檢查傳入的 URL 請求，並在遇到 /random 路徑時做出反應(yīng)：

const port = 8000;

http.createServer(async (req, res) => {

  // 獲取 URI 路徑
  const uri = url.parse(req.url).pathname;

  // 返回響應(yīng)
  switch (uri) {
    case "/random":
      sseStart(res);
      sseRandom(res);
      break;
  }

}).listen(port);

console.log(`server running: http://localhost:${port}\n\n`);

它最初會使用 SSE HTTP 事件流標(biāo)頭進(jìn)行響應(yīng)：

// SSE 頭
function sseStart(res) {
  res.writeHead(200, {
    Content-Type: "text/event-stream",
    Cache-Control: "no-cache",
    Connection: "keep-alive"
  });
}

另一個函數(shù)隨後發(fā)送一個隨機(jī)數(shù)，並在隨機(jī)間隔過去後調(diào)用自身：

// SSE 隨機(jī)數(shù)
function sseRandom(res) {
  res.write("data: " + (Math.floor(Math.random() * 1000) + 1) + "\n\n");
  setTimeout(() => sseRandom(res), Math.random() * 3000);
}

如果您在本地運(yùn)行代碼，則可以使用終端中的 cURL 測試響應(yīng)：

$> curl -H Accept:text/event-stream http://localhost:8000/random
data: 481

data: 127

data: 975

按 Ctrl | Cmd 和 C 終止請求。

瀏覽器的客戶端 JavaScript 使用 EventSource 對象構(gòu)造函數(shù)連接到 /random URI：

// 客戶端 JS
const source = new EventSource("/random");

傳入的數(shù)據(jù)會觸發(fā)消息事件處理程序，其中 data: 後面的字符串在事件對象的 .data 屬性中可用：

source.addEventListener('message', e => {
  console.log('RECEIVED', e.data);
});

重要提示

• 與 Fetch() 一樣，瀏覽器會發(fā)出標(biāo)準(zhǔn) HTTP 請求，因此您可能需要處理 CSP、CORS，並可以選擇向 EventSource 構(gòu)造函數(shù)傳遞第二個 { withCredentials: true } 參數(shù)以發(fā)送 Cookie。
• 服務(wù)器必須為每個連接的用戶保留單獨(dú)的 res 響應(yīng)對象才能向其發(fā)送數(shù)據(jù)。這在上面的代碼中通過將值傳遞到閉包以進(jìn)行下一次調(diào)用來實(shí)現(xiàn)。
• 消息數(shù)據(jù)只能是格式為 data: nn 的字符串（可能是 JSON）。終止回車符至關(guān)重要。
• 服務(wù)器可以使用 res.end() 隨時終止 SSE 響應(yīng)，但是……
• 連接中斷時，瀏覽器會自動嘗試重新連接；無需編寫您自己的重新連接代碼。

高級服務(wù)器發(fā)送事件

SSE 不需要比上面顯示的更多代碼，但以下部分將討論其他選項。

單個與多個 SSE 通道

服務(wù)器可以提供任意數(shù)量的 SSE 通道 URL。例如：

• /latest/news
• /latest/weather
• /latest/stockprice

如果單個頁面顯示一個主題，這可能是實(shí)用的，但如果單個頁面顯示新聞、天氣和股票價格，則並非如此。在這種情況下，服務(wù)器必須為每個用戶維護(hù)三個連接，這可能會隨著流量的增加而導(dǎo)致內(nèi)存問題。

另一種選擇是提供單個端點(diǎn) URL，例如 /latest，它在一個通信通道上發(fā)送任何數(shù)據(jù)類型。瀏覽器可以在 URL 查詢字符串中指示感興趣的主題，例如 /latest?type=news,weather,stockprice，以便服務(wù)器可以將 SSE 響應(yīng)限制為特定消息。

在單個通道上發(fā)送不同的數(shù)據(jù)

來自服務(wù)器的消息可以具有關(guān)聯(lián)的 event:，它在 data: 行上方傳遞，以識別特定類型的信息：

import http from "node:http";
import url from "node:url";

這些不會觸發(fā)客戶端的“message”事件處理程序。您必須為每種類型的事件添加處理程序。例如：

const port = 8000;

http.createServer(async (req, res) => {

  // 獲取 URI 路徑
  const uri = url.parse(req.url).pathname;

  // 返回響應(yīng)
  switch (uri) {
    case "/random":
      sseStart(res);
      sseRandom(res);
      break;
  }

}).listen(port);

console.log(`server running: http://localhost:${port}\n\n`);

使用數(shù)據(jù)標(biāo)識符

服務(wù)器還可以選擇在 data: 行之後發(fā)送 id:：

// SSE 頭
function sseStart(res) {
  res.writeHead(200, {
    Content-Type: "text/event-stream",
    Cache-Control: "no-cache",
    Connection: "keep-alive"
  });
}

如果連接斷開，瀏覽器會在 Last-Event-ID HTTP 標(biāo)頭中將最後一個 ID 發(fā)送回服務(wù)器，以便服務(wù)器可以重新發(fā)送任何錯過的消息。

最新的 ID 也可在客戶端的事件對象的 .lastEventId 屬性中獲得：

// SSE 隨機(jī)數(shù)
function sseRandom(res) {
  res.write("data: " + (Math.floor(Math.random() * 1000) + 1) + "\n\n");
  setTimeout(() => sseRandom(res), Math.random() * 3000);
}

指定重試延遲

儘管重新連接是自動的，但您的服務(wù)器可能知道在特定時間段內(nèi)不需要新數(shù)據(jù)，因此無需保留活動的通信通道。服務(wù)器可以在其自身或作為最終消息的一部分發(fā)送 retry: 響應(yīng)，其中包含毫秒值。例如：

$> curl -H Accept:text/event-stream http://localhost:8000/random
data: 481

data: 127

data: 975

收到後，瀏覽器將放棄 SSE 連接，並在延遲時間過去後嘗試重新連接。

其他事件處理程序

除了“message”和命名事件之外，您還可以在客戶端 JavaScript 中創(chuàng)建“open”和“error”處理程序。

當(dāng)服務(wù)器連接建立時，會觸發(fā)“open”事件。它可用於運(yùn)行其他配置代碼或初始化 DOM 元素：

// 客戶端 JS
const source = new EventSource("/random");

當(dāng)服務(wù)器連接失敗或終止時，會觸發(fā)“error”事件。您可以檢查事件對象的 .eventPhase 屬性以查看發(fā)生了什麼：

source.addEventListener('message', e => {
  console.log('RECEIVED', e.data);
});

請記住，無需重新連接：它會自動發(fā)生。

終止 SSE 通信

瀏覽器可以使用 EventSource 對象的 .close() 方法終止 SSE 通信。例如：

<code>event: news
data: SSE is great!

event: weather
data: { "temperature": "20C", "wind": "10Kph", "rain": "25%" }

event: stock
data: { "symbol": "AC", "company": "Acme Corp", "price": 123.45, "increase": -1.1 }</code>

服務(wù)器可以通過以下方式終止連接：

1. 觸發(fā) res.end() 或發(fā)送 retry: 延遲，然後
2. 在同一瀏覽器嘗試重新連接時返回 HTTP 狀態(tài) 204。

只有瀏覽器可以通過創(chuàng)建新的 EventSource 對象來重新建立連接。

結(jié)論

服務(wù)器端事件提供了一種實(shí)現(xiàn)實(shí)時頁面更新的方法，這種方法可能比基於 Fetch() 的 Ajax 輪詢更容易、更實(shí)用且更輕量級。複雜性在於服務(wù)器端。您必須：

1. 將所有用戶的活動連接保留在內(nèi)存中，以及
2. 在發(fā)生更改時觸發(fā)數(shù)據(jù)傳輸。

但這完全在您的控制之下，並且擴(kuò)展應(yīng)該不比任何其他 Web 應(yīng)用程序更複雜。

唯一的缺點(diǎn)是 SSE 不允許您從瀏覽器向服務(wù)器發(fā)送消息（除了初始連接請求）。您可以使用 Ajax，但這對於動作遊戲等應(yīng)用程序來說太慢了。對於適當(dāng)?shù)碾p向通信，您需要 WebSockets。請查看如何在 Node.js 中使用 WebSockets 創(chuàng)建實(shí)時應(yīng)用程序以了解更多信息！

以上是如何在node.js中使用服務(wù)器範(fàn)圍的事件的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！