在前端开发中，我们经常需要通过不同的技术来实现实时通信，以实时更新数据。而 SSE（Server Sent Events）和长轮询（long-polling）是两种常见的实时通信技术。在本文中，我们将对这两种技术进行比较，以便您选择更适合您项目需要的解决方案。
SSE
SSE 是一种简单的服务器到客户端实时通信协议。它允许服务器主动从客户端推送数据，而无需客户端请求数据。它建立在 HTTP 协议之上，使用 HTTP 的长连接，只有一个连接需要被打开。在服务器上，我们可以使用特殊的 Content-Type：text/event-stream 来指示浏览器向服务器发送 SSE。
最大的优点是 SSE 能够在服务器有新数据时立即向客户端推动数据，并且允许对每个推送的数据事件进行附加数据。此外，SSE 能够保留 HTTP 操作的语义，因为它是在 HTTP 上实现的。因此，SSE 适合于需要实时或延迟通知客户端的情形。
以下是 SSE 的一个简单示例代码：
-- -------------------- ---- ------- ----- ----------- - --- -------------------- --------------------------------------- ------- -- - ----- ---- - ----------------------- -- ------- ---- --- --- ------------------------------------ ------- -- - ------------------- ---------- --------- --- ------------------------------------- ------- -- - ------------------- ---------- -------- ---
长轮询
长轮询是一种技术，客户端通过向服务器发送请求来等待服务器上的新数据。如果没有新数据，服务器不会立即响应请求，而是将请求挂起并等待有新数据可供发送。如果有新数据可供发送，服务器应答请求并发送数据。这使得客户端可以等待实时数据。
长轮询的优点在于，它可以在服务器上实现非常简单，不需要特殊协议。它还支持旧的浏览器，因为它只是一个长时间挂起的 HTTP 请求。此外，长轮询是一种在没有实时数据时节省带宽的技术，因为它不会不停地发送请求。长轮询适用于需要实时通信，但无法使用 WebSockets 的情况。
以下是长轮询的一个简单示例代码：
function getData() {
$.get('/long-polling', (data) => {
// process data ...
getData();
});
}
getData();比较
下面是 SSE 和长轮询的比较：
实时性
SSE 能够立即推送数据，而长轮询必须等待服务器上有新数据可供发送。
性能
SSE 需要保持一个开放的 HTTP 连接，并使用较小的数据包。另一方面，长轮询发送更少的请求，并且可以使用较大的数据包。选择技术取决于您的数据大小和服务器性能。
浏览器支持
SSE 不支持 IE9 及以下版本的浏览器。长轮询是一种传统的 HTTP 请求，因此它支持所有浏览器。
服务器实现难度
SSE 需要服务器支持特殊的 Content-Type，并且需要在服务器上保持打开的连接。长轮询只需要一个普通的 HTTP 请求。
代码实现难度
SSE 和长轮询在代码实现上都不复杂，但 SSE 处理更密集的较小数据包，因此需要处理流式数据，这可能会更具挑战性。
在使用 SSE 或长轮询之前，请考虑您的项目需求，最佳实践，技术需求以及您的服务器和浏览器支持情况。
结论
SSE 和长轮询都是非常有效的实时通信技术。SSE 的优点在于能够实现实时传输和附加数据。长轮询的优点在于不需要额外的服务器配置，并且对旧的浏览器友好。
如果您的项目需要实时更新较小的数据包，而且不需要支持旧的浏览器，则 SSe 是不错的选择。如果您需要传输较大的数据包，或者需要支持旧的浏览器，则使用长轮询是更好的选择。
希望本文能够帮助您选择合适的实时通信技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672ed82feedcc8a97c8b0447