在前端开发中，为了实现实时更新和推送功能，常常会用到 SSE（Server-Sent Events）和长轮询（Long Polling）这两种技术。本文将对这两种技术进行对比，并分析它们的优缺点。
什么是 SSE
SSE 是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端发送事件，客户端通过 EventSource API 进行监听并接收事件。与传统的 Ajax 请求不同，SSE 是一种单向的通信方式，即服务器可以向客户端推送消息，但是客户端不能向服务器发送消息。
下面是一个简单的 SSE 示例：
// javascriptcn.com 代码示例
const eventSource = new EventSource('/sse');
eventSource.addEventListener('message', event => {
console.log(event.data);
});
eventSource.addEventListener('error', () => {
console.log('连接出错');
});服务端代码：
// javascriptcn.com 代码示例
app.get('/sse', (req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(() => {
res.write(`data:${new Date().toLocaleString()}\n\n`);
}, 1000);
});什么是长轮询
长轮询也是一种实现实时推送的技术，它的原理是客户端向服务器发起一个长时间的请求，服务器在有数据更新时才返回响应。客户端收到响应后再立即发起下一个请求，以此类推，实现实时更新。
下面是一个简单的长轮询示例：
// javascriptcn.com 代码示例
function longPolling() {
fetch('/long-polling')
.then(response => response.text())
.then(data => {
console.log(data);
longPolling();
})
.catch(() => {
console.log('连接出错');
setTimeout(longPolling, 1000);
});
}
longPolling();服务端代码：
app.get('/long-polling', (req, res) => {
setTimeout(() => {
res.send(new Date().toLocaleString());
}, 1000);
});对比与分析
SSE 和长轮询都可以实现实时推送功能，但是它们的实现方式和优缺点不同。
实现方式
SSE 是基于 HTTP 的服务器推送技术，客户端通过 EventSource API 进行监听并接收事件。在客户端收到事件后，可以通过 JavaScript 进行处理，如更新页面内容等。
长轮询是客户端向服务器发起一个长时间的请求，服务器在有数据更新时才返回响应。客户端收到响应后再立即发起下一个请求，以此类推。在客户端收到响应后，可以通过 JavaScript 进行处理，如更新页面内容等。
优缺点
SSE 的优点：
- 实时性更高：SSE 可以实现实时推送，服务器有数据更新时立即发送，客户端能够立即接收到。
- 可靠性更高：SSE 基于 HTTP 协议，具有更好的可靠性和稳定性，而且可以自动重连。
- 简单易用：SSE 使用起来非常简单，客户端只需要调用 EventSource API 进行监听即可。
SSE 的缺点：
- 兼容性较差：SSE 不支持的浏览器较多，需要使用 polyfill 进行兼容。
- 数据格式有限：SSE 只支持文本格式，不支持二进制格式。
- 无法发送请求：SSE 是一种单向通信方式，客户端无法向服务器发送请求。
长轮询的优点：
- 兼容性更好：长轮询在大多数浏览器上都可以使用，无需进行兼容处理。
- 数据格式更灵活：长轮询可以支持任何数据格式，包括二进制格式。
- 可以发送请求：长轮询是一种双向通信方式，客户端可以向服务器发送请求。
长轮询的缺点：
- 实时性较差：长轮询需要等待服务器响应，如果服务器没有数据更新，客户端会一直等待，造成延迟。
- 可靠性较差：长轮询需要频繁发起请求，造成服务器压力增加，容易引起服务器宕机。
- 复杂度较高：长轮询需要客户端和服务器共同实现，需要编写复杂的代码。
总结
SSE 和长轮询都是实现实时推送功能的有效方式，但是它们的实现方式和优缺点不同。在选择使用哪种技术时，需要根据具体的场景和需求进行选择。如果需要实时性更高、可靠性更好、使用更简单的方案，可以选择 SSE；如果需要数据格式更灵活、可以发送请求的方案，可以选择长轮询。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656c5d70d2f5e1655d4bf6f7