使用fetch和sse两种方式做长轮询

一、长轮询

        长轮询（Long Polling）是一种用于实现实时数据传输的技术。它通过建立持久的连接，使服务器能够即时地将数据发送给客户端，而无需客户端不断地主动发送请求。传统的短轮询（Short Polling）方式中，客户端通过定期发送请求来获取服务器上的最新数据。这样会导致频繁的请求和响应，增加了网络流量和服务器负载，并且延迟较高。

        长轮询通过将客户端的请求保持在服务器端，直到有新数据可用或达到一定的超时时间，然后再返回响应给客户端。如果在超时之前有新数据可用，服务器会立即返回响应；如果超过超时时间而没有新数据，则服务器也会返回响应，此时客户端可以再次发起请求。

        你可以使用 Fetch API 或 Server-Sent Events (SSE) 来实现长轮询。

二、长轮询的原理

          长轮询的工作原理如下

1. 客户端发送一个长轮询请求到服务器。
2. 服务器接收到请求后，检查是否有新数据可用。
3. 如果有新数据可用，则立即返回响应，并将数据包含在响应中。
4. 如果没有新数据可用，则将请求保持在服务器上，直到有新数据或达到超时时间。
5. 当有新数据可用时，服务器立即返回响应，并将数据包含在响应中。
6. 客户端接收到响应后，处理从服务器接收到的数据，并再次发起长轮询请求。

        长轮询相比于短轮询的优势在于减少了网络流量和服务器负载，同时也能够实现近实时的数据传输。它特别适用于需要及时获取更新的应用场景，如聊天应用、实时股票报价等。

三、长轮询的基础代码

        1.使用 Fetch API：

function longPolling() {
  fetch('/api/long-polling')
    .then(response => response.json())
    .then(data => {
      // 处理从服务器接收到的数据
      console.log(data);

      // 继续进行下一次长轮询
      longPolling();
    })
    .catch(error => {
      // 处理错误
      console.error('发生错误:', error);

      // 继续进行下一次长轮询
      longPolling();
    });
}

// 开始长轮询
longPolling();

        2.使用 Server-Sent Events (SSE)

const eventSource = new EventSource('/api/sse');

eventSource.addEventListener('message', event => {
  // 处理从服务器接收到的数据
  console.log(event.data);
});

eventSource.addEventListener('error', error => {
  // 处理错误
  console.error('发生错误:', error);
});

四、简单介绍一下SSE

        SSE（Server-Sent Events）是一种用于实现服务器向客户端推送实时数据的技术。它基于 HTTP 协议，通过建立持久的单向连接，使服务器能够将实时数据发送给客户端。

SSE 的工作原理如下：

1. 客户端使用EventSource对象与服务器建立连接。
2. 服务器通过该连接将实时数据发送给客户端。
3. 客户端通过监听事件来接收服务器发送过来的数据。

简单来说就是EventSource对象,它是JavaScript中的API，它可以基于事件向服务器建立持久连接，可以轻松简单的实现双向通信，可以通过监听 onopen、onmessage、onerror 和 onclose 事件来处理连接状态和接收服务器发送的事件通知，而无需使用像 WebSocket 这样的全双工协议，它可以帮助我们完成实时通知场景，实时更新、聊天消息、股票行情等