一、长轮询
长轮询(Long Polling)是一种用于实现实时数据传输的技术。它通过建立持久的连接,使服务器能够即时地将数据发送给客户端,而无需客户端不断地主动发送请求。传统的短轮询(Short Polling)方式中,客户端通过定期发送请求来获取服务器上的最新数据。这样会导致频繁的请求和响应,增加了网络流量和服务器负载,并且延迟较高。
长轮询通过将客户端的请求保持在服务器端,直到有新数据可用或达到一定的超时时间,然后再返回响应给客户端。如果在超时之前有新数据可用,服务器会立即返回响应;如果超过超时时间而没有新数据,则服务器也会返回响应,此时客户端可以再次发起请求
二、长轮询原理
- 客户端发送一个长轮询请求到服务器。
- 服务器接收到请求后,检查是否有新数据可用。
- 如果有新数据可用,则立即返回响应,并将数据包含在响应中。
- 如果没有新数据可用,则将请求保持在服务器上,直到有新数据或达到超时时间。
- 当有新数据可用时,服务器立即返回响应,并将数据包含在响应中。
- 客户端接收到响应后,处理从服务器接收到的数据,并再次发起长轮询请求。
长轮询相比于短轮询的优势在于减少了网络流量和服务器负载,同时也能够实现近实时的数据传输。它特别适用于需要及时获取更新的应用场景,如聊天应用、实时股票报价等
三、长轮询代码
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)
SSE(Server-Sent Events)是一种用于实现服务器向客户端推送实时数据的技术。它基于 HTTP 协议,通过建立持久的单向连接,使服务器能够将实时数据发送给客户端。
SSE 的工作原理如下:
客户端使用EventSource对象与服务器建立连接。
服务器通过该连接将实时数据发送给客户端。
客户端通过监听事件来接收服务器发送过来的数据。
简单来说就是EventSource对象,它是JavaScript中的API,它可以基于事件向服务器建立持久连接,可以轻松简单的实现双向通信,可以通过监听 onopen、onmessage、onerror 和 onclose 事件来处理连接状态和接收服务器发送的事件通知,而无需使用像 WebSocket 这样的全双工协议,它可以帮助我们完成实时通知场景,实时更新、聊天消息、股票行情等
const eventSource = new EventSource('/api/sse');
eventSource.addEventListener('message', event => {
// 处理从服务器接收到的数据
console.log(event.data);
});
eventSource.addEventListener('error', error => {
// 处理错误
console.error('发生错误:', error);
});