SSE 与长轮询的比较及优缺点分析
随着 Web 应用越来越复杂，实时性需求也越来越高，前端技术中的 SSE（Server-Sent Events）和长轮询（Long Polling）逐渐成为了常见的实现方式。在这篇文章中，我们将比较两者的优缺点，并提供一些示例代码。
SSE 是一种服务器向客户端发送事件的技术，客户端通过 EventSource 对象接受事件。与传统的 AJAX 请求不同，SSE 是基于 HTTP 的长连接。服务器将数据以文本流的方式发送给客户端，并使用特定的 MIME 类型指示它是 SSE。
长轮询是一种模拟实时客户端与服务器之间的交互的方式，其原理是客户端向服务器发送请求，服务器在等待一段时间后才响应。如果服务器有新的数据可以推送给客户端，服务器会立即响应并发送数据。如果没有，服务器就会在一段时间后返回一个空响应。这个过程会一直循环下去，直到客户端和服务器的连接断开。
现在，我们来看一下这两种技术的优缺点。
SSE 的优点：
- 实时性更好：SSE 是一种真正的实时技术，可以实现服务器向客户端主动推送消息。
- 可靠性更高：由于使用了长连接，可以避免客户端多次请求造成的网络拥堵。
- 更省流量：只有在有新数据的时候才会发起请求，避免了无效请求。
SSE 的缺点：
- 对于不支持 SSE 的浏览器，需要使用 Polyfill，增加了代码复杂度。
- 由于服务器需要维护连接，可能导致服务器负荷增加。
- 默认情况下仅支持文本格式，对于二进制数据需要另外处理。
长轮询的优点：
- 兼容性更好：长轮询可以在大部分浏览器上运行。
- 负载更小：由于每次请求需要的数据较少，可以减轻服务器负担。
- 数据格式更灵活：可以支持任意数据格式。
长轮询的缺点：
- 实时性较差：长轮询需要一定的等待时间，不能实现即刻响应。
- 流量较大：由于每次请求的重复内容较多，会造成一定的网络流量浪费。
- 客户端需要发起频繁的请求，增加了客户端的负担。
在实际开发中，我们需要根据具体场景来选择适合的技术。如果需要实时推送数据，可以选择 SSE；如果需要兼容性更好，并且对实时性没有特别高的要求，可以选择长轮询。
下面是示例代码。
使用 SSE 推送消息：
服务端代码：
-- -------------------- ---- ------- ----- ---- - ---------------- ----------------------- ---- -- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------ --- -------------- -- - ---------------- - - --- --------------------------- - -------- -- ------ --------------- -- -- ------------------- -----------展开代码
客户端代码：
const source = new EventSource('http://localhost:8080'); source.addEventListener('message', event => { console.log(event.data); });
使用长轮询推送消息：
服务端代码：
-- -------------------- ---- ------- ----- ---- - ---------------- ----------------------- ---- -- - -- -------- --- ----------- - -------------- -- - ----------- ----------------------------- -- ------ - ---- - ------------------- --------- -------- -------- --------- - ----- --- - --- ----------------- --------------- ------------- ---------------------- - -------- -- - -- --------------- --- - -- ---------- --- ---- - ------------------------------ ---------- - - ----------- - ---------- --------- --- - --------------- -- -- ------------------- -----------展开代码
客户端代码：
-- -------------------- ---- ------- -------- -------- --------- - ----- --- - --- ----------------- --------------- ------------- ---------------------- - -------- -- - -- --------------- --- - -- ---------- --- ---- - ------------------------------ ---------- - - ----------- - ---------- ---------展开代码
总的来说，SSE 和长轮询都有其优缺点，根据具体场景选择适合自己的技术才是最重要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c10627314edc2684851d29
