使用服务器发送事件（SSE）进行实时通信：在 JavaScript 中使用 EventSource 指南

服务器和客户端之间的实时通信对于交互式动态 Web 应用程序至关重要。传统上，WebSockets 是双向通信的首选解决方案，但在某些情况下，只需要服务器到客户端的单向通信。这正是服务器发送事件（SSE）的优势所在。SSE 是一种基于浏览器的 API，可建立持续连接，允许服务器向客户端推送更新，而客户端无需持续轮询数据。在本文中，我们将通过示例介绍如何在 Node.js 环境中设置和使用 SSE。

为什么使用服务器发送事件？

SSE 具有多种优势，尤其适用于数据仅从服务器流向客户端的实时应用：

• 简单：SSE 通过 HTTP 运行，这意味着它不需要 WebSocket 等附加协议。
• 自动重新连接：如果连接暂时中断，浏览器中的 EventSource 对象会自动重新连接。
• 单向数据的理想选择：SSE 非常适合服务器发送更新到客户端但不需要回传数据的情况，如即时比分更新或通知。

设置服务器发送事件

让我们使用 Node.js 构建一个 SSE 设置示例。在此示例中，我们将模拟一个使用 SSE 向客户端发送实时出勤更新的服务器。

1. 后端设置

在服务器端，需要设置将数据流式传输到客户端的路由。以下是 Node.js 和 Express 中的一个示例：

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

app.get("/stream", (req, res) => {
    // 设置标头以保持连接打开以进行实时更新
    res.set("Content-Type", "text/event-stream");
    res.set("Cache-Control", "no-cache");
    res.set("Connection", "keep-alive");
    res.flushHeaders();

    // 向客户端发送初始数据
    res.write("data: Hello World\n\n");

    // 示例：每 5 秒发送实时出勤更新
    const intervalId = setInterval(() => {
        const data = JSON.stringify({ message: "Real-time attendance update", timestamp: new Date() });
        res.write(`data: ${data}\n\n`);
    }, 5000);

    // 客户端断开连接时关闭连接
    req.on("close", () => {
        clearInterval(intervalId);
        res.end();
    });
});

// 启动服务器
app.listen(3000, () => {
    console.log("Server is running on http://localhost:3000");
});

上述代码的解释：

• Headers：我们设置标头信息以保持连接状态，并为 SSE 指定text/event-stream。
• res.write：以事件流格式（data: …\n\n）发送数据，客户端可以解释这些数据。
• Cleanup：当客户端断开连接时，关闭事件会清除时间间隔，以防止内存泄漏。

2. 使用 EventSource 进行前端设置

在客户端，我们使用 EventSource API 与服务器建立连接，并监听传入的消息。

// 初始化 EventSource 连接
const eventSource = new EventSource("http://localhost:3000/stream");

eventSource.onmessage = function(event) {
    const data = JSON.parse(event.data); // 解析服务器发送的 JSON 数据
    console.log("Message received:", data);
    // 在这里处理实时出勤数据
};

eventSource.onerror = function(event) {
    console.error("Error occurred with the EventSource connection:", event);
    // 如果发生错误，关闭连接
    eventSource.close();
};

上述代码的解释：

• EventSource/stream：打开与服务器上端点的连接。
• onmessage：每当从服务器收到消息时，都会触发此事件监听器。在这里，我们解析 JSON 数据并记录下来。
• onerror：处理连接过程中发生的任何错误。如果发生错误，我们可以选择关闭连接。

服务器发送事件的优缺点

优点

• 高效：SSE 维护单个开放连接，对于单向数据流来说，实现起来比 WebSockets 更简单。
• 自动重新连接：如果连接中断，EventSource 会自动尝试重新连接，这对于需要稳定更新流的实时应用程序非常有用。
• 基于文本的数据：SSE 旨在传输基于文本的数据，使其对于不需要二进制数据传输的应用程序来说很轻量。

缺点

• 单向：SSE 只允许服务器到客户端通信。如果客户端也需要发送数据，则需要额外的 HTTP 请求。
• 浏览器兼容性：尽管得到广泛支持，但 SSE 无法在 Internet Explorer 上运行。
• 连接限制：SSE 受到浏览器允许每个域的最大打开 HTTP 连接数限制。

何时使用 SSE 而不是 WebSockets

虽然 WebSocket 非常适合双向通信（例如聊天应用程序），但 SSE 更适合只需要单向实时更新的应用程序。在以下情况下，请考虑使用 SSE：

• 服务器只需要向客户端推送更新（例如新闻提要、实时比分或者股票价格）。
• 您需要一个轻量级的、基于 HTTP 的解决方案，而不需要复杂的 WebSockets。

结论

服务器发送事件（SSE）是 Web 应用程序实时更新的强大工具。通过在浏览器中使用 EventSource 并使用正确的标头设置服务器端点，您可以创建一个持久连接，实时向客户端推送数据。虽然 SSE 的功能不如 WebSockets 多，但它为单向通信需求提供了更简单有效的解决方案。