SSE 程序的实现方法与技巧-JavaScript中文网-JavaScript教程资源分享门户

Server-Sent Events（SSE）是一种使用 HTTP 协议将实时数据从服务器发送到客户端的技术。与 WebSocket 相比，SSE 更加轻量级，易于实现和部署。本文将介绍 SSE 程序的实现方法与技巧，帮助前端开发者更好地理解和应用 SSE 技术。

SSE 原理

SSE 通过使用 HTTP 的长连接（HTTP keep-alive）实现实时数据的推送。客户端向服务器发送一个 HTTP 请求，服务器保持连接打开，当有新的数据时，服务器通过发送一个 HTTP 响应来传递数据。客户端通过监听这个响应的事件流（EventSource），实时接收数据。

SSE 响应的格式如下：

// www.javascriptcn.com code example
HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

data: Hello, world!

event: custom-event
data: {"id": 1, "name": "John Doe"}

: This is a comment

响应的第一行为 HTTP 状态码和状态信息。之后的各行为数据的字段，以 field: value 的格式表示。其中 data 字段表示数据内容，event 字段表示事件名称，: 行表示注释。

SSE 实现方法

服务器端实现

服务器端实现 SSE 需要满足以下条件：

服务器需要支持 HTTP 长连接。
服务器需要支持发送 HTTP 响应的事件流。
服务器需要支持发送自定义的事件名称和数据内容。

以下是 Node.js Express 框架下的 SSE 服务器端实现示例：

// www.javascriptcn.com code example
const express = require('express');
const app = express();

app.get('/sse', (req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  setInterval(() => {
    const data = new Date().toLocaleTimeString();
    res.write(`data: ${data}\n\n`);
  }, 1000);
});

app.listen(3000);

在上面的示例中，服务器每秒钟向客户端发送一条包含当前时间的数据。通过设置 HTTP 响应的头信息，将响应格式设为事件流，以及保持连接打开。

客户端实现

客户端实现 SSE 需要满足以下条件：

客户端需要支持监听 HTTP 响应的事件流。
客户端需要支持解析事件流中的数据和事件名称。

以下是浏览器端实现 SSE 的示例：

const source = new EventSource('/sse');
source.addEventListener('message', (event) => {
  console.log(event.data);
});

在上面的示例中，客户端通过创建 EventSource 对象，指定 SSE 的请求地址。通过监听 message 事件，处理服务器发送的数据。

SSE 技巧

跨域访问

SSE 可以跨域访问，但需要服务器端设置 CORS 头信息，允许客户端跨域访问。

以下是 Node.js Express 框架下设置 CORS 头信息的示例：

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  next();
});

自定义事件

SSE 可以发送自定义的事件名称和数据内容，客户端可以根据事件名称来处理不同的数据。

以下是服务器端发送自定义事件的示例：

res.write(`event: custom-event\ndata: {"id": 1, "name": "John Doe"}\n\n`);

以下是客户端根据事件名称处理数据的示例：

source.addEventListener('custom-event', (event) => {
  const data = JSON.parse(event.data);
  console.log(data.id, data.name);
});

SSE 与 WebSocket 比较

SSE 和 WebSocket 都可以实现实时数据的推送，但两者有以下区别：

SSE 使用 HTTP 协议，WebSocket 使用自定义协议。
SSE 支持跨域访问，WebSocket 需要双方协商。
SSE 仅支持服务器向客户端推送数据，WebSocket 可以双向通信。
SSE 更加轻量级，易于实现和部署。

根据实际需求，开发者可以选择 SSE 或 WebSocket 进行实时数据推送。

结语

本文介绍了 SSE 程序的实现方法与技巧，希望能够帮助前端开发者更好地理解和应用 SSE 技术。SSE 的轻量级和易用性使得它成为一种不错的实时数据推送方案。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d10e1fa941bf71342407ed

SSE 程序的实现方法与技巧