什么是 SSE？
SSE 是 Server-Sent Events 的缩写，即服务器发送事件。SSE 是 HTML5 新增的 API，用于实现服务器推送事件到客户端的功能。相较于传统的轮询方式，SSE 可以极大地减少客户端和服务器之间的通信负荷，提升了服务器的性能和响应速度。
如何使用 SSE？
基本原理
SSE 是一种基于 HTTP/1.1 的技术，利用了 HTTP/1.1 中的长连接机制。客户端通过向服务器发送一个 HTTP 请求，请求一条长连接，服务器在建立连接之后会不断地向客户端发送事件，直到连接被关闭。
客户端和服务器之间的通信采用了文本格式的数据流，服务器可以发送任意格式的数据，例如 JSON，XML，普通文本等。
服务器端代码示例
以下代码是一个简单的 Node.js 实现 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 date = new Date();
res.write(`data: ${date.toString()}\n\n`);
}, 1000);
}).listen(8000, 'localhost');此代码通过 Node.js 创建了一个 HTTP 服务，监听端口 8000，当客户端建立连接时，服务器会每隔一秒发送一个时间戳给客户端。
客户端代码示例
以下代码是一个简单的 HTML 页面，通过 JavaScript 代码实现了 SSE 的功能：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSE Example</title>
</head>
<body>
<div id="sse"></div>
<script>
const sse = new EventSource('http://localhost:8000');
sse.onmessage = (event) => {
const data = event.data;
document.getElementById('sse').innerHTML = data;
};
</script>
</body>
</html>此页面通过 EventSource 对象建立了与服务器的长连接，当服务器发送消息时，会触发 onmessage 事件，在回调函数中更新页面上的内容。
SSE 的优点和缺点
优点
- 大幅度减少了网络带宽的消耗，提高了响应速度；
- 能够实时推送数据，适用于需要实时通信的场景；
- 容易实现。
缺点
- 只支持单向通信，不能像 WebSocket 一样进行双向通信；
- 浏览器兼容性较差，不支持 IE 和 Edge。
总结
SSE 是一种基于 HTTP 的服务器推送技术，提供了一种高效、简单的通信方式，可以广泛应用于需要实时通信的场景。但它只支持单向通信，不能像 WebSocket 一样进行双向通信，且浏览器兼容性较差。在选择 SSE 或 WebSocket 时，需要根据具体的业务场景作出选择。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653df7ef7d4982a6eb793377