前端开发者需要选择一种适合其应用程序的数据推送技术。本文将介绍三种常见的数据推送技术：Server-Sent Events（SSE）、WebSocket 和 Long Polling，并对它们进行比较。
Server-Sent Events
Server-Sent Events (SSE) 是 HTML5 提供的一种客户端/服务器通信协议，它允许服务器通过单向连接向客户端推送事件流。 SSE 可以轻松地从 Web 服务器中获取更新，而无需使用 Ajax 或定期轮询。以下是 SSE 的基本工作原理：
- 客户端在服务器上打开一个链接并获取一个事件流。
- 一旦有消息到达服务器，它就会被推送到客户端，直到连接关闭或超时。
由于 SSE 是基于 HTTP 协议的，因此它利用了已经存在的Web基础架构。在服务器和客户端之间建立和维护连接比 WebSocket 更简单，SSE 可以与代理服务器一起使用，并且不需要握手过程。
以下是一个 SSE 示例代码片段：
const eventSource = new EventSource('/sse');
eventSource.onmessage = function(event) {
console.log("Received message: " + event.data);
};WebSocket
WebSocket 是一种双向通信协议，在客户端和服务器之间实现全双工通信，可以独立于HTTP之外工作。客户端和服务器可以在任何时候向对方发送数据。以下是 WebSocket 的工作原理：
- 客户端发出初始 HTTP 请求并升级到 WebSocket 协议。
- WebSocket 连接保持活动状态，并允许双向通信。
- 一旦连接关闭，客户端和服务器都可以将协议降级回 HTTP。
WebSocket 可以使实时通信更加容易和可靠，适用于需要频繁更新的应用程序。它的主要缺点是需要额外的服务器资源来维护长期连接。WebSocket 还可能受到防火墙和代理服务器的限制。
以下是一个 WebSocket 示例代码片段：
const webSocket = new WebSocket("ws://localhost:8080/websocket");
webSocket.onmessage = function(event) {
console.log("Received message: " + event.data);
};Long Polling
Long Polling 是指客户端向服务器发出请求并等待响应，即使没有供返回的新数据。如果服务器有更新，就会立即返回数据，否则请求将保持打开状态，直到服务器有数据可返回或超时。以下是 Long Polling 的工作原理：
- 客户端向服务器发出一个长轮询请求。
- 如果有新数据，则服务器响应包含此数据的长JSON文本。
- 如果没有新数据，则服务器什么也不做，直到请求超时并被关闭。
Long polling 与 SSE 和 WebSocket 相比需要更多的服务器和客户端资源。长轮询可以被认为是一种“模拟”实时通信的方案。
以下是一个 Long Polling 示例代码片段：
-- -------------------- ---- -------
-------- ------------- -
------------------------ -- -
-- ------------- -
------------------------- -- -
--------------------- ----- - - ----------------------
---
-
--------------
-------------- -- -
---------------------
--------------
---
--
-----------------------比较
SSE、WebSocket 和 Long Polling 都是可行的数据推送技术，有各自的特点和限制。下表总结了这些技术的最重要的区别：
| 技术 | SSE | WebSocket | Long Polling |
|---|---|---|---|
| 传输协议 | HTTP | 独立于HTTP 客户端 |
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651b878b95b1f8cacd32db18