HTML 服务器推送事件 vs 轮询

在本文中，我们将介绍HTML中的两种实时通信方法：服务器推送事件（Server-Sent Events）和轮询（Polling）。这两种方法都可以用于从服务器获取实时数据更新，但它们在实现和性能方面有所区别。

阅读更多：HTML 教程

1. 服务器推送事件（Server-Sent Events）

服务器推送事件是一种HTML5中引入的通信协议，允许服务器在事件流中推送数据到客户端。使用服务器推送事件，客户端只需要建立一次连接，并保持这个连接打开以接收服务器推送的数据。

1.1 实现方法

客户端通过在JavaScript中创建一个EventSource对象来与服务器进行连接。通过指定服务器端的URL作为参数，EventSource对象会自动发起一个HTTP长轮询，以便随时接收服务器发送的数据。

以下是一个简单的使用服务器推送事件的例子：

<script>
  const eventSource = new EventSource("server.php");
  eventSource.onmessage = function(event) {
    console.log("收到服务器发送的消息：", event.data);
  };
</script>

1.2 优点和局限性

优点：
- 实时性好：服务器推送事件是一种实时的通信方式，服务器可以随时将数据推送给客户端，客户端无需主动去请求数据。
- 简单易用：使用服务器推送事件只需要少量的JavaScript代码，非常容易实现。
局限性：
- 兼容性差：服务器推送事件不适用于所有的浏览器，尤其是旧版本的浏览器。
- 单向通信：服务器推送事件只支持服务器向客户端推送数据，不能实现双向通信。

2. 轮询（Polling）

轮询是一种较为传统的实时通信方法，它通过定期向服务器发送AJAX请求来获取最新的数据。

2.1 实现方法

在JavaScript中使用setInterval函数周期性地向服务器发送AJAX请求，获取服务器上的最新数据。以下是一个简单的轮询实现的例子：

<script>
  setInterval(function() {
    fetch("server.php")
      .then(function(response) {
        return response.text();
      })
      .then(function(data) {
        console.log("收到服务器发送的消息：", data);
      });
  }, 1000); // 每隔1秒轮询一次
</script>

2.2 优点和局限性

优点：
- 兼容性好：轮询适用于所有的现代浏览器，并且在旧版本浏览器上也能较好地支持。
- 易于理解：轮询的实现方法相对简单，理解起来比较容易。
局限性：
- 延迟问题：由于轮询需要设置固定的请求间隔，在某些情况下会有较大的延迟，无法做到真正的实时通信。
- 增加服务器压力：轮询会导致频繁地向服务器发送请求，增加服务器的负载。