在 Web 开发中，我们时常需要向客户端推送实时更新的数据。传统的方法是使用轮询或长轮询技术，但这些方法都有一些缺点，如增加服务器负担、延迟高等问题。HTML5 中提供了一种更为高效的方式，即 Server-Sent Events。
什么是 Server-Sent Events？
Server-Sent Events（SSE）是一种客户端与服务器之间实现实时更新数据的通讯协议。它允许服务器单向地向客户端推送数据。SSE 协议建立在 HTTP 协议之上，而且它的通讯大部分都是使用常规的 HTTP 方法和头部字段。
相比于传统的轮询和长轮询技术，SSE 有很多优点，如：
- 无需客户端主动请求数据，减少无效请求的发送，减轻服务器压力。
- 实时性比ajax轮询更高，接收到服务器返回数据就处理，不需要等待ajax轮询时间到才能接收。
- 便于管理和维护，无需客户端在请求时传递 token 或唯一标识，而由服务器主动向客户端推送数据。
- SSE 协议使用简单，易于实现和测试。
如何使用 SSE ？
在服务端，我们需要为客户端提供 SSE 数据源。实现 SSE 方案的服务端可以使用 nodejs、Java、C#、Python 等开发语言。下面使用 Node.js 为例，先看看如何设置 SSE 数据源。
// javascriptcn.com 代码示例
const http = require('http');
const fs = require('fs');
http.createServer(function(req, res) {
if(req.url === '/sse') {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
// 向客户端发送数据
setInterval(() => {
const data = `data: ${new Date().toLocaleTimeString()}\n\n`;
res.write(data);
}, 1000);
} else {
const html = fs.readFileSync('./index.html');
res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
res.end(html);
}
}).listen(8888);上面的代码会创建一个 HTTP 服务器，根据请求的 url 发送不同的响应。
当客户端请求 SSE 数据源时，返回的响应的 Content-Type 需要设置成 text/event-stream。每次服务器推送数据时，都需要设置事件字段为 data，并在数据后面加上两个换行符。
在客户端，我们只需要使用 EventSource API 就能轻易地接收 SSE 服务端的推送数据。下面是一个简单的例子。
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SSE 例子</title>
</head>
<body>
<p id="sse"></p>
<script>
const sse = new EventSource('/sse');
sse.onmessage = function(e) {
document.getElementById('sse').innerHTML = e.data;
};
</script>
</body>
</html>上面的代码使用 EventSource 对象创建一个到服务端的连接。每次服务端推送数据时，会触发 onmessage 事件，根据返回的数据更新网页上的内容。
总结
SSE 是一种非常优秀的技术，它可以让客户端实时接收到服务端的数据更新。它比传统的轮询和长轮询有更多的优点，是现代 Web 开发中常用的技术之一。
在实际开发中，除了上面的示例代码，还需要注意 SSE 的一些实际问题。例如，浏览器对 SSE 的支持，服务端如何管理已连接的 SSE 客户端，如何处理连接中断等问题。当然，我们可以找到一些成熟的库来解决这些问题。
希望这篇文章能够帮助读者更好地了解 SSE 技术，同时也给 Web 开发者提供了一种高效的数据推送方案。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652f6da77d4982a6eb08e474