概述
Server-Sent Events (SSE) 是一种无需轮询的客户端和服务器之间的单向通信方式，也是一种实时性较高的数据传输协议。它允许服务器在任何时候向客户端推动新数据，因此可以用于实时更新网站内容、提供实时通知、展示实时数据等场景。本文将详细介绍 SSE 的工作原理及应用场景，包括 SSE 的特点、SSE 请求的流程、SSE 的应用场景及示例代码。
SSE 的特点
SSE 是一种基于 HTTP 协议的服务器推送技术，主要具有以下特点：
- SSE 充分利用了 HTTP/1.x 协议的长连接特性，支持持久连接并保持连接状态，不需要像 WebSocket 那样发起握手过程。
- SSE 可以发送任意类型的数据，包括纯文本、XML 和 JSON 等格式，和服务器和客户端之间的通信方式无关。
- SSE 使用了 HTTP 头信息来传递元数据，比如事件类型、连接状态等，使得 SSE 更加灵活和易于控制。
- SSE 的客户端支持度较好，除 Internet Explorer 之外，现代浏览器基本上都已经支持 SSE。
SSE 请求的流程
SSE 的请求流程相对 WebSocket 要简单一些，如下图所示：
- 客户端通过 GET 方法向服务器发送 SSE 请求，请求的 URL 必须以
.eventsource结尾，如http://example.com/stream.eventsource。 - 服务器返回一个 Content-Type 为 text/event-stream 的响应头，表示这是 SSE 协议的数据格式，也可以包含一些其他的响应头，如 Cache-Control 和 Connection 等。
- 服务器向客户端发送事件数据，每类数据都以 "event:" 开头，后面是事件名（可以省略），随后是一些以 "data:" 开头的消息体。事件数据通常以空行间隔，因此 SSE 也被称为 "text/event-stream" 。
- 客户端通过 an EventSource 对象接收数据，可以监听 message、open 和 error 事件。当有新的事件数据传输时，触发 message 事件，页面就可以通过 JavaScript 操作 DOM，展示实时数据。
SSE 的应用场景
SSE 可以广泛应用于一些实时性较高的场景，例如：
- 实时聊天：可以使用 SSE 技术来实现在线聊天室功能。
- 实时通知：可以使用 SSE 和服务器推送技术来向客户端推送实时通知，如新消息提醒、订单提醒等。
- 实时更新网站内容：可以使用 SSE 和服务器推送技术来实现实时更新网站内容，如显示推荐产品、实时更新股票行情等。
示例代码
以下是一个 SSE 的示例代码，可以向客户端推送实时时间数据。
服务端代码（Node.js）：
// www.javascriptcn.com code example
const http = require('http');
const server = http.createServer();
server.on('request', (req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream', // 声明响应类型为 SSE
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(() => {
res.write(`data: ${new Date().toLocaleTimeString()}\n\n`); // 推送实时时间
}, 1000);
});
server.listen(3000, () => {
console.log('Server running at http://localhost:3000');
});客户端代码：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>SSE Demo</title>
<meta charset="utf-8">
</head>
<body>
<script>
const eventSource = new EventSource('/'); // 创建 EventSource 对象
eventSource.onmessage = (event) => {
const time = event.data; // 得到推送的时间数据
const p = document.createElement('p');
p.innerText = time;
document.body.appendChild(p); // 把数据显示在页面上
};
</script>
</body>
</html>以上是一个简单的 SSE 示例代码，可以实时显示当前时间。既然服务器可以随时推送新的数据，所以可以在服务器中随任何时刻改变数据，再通过 SSE 把最新数据实时推送给客户端。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d800f7a941bf7134e4829b