从长轮询到 WebSocket：服务端向 Web 前端推送消息的演进之路

在现代 Web 应用中，服务端向 Web 前端推送消息是一种常见的需求。从最早的短轮询到如今流行的 WebSocket，推送技术一直在不断演进，以满足不同应用场景的需求。本文将带领大家从长轮询开始，逐步了解各种推送技术及其优缺点，并通过示例代码进行演示。

**长轮询** 

长轮询是一种最简单、最古老的推送技术。它通过让浏览器发起一个 HTTP 请求，并在服务端一直等待响应来实现。当服务端有新的数据时，它将立即向浏览器发送响应，浏览器收到响应后，即可更新页面。

长轮询的优点是实现简单，不需要额外的技术支持。缺点是，它会占用服务器资源，并且在网络延迟较大的情况下，会导致页面更新延迟。

**SSE** 

SSE（Server-Sent Events）是一种基于 HTTP 的推送技术。它允许服务端通过 HTTP 协议向浏览器发送事件。浏览器收到事件后，即可更新页面。

SSE 的优点是实现简单，并且不需要额外的技术支持。缺点是，它只能在支持 SSE 的浏览器中使用。

**WebSocket** 

WebSocket是一种双向通信的推送技术。它通过在浏览器和服务端之间建立一个 WebSocket 连接，来实现双向通信。这样，服务端可以随时向浏览器发送消息，浏览器也可以随时向服务端发送消息。

WebSocket 的优点是，它可以实现双向通信，并且延迟很低。缺点是，它需要额外的技术支持，并且在某些浏览器中可能无法使用。

**iFrame** 

iFrame是一种嵌入其他网页的 HTML 元素。它可以用来在当前页面中嵌入另一个网页。服务端可以通过向 iFrame 中的页面发送消息，来实现向 Web 前端推送消息。

iFrame 的优点是实现简单，并且可以在所有浏览器中使用。缺点是，它可能会影响页面的布局和美观。

**总结** 

以上就是服务端向 Web 前端推送消息的四种常见技术。每种技术都有其优缺点，需要根据实际应用场景来选择合适的技术。

**示例代码** 

以下是如何使用 JavaScript 实现长轮询的示例代码：

```javascript
function longPolling() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/long-polling', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      var data = JSON.parse(xhr.responseText);
      // 更新页面
    }
  };
  xhr.send();
}

setInterval(longPolling, 1000);

以下是如何使用 JavaScript 实现 SSE 的示例代码：

var eventSource = new EventSource('/sse');
eventSource.onmessage = function(e) {
  var data = JSON.parse(e.data);
  // 更新页面
};

以下是如何使用 JavaScript 实现 WebSocket 的示例代码：

var websocket = new WebSocket('ws://localhost:8080/websocket');
websocket.onopen = function() {
  // 连接已建立
};
websocket.onmessage = function(e) {
  var data = JSON.parse(e.data);
  // 更新页面
};
websocket.onclose = function() {
  // 连接已关闭
};
websocket.send('Hello, world!');

以下是如何使用 iFrame 实现服务端向 Web 前端推送消息的示例代码：

<iframe src="/iframe"></iframe>

// 服务端代码
function iframePushMessage(message) {
  var iframe = document.getElementById('iframe');
  iframe.contentWindow.postMessage(message, '*');
}

// Web 前端代码
window.addEventListener('message', function(e) {
  var data = e.data;
  // 更新页面
});

希望本文能够帮助大家了解服务端向 Web 前端推送消息的演进之路，以及如何使用不同的技术来实现推送功能。