SSE 的基本架构与工作原理-JavaScript中文网-JavaScript教程资源分享门户

什么是 SSE

SSE（Server-Sent Events）是一种基于 HTTP 协议的服务器推送技术，使得服务器可以实时向客户端发送数据，而无需客户端主动请求。SSE 还支持自定义事件类型和事件数据，可以广泛应用于实时通知、实时聊天等场景。

SSE 的基本架构

SSE 由三部分组成：客户端、服务器和事件流。其中客户端使用浏览器内置的 EventSource 对象来接收事件流，服务器端则需要实现 SSE 的协议规范，即向客户端发送包含特定格式的文本数据流。

SSE 的工作原理

SSE 的工作原理可以简述为：客户端向服务器发送一个 HTTP 请求，请求头中包含了 SSE 的协议规范。服务器返回的响应头中包含了 Content-Type: text/event-stream 和 Cache-Control: no-cache，表示这是一个 SSE 的事件流，而且不应该被缓存。然后服务器就会持续向客户端发送事件数据，每个事件数据都以特定格式的文本块发送，客户端接收到事件数据后就可以对其进行处理。

下面是一个 SSE 事件数据的示例：

event: message
data: {"content": "Hello, SSE!"}

其中，event 表示事件类型，可以自定义；data 表示事件数据，可以是任意格式的数据，但必须是字符串类型。

SSE 的示例代码

下面是一个简单的 SSE 示例，使用 Express 框架来实现 SSE 的协议规范，向客户端发送一个每秒递增的计数器：

服务器端代码

// javascriptcn.com 代码示例
const express = require('express');
const app = express();

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

  let count = 0;
  setInterval(() => {
    res.write(`event: count\n`);
    res.write(`data: ${count++}\n\n`);
  }, 1000);
});

app.listen(3000, () => {
  console.log('SSE server is running at http://localhost:3000/sse');
});

客户端代码

const eventSource = new EventSource('/sse');

eventSource.addEventListener('count', event => {
  console.log(`Count: ${event.data}`);
});

在浏览器中打开 http://localhost:3000/sse，控制台会每秒输出一个递增的计数器值。

总结

SSE 是一种基于 HTTP 协议的服务器推送技术，可以实现服务器向客户端实时发送数据。SSE 的基本架构由客户端、服务器和事件流组成，其工作原理是客户端向服务器发送 SSE 协议请求，服务器以 SSE 协议规范返回数据流，客户端接收数据流并处理。SSE 可以应用于实时通知、实时聊天等场景。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65769947d2f5e1655dfea108