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

簡單

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

可靠性

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

結論

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

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

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