伺服器發送事件 (SSE) 的工作原理-js教程-PHP中文網

How Server-Sent Events (SSE) Work

SSE（伺服器發送事件）在 Web 開發領域並未廣泛使用，本文將深入探討 SSE 是什麼、它如何運作以及它如何受益您的申請。

什麼是上交所？

SSE 是一種透過 HTTP 連線從伺服器向客戶端發送即時更新的簡單且有效的方法。它是 HTML5 規範的一部分，並受到所有現代 Web 瀏覽器的支援。 SSE 基於單向資料流，伺服器向用戶端傳送訊息，但用戶端無法將訊息傳回伺服器。

SSE 使用稱為「伺服器傳送事件」的基於文字的格式將資料傳送到客戶端。資料作為一系列事件發送，每個事件包含一條訊息和一個可選的事件類型。事件類型用於區分不同類型的消息，並允許客戶端以不同的方式處理它們。

上交所如何運作？

SSE 協定的工作原理是在伺服器和客戶端之間建立持久的 HTTP 連線。只要客戶端想要從伺服器接收更新，此連線就會保持開啟。當伺服器有新資料要傳送時，它會傳送帶有特殊 MIME 類型「text/event-stream」的 HTTP 回應。

回應包含一系列事件，每個事件均由換行符（「n」）分隔。每個事件都有以下格式：

event: [event type]\n
data: [message]\n\n

登入後複製

「事件」欄位是可選的，用於提供事件的名稱。「資料」欄位包含正在傳送的實際訊息。每個事件末尾的兩個換行符用於表示事件結束。

這是一個簡單的 SSE 回應範例：

HTTP/1.1 200 OK
Content-Type: text/event-stream

event: message
data: Hello, world!

event: message
data: This is a test message.

event: customEvent
data: {"foo": "bar", "baz": 123}

登入後複製

在此範例中，我們向客戶端發送三個事件。前兩個事件的事件類型為「訊息」並包含簡單的文字訊息。第三個事件的事件類型為“customEvent”，並包含一個 JSON 物件作為其訊息。

當客戶端收到 SSE 回應時，它使用該資料來更新其使用者介面。例如，這可以使用 JavaScript 來操作 DOM 來完成。

實施上交所

在應用程式中實作 SSE 相對簡單。以下是如何使用 Node.js 和 Express 框架實作 SSE 的範例：

const express = require('express');
const app = express();

// Set up SSE endpoint
app.get('/events', (req, res) => {
  // Set headers
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  // Send initial event
  res.write('data: Connected\n\n');
  // Set interval to send periodic events
  const intervalId = setInterval(() => {
    res.write('data: Hello, world!\n\n');
  }, 1000);
  // Clean up on connection close
  req.on('close', () => {
    clearInterval(intervalId);
  });
});

// Start server
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

登入後複製

在此範例中，我們在「/events」處設定 SSE 端點。我們正在為 SSE 設定必要的標頭並向客戶端發送初始事件以確認連線已建立。

然後我們設定一個間隔，每秒向客戶端發送週期性事件。最後，我們正在清理客戶端關閉連線時的間隔。

在客戶端，我們可以使用以下 JavaScript 程式碼來監聽 SSE 事件：

const source = new EventSource('/events');

source.addEventListener('message', (event) => {
  console.log(event.data);
});
source.addEventListener('error', (event) => {
  console.error('Error:', event);
});

登入後複製

在此範例中，我們建立一個新的 EventSource 物件並傳入 SSE 端點的 URL。然後，我們監聽「訊息」事件並將資料記錄到控制台。我們也會監聽「錯誤」事件，以防出現任何連線問題。

注意前端的EventSource路徑只能被GET請求使用，如果想使用POST等HTTP方法，需要自行解析回應資料。

如果您想要原生 Node.js 實現，這裡有一個

SSE 用例

SSE 可用於各種需要即時更新的應用程式。以下是一些例子：

社群媒體平台：SSE 可用於為社群媒體平台提供即時更新，例如新訊息、留言或按讚的通知。
金融應用：上交所可以為金融應用提供即時更新，例如股票價格、貨幣匯率或新聞。
線上遊戲：SSE 可用於為線上遊戲應用程式提供即時更新，例如遊戲事件、比分或排名的通知。

使用 SSE 的好處

與其他即時通訊方法（例如輪詢或 WebSocket）相比，使用 SSE 有幾個好處：

效率

SSE 使用持久的 HTTP 連接，這意味著建立和維護連接的開銷比其他方法低得多。這使得 SSE 更有效率且資源佔用更少，這在處理大量客戶時尤其重要。

Simplicity

SSE is a simple protocol that is easy to understand and implement. It does not require any special libraries or frameworks and can be implemented using standard web technologies such as JavaScript and HTTP.

Reliability

SSE is a reliable protocol that provides automatic reconnection in case of a network interruption. This ensures that the client will continue to receive updates even if the connection is temporarily lost.

Conclusion

Server-Sent Events (SSE) are a simple and efficient way to send real-time updates from a server to a client over an HTTP connection. It is a part of the HTML5 specification and is supported by all modern web browsers. SSE uses a unidirectional data flow, where the server sends messages to the client, but the client cannot send messages back to the server. This saves you from constantly polling the server for events, which not only improves performance but also reduces complexity.

If you found this helpful, please consider subscribing to my newsletter for more useful articles and tools about web development. Thanks for reading!

以上是伺服器發送事件 (SSE) 的工作原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！