在 web 开发中，经常需要实现实时推送数据的功能。传统的方式通常是使用轮询，但是这种方式非常消耗资源，对服务器和客户端都有很大的负荷。随着浏览器和服务器的技术的发展，越来越多的实时数据推送技术被开发出来，其中一种比较流行的技术是 Server-Sent Events（SSE），本文就要介绍如何使用这种技术实现基于事件的编程。
什么是 Server-Sent Events
Server-Sent Events 是一种基于 HTTP 协议下的实时数据推送技术，通过在服务端发送事件流到客户端实现实时数据传输。SSE 可以保持开放的 HTTP 请求，以便向客户端发送数据流。这种推送技术使用了极少的资源，可以承载大量的并发连接，非常适用于实时数据推送。
如何使用 Server-Sent Events
在客户端，我们可以使用 HTML 中的 EventSource API 来监听从服务器发送的事件流：
const eventSource = new EventSource('/stream');
eventSource.addEventListener('message', event => {
console.log(event.data);
});在服务端，我们可以使用常规的 HTTP 响应来发送事件流，但是需要添加一些特定的头信息，如下所示：
HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
event: example
data: {"message": "hello world"}在这个例子中，我们发送了一个名为 ‘example’ 的事件流，内容是 'hello world'。
示例代码
接下来，我们来看一个完整的例子，如下所示：
server.js：
// javascriptcn.com 代码示例
const http = require('http');
http.createServer((req, res) => {
if (req.url === '/stream') {
res.writeHead(200, {
'Content-Type': 'text/event-stream', // 设置头信息
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(() => {
const currentTime = new Date().toISOString(); // 发送当前时间
res.write(`event: time\ndata: ${currentTime}\n\n`);
}, 1000);
}
}).listen(3000);client.html：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Server-Sent Events</title>
</head>
<body>
<h1>Server-Sent Events Demo</h1>
<div id="result"></div>
<script>
const result = document.getElementById('result');
const eventSource = new EventSource('/stream');
eventSource.addEventListener('time', event => {
result.innerHTML = `Current Time: ${event.data}`;
});
</script>
</body>
</html>这个例子中，服务器每秒发送一个当前时间的事件流，然后客户端监听 'time' 事件，并将其打印在页面上。
总结
虽然 SSE 技术已经被广泛使用，但是对于对 WebSocket 更熟悉的开发者来说，可能会发现 SSE 只是 WebSocket 的一个子集，因为它不支持双向数据传递，也不能使用高级的协议（如 STOMP、XMPP 等）。但是，SSE 技术非常适合一些简单的实时数据推送场景，相比 WebSocket，使用成本更低，代码实现也更为简单。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6543cb5c7d4982a6ebdcd99b