实际应用中经常会有实现页面无刷新更新内容的需求。本文就轮询、长轮询、SSE(Server Sent Event)和WS(WebSocket)介绍具体的应用场景。
相关知识点:es6 API、nodejs、html5
文章结构:
轮询
长轮询
SSE(Server Sent Event)
WS(WebSocket)
1. 轮询-数据拉取
轮询是在特定的的时间间隔(如每隔1秒),由浏览器(客户端)对服务器发出HTTP request,然后由服务器返回最新的数据给客户端的浏览器。不管服务端数据有没有变化,客户端都会发起请求,来获取数据。
特点:客户端主动向服务器请求数据,服务器被动推送消息。
缺点:浏览器需要不断的向服务器发出请求,然而HTTP request 的header是非常长的,里面包含的有用数据可能只是一个很小的值,这样会占用很多的带宽,造成资源浪费。同时也不能保证及时更新最新信息。
// 客户端
// 1、原生js操作
var xhr = new XMLHttpRequest();
setInterval(() => {
xhr.open('GET', '/user');
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
console.log(xhr.response);
}
};
xhr.send();
}, 10