在现代 Web 应用中，实时性是至关重要的。而传统的 HTTP 协议并不支持服务器向客户端主动发送数据，只能通过客户端主动发起请求来获取数据。这种模式虽然可以满足一些需求，但是对于实时性要求较高的应用则显得力不从心。SSE（Server-Sent Events）技术则为此提供了一种解决方案。
SSE 的原理
SSE 是一种基于 HTTP 的服务器推送技术。它通过在客户端与服务器之间建立持久化连接，使得服务器可以向客户端主动发送数据。具体来说，客户端通过向服务器发送一个带有特定头部的请求来建立 SSE 连接：
const eventSource = new EventSource('/sse');服务器在收到这个请求之后，会保持连接不断开，并向客户端发送数据。客户端则通过监听 message 事件来处理服务器发送的数据：
eventSource.addEventListener('message', event => {
console.log(event.data);
});服务器发送的数据格式如下：
data: Hello, world!\n\n
其中，data 表示发送的数据，\n\n 表示数据结束。客户端接收到这样的数据后，会触发 message 事件，并将数据传递给事件回调函数。
SSE 的优点
相比于传统的轮询和长轮询技术，SSE 具有以下优点：
- 实时性更好：SSE 可以实现服务器向客户端主动推送数据，不需要客户端反复发起请求。
- 可靠性更高：SSE 建立的是持久化连接，可以保证数据的可靠性和一致性。
- 性能更好：SSE 的连接是单向的，只需要服务器向客户端发送数据，不需要客户端向服务器发送数据，因此可以减轻服务器的负担。
- 兼容性更好：SSE 是基于 HTTP 的标准，不需要额外的插件或框架支持，可以在现代浏览器中广泛使用。
SSE 的应用场景
SSE 技术可以应用于各种需要实时性的场景，例如：
- 实时聊天室：服务器可以将新消息实时推送给客户端，客户端不需要反复发起请求。
- 实时监控系统：服务器可以将监控数据实时推送给客户端，客户端可以实时展示最新的数据。
- 实时股票行情：服务器可以将股票行情实时推送给客户端，客户端可以实时展示最新的股票价格。
SSE 的示例代码
以下是一个简单的 SSE 示例代码，服务器使用 Node.js 实现：
// www.javascriptcn.com code example
const http = require('http');
const server = http.createServer((req, res) => {
if (req.url === '/sse') {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive',
});
setInterval(() => {
res.write(`data: ${new Date().toLocaleTimeString()}\n\n`);
}, 1000);
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(`
<!DOCTYPE html>
<html>
<head>
<title>SSE Example</title>
</head>
<body>
<h1>SSE Example</h1>
<script>
const eventSource = new EventSource('/sse');
eventSource.addEventListener('message', event => {
const messageElement = document.createElement('p');
messageElement.innerText = event.data;
document.body.appendChild(messageElement);
});
</script>
</body>
</html>
`);
}
});
server.listen(3000, () => {
console.log('Server is listening on port 3000');
});在浏览器中访问 http://localhost:3000，即可看到实时展示当前时间的页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d0eae5a941bf71341f5b96