在现代的Web应用程序中，实时数据的传输和推送是至关重要的。实时的信息传输方式有很多种，比如WebSocket、Server-Sent Events（SSE）和长轮询（Long Polling）。
Server-Sent Events和长轮询都是实现Web应用程序实时数据传输的技术。虽然它们的目的相同，但它们的实施方式和工作原理有所不同。在本文中，我们将比较Server-sent Events和长轮询的异同点。
1. Server-sent Events （SSE）
Server-sent Events是HTML5的API之一，旨在允许服务器推送实时数据到客户端网页。它通过一个持久化的HTTP连接不断地从服务器端发送新数据到客户端。客户端使用EventSource对象来接收这些数据，然后解析它们并更新网页。
下面是一个SSE的示例代码：
----- ----------- - --- -------------------------- --------------------- - --------------- - --------------------- ------ ------------ -
在这个示例代码中，我们使用EventSource对象来连接到服务器发送SSE。一旦建立连接，就可以通过onmessage事件来接收从服务器发送的实时数据。
2. 长轮询（Long Polling）
长轮询是Web应用程序中另一种实现实时数据传输的技术。它工作原理与SSE略有不同。在长轮询中，客户端通过创建一个HTTP请求来向服务器查询新数据。服务器不会立即响应请求，而是在有数据可用时立即返回响应。如果服务器在请求的时刻没有新数据可用，它会保持连接，并在数据可用时立即返回新数据。客户端一旦接收到新数据，它会立即再次发起请求以等待下一次数据到达。
下面是一个长轮询的示例代码：
-------- ------------- -
-------------------
-------------- -- ----------------
---------- -- -
--------------------- ---- ---------- ------
--------------
--
------------ -- -
--------------------- -------
--------------
---
-
--------------在这个示例代码中，我们使用Fetch API向服务器发送长轮询请求，一旦收到响应，在接收到数据后立即再次发起请求。
3. 异同点比较
相同点
Server-sent Events和长轮询都是实现Web应用程序实时数据传输的技术。
不同点
实现方式不同
Server-sent Events是基于持久化的HTTP连接实现的，而长轮询则是基于反复发送HTTP请求实现的。
数据传输方式不同
在SSE中，服务器可以不间断地向客户端发送数据，而在长轮询中，客户端必须主动查询服务器以获取新数据。
连接维持方式不同
在SSE中，HTTP连接被保持打开，以便服务器随时发送新的数据。在长轮询中，HTTP连接被关闭，直到数据到达时才重新开启。
4. 指导意义
Server-sent Events和长轮询都是实现实时数据传输的有效技术。选择哪种技术将取决于应用程序的实际需求。如果需要实现实时数据推送，并且对服务器的资源使用不太担心，那么SSE可能是更好的选择。如果需要实现实时数据传输，并且需要保持对服务器的资源消耗最小化，那么长轮询可能是更好的选择。
结论
到此为止，我们已经比较了Server-sent Events和长轮询的异同点，并提供了一些有关这两种技术的示例代码和指导意义。需要根据具体情况来选择最适合的技术，以实现 Web 应用程序中实时数据传输的目的。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670a062bd91dce0dc87ddc58