服务器发送事件 (SSE) 的工作原理

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 更加高效且资源占用更少，这在处理大量客户时尤其重要。

簡單

SSE 是一個簡單的協議，易於理解和實現。它不需要任何特殊的程式庫或框架，可以使用標準的 Web 技術（例如 JavaScript 和 HTTP）來實現。

可靠性

SSE 是一種可靠的協議，可以在網路中斷的情況下提供自動重新連接。這可以確保即使連線暫時遺失，客戶端也能繼續接收更新。

結論

伺服器傳送事件 (SSE) 是一種透過 HTTP 連線從伺服器傳送即時更新到客戶端的簡單且有效的方法。它是 HTML5 規範的一部分，並受到所有現代 Web 瀏覽器的支援。 SSE 使用單向資料流，伺服器向客戶端傳送訊息，但用戶端無法將訊息傳回伺服器。這使您無需不斷輪詢伺服器以查找事件，這不僅提高了效能，還降低了複雜性。

如果您發現這有幫助，請考慮 訂閱我的電子報 以獲取更多有關 Web 開發的有用文章和工具。感謝您的閱讀！

以上是服务器发送事件 (SSE) 的工作原理的详细内容。更多信息请关注PHP中文网其他相关文章！