前言
在前端开发中，我们经常需要实现实时更新的功能，比如聊天室，股票行情等。这时候，我们需要使用一些技术来实现实时更新，最常用的两种技术是 Server-sent Events 和长轮询。本文将会对这两种技术进行比较，以便读者选择适合自己的技术。
Server-sent Events
Server-sent Events 又称为 SSE，是 HTML5 提供的一种技术，用于服务器向客户端推送实时数据。SSE 基于 HTTP 协议，使用了 HTTP 的长连接，可以实现服务器向客户端持续推送数据，而不需要客户端不断地发送请求。
SSE 的优点在于：
- 实时性好：SSE 能够实时推送数据，可以做到毫秒级的更新。
- 简单易用：SSE 的实现非常简单，只需要使用 EventSource 对象即可。
- 兼容性好：SSE 在大部分现代浏览器中都有很好的支持。
但是 SSE 也有一些缺点：
- 无法向服务器发送数据：SSE 只能由服务器向客户端推送数据，无法由客户端向服务器发送数据。
- 无法在某些浏览器中使用：虽然 SSE 在现代浏览器中都有很好的支持，但是在一些老旧的浏览器中可能无法使用。
下面是一个使用 SSE 的示例代码：
let eventSource = new EventSource('/sse');
eventSource.onmessage = function(event) {
console.log(event.data);
};长轮询
长轮询是一种实现实时更新的技术，其基本原理是客户端不断地向服务器发送请求，服务器在有新数据时才返回响应。这样可以做到实时更新，但是相比 SSE，长轮询的实时性稍差一些。
长轮询的优点在于：
- 实现简单：长轮询的实现非常简单，只需要使用 XMLHttpRequest 对象即可。
- 兼容性好：长轮询在大部分现代浏览器中都有很好的支持。
长轮询的缺点在于：
- 实时性不如 SSE：长轮询需要不断地发送请求，实时性比 SSE 稍差一些。
- 对服务器压力大：长轮询需要不断地发送请求，对服务器的压力较大。
下面是一个使用长轮询的示例代码：
-- -------------------- ---- -------
-------- ------------- -
--- --- - --- -----------------
---------------------- - ---------- -
-- --------------- --- - -- ---------- --- ---- -
------------------------------
--------------
-
--
--------------- -----------------
-----------
-
--------------总结
综上所述，SSE 和长轮询都是实现实时更新的技术，各有优缺点。在选择技术时，需要考虑实时性、兼容性、实现难度、服务器压力等因素，选择适合自己的技术。
最后，需要注意的是，在使用 SSE 或长轮询时，需要注意防止服务器被 DDos 攻击，可以使用一些限流措施来保护服务器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662b5a57d3423812e48e30ea