什么是 SSE
SSE（Server-Sent Events）是一种服务器向客户端推送数据的技术，它使用了长轮询（long-polling）的方式实现数据的实时推送。SSE 在 Web 开发中被广泛应用，尤其是在实时数据展示和聊天室等场景中。
SSE 的优点
实时性
SSE 可以实现实时推送数据，相比于传统的轮询方式，可以减少客户端的请求次数，降低服务器的压力，同时也可以提高数据的实时性。
简单易用
SSE 的实现非常简单，只需要在客户端使用 JavaScript 发送一个简单的请求，服务器会一直保持连接并推送数据，客户端只需要处理推送过来的数据即可。
兼容性好
SSE 的兼容性非常好，目前主流浏览器都支持 SSE 技术，包括 Chrome、Firefox、Safari 等。
SSE 的缺点
单向通信
SSE 是一种单向通信方式，只能由服务器向客户端推送数据，无法实现客户端主动向服务器发送数据的功能。
无法处理大量并发请求
SSE 的长轮询方式需要一直保持连接，如果有大量并发请求，服务器的资源会被占用，导致性能下降。
不支持跨域访问
SSE 的请求必须与服务器在同一个域名下，否则会出现跨域问题。
SSE 的应用场景
实时数据展示
SSE 可以实现实时推送数据，适用于实时数据展示场景，如股票行情、天气预报、车辆追踪等。
聊天室
SSE 可以实现实时推送聊天消息，适用于聊天室等场景。
SSE 的实现示例
服务器端代码
// javascriptcn.com 代码示例
const http = require('http');
http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream', // 设置响应头
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(() => {
const data = new Date().toLocaleTimeString();
res.write(`data: ${data}\n\n`); // 发送数据
}, 1000);
}).listen(3000);客户端代码
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SSE Demo</title>
</head>
<body>
<div id="output"></div>
<script>
const output = document.getElementById('output');
const eventSource = new EventSource('/'); // 创建 SSE 对象
eventSource.onmessage = (event) => {
output.innerHTML += `${event.data}<br>`; // 处理推送数据
};
</script>
</body>
</html>总结
SSE 技术可以实现实时推送数据，具有实时性、简单易用、兼容性好等优点，适用于实时数据展示和聊天室等场景。但是它也有单向通信、无法处理大量并发请求、不支持跨域访问等缺点，需要根据实际场景进行选择和使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6553294dd2f5e1655dcdad2b