在前端开发中，实时交互是非常重要的一部分。在 Web 应用程序中，实时交互通常通过长轮询和 Server-Sent Events（SSE）来实现。这两种技术都可以让服务器实时向客户端推送数据，但是它们之间有很大的区别。本文将探讨长轮询和 SSE 的优缺点，并分析哪种技术更适合您的应用程序。
长轮询
长轮询是一种在客户端和服务器之间建立持久连接的技术。当客户端发起请求时，服务器会保持连接打开，直到有新的数据可用。当数据可用时，服务器会将数据推送到客户端，并关闭连接。然后，客户端会立即再次发起请求，以便服务器可以再次保持连接，等待新的数据到达。
长轮询的优点是可以实时推送数据到客户端。它的缺点是它需要频繁地打开和关闭连接，这可能会导致服务器上的资源消耗过多。此外，长轮询也可能会导致延迟，因为客户端必须等待服务器上的数据可用。
以下是使用长轮询的示例代码：
-- -------------------- ---- -------
-------- ------------- -
--------
----- ------
---- --------
------ -----
------ ------
-------- ------
-------- -------------- -
-- ----
--------------
--
------ ------------------------ ----------- ------------ -
-- ----
----------------------- ------
-
---
-这段代码使用 jQuery 的 AJAX 方法实现长轮询。它会向服务器发起 GET 请求，并在成功时调用回调函数。如果发生错误，它会等待 5 秒后再次尝试。
Server-Sent Events（SSE）
SSE 是一种在客户端和服务器之间建立持久连接的技术。与长轮询不同，SSE 只需打开一个连接，并将数据作为文本流发送到客户端。客户端可以通过监听 message 事件来接收数据。
SSE 的优点是它只需要一个连接，因此可以减少服务器上的资源消耗。它还可以实时推送数据到客户端，而不需要等待服务器上的数据可用。它的缺点是它只能发送文本数据，因此如果您需要发送二进制数据，则需要使用其他技术。
以下是使用 SSE 的示例代码：
-- -------------------- ---- ------- ----- ----------- - --- --------------------- --------------------- - --------------- - -- ---- -- ------------------- - --------------- - -- ---- --
这段代码创建了一个 SSE 连接，并在接收到数据时调用回调函数。如果发生错误，它会调用另一个回调函数。
哪种技术更好
长轮询和 SSE 都有其优点和缺点。长轮询适用于需要向客户端推送二进制数据的应用程序，因为它可以使用 AJAX 和 WebSocket 等技术来发送和接收数据。但是，如果您需要实时推送数据并且希望减少服务器上的资源消耗，则应使用 SSE。
总之，选择长轮询还是 SSE 取决于您的应用程序的需求。如果您需要发送二进制数据或您的应用程序需要频繁打开和关闭连接，则应选择长轮询。如果您需要实时推送数据并且希望减少服务器上的资源消耗，则应选择 SSE。
结论
长轮询和 SSE 都是实现实时交互的有效技术。它们之间的区别在于长轮询需要频繁打开和关闭连接，而 SSE 只需要一个连接。选择哪种技术取决于您的应用程序的需求。无论您选择哪种技术，都应该考虑服务器上的资源消耗，并确保您的应用程序能够处理错误和超时。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67334e090bc820c58241a191