长轮询是轮询的改进版本。客户端向服务器发送HTTP后,会看看有没有新消息。如果没有新消息,它将等待。当有新消息时,它将被返回给客户端。一定程度上降低了网络带宽和CPU利用率。由于http数据包的报头数据往往很大(通常超过400字节),而服务器真正需要的数据却很少(有时只有10字节左右),所以这种数据包在网络上的周期性传输必然会浪费网络带宽。
优点:比 Polling 做了优化,有较好的时效性缺点:保持连接会消耗资源; 服务器没有返回有效数据,程序超时。//2.html服务器代码同上
& ltdiv id="clock " >& lt/div>。
& lt>。
让ClockDiv = document . GetElementbyID(" clock ");
函数send() {
让xhr = new();
xhr.open("GET ","/clock ",true);
xhr.timeout = 2000//超时,以毫秒为单位
xhr . onreadystatechange = function(){
if (xhr.readyState == 4) {
if (xhr.status == 200) {
//如果返回成功,将显示结果
clock div . innerhtml = xhr . responsetext;
}
send();//无论成功还是失败,都将发送下一个请求
}
};
xhr.ontimeout = function() {
send();
};
xhr . send();
}
send();
& lt/>。
3.iframe流(流)
iframe流模式是在页面中插入一个隐藏的iframe,并使用其src属性在服务器和客户端之间创建一个长连接。服务器向iframe传输数据(通常是带有java的HTML,用于插入信息),以实时更新页面。
优点:消息能够实时到达;浏览器兼容好缺点:服务器维护一个长连接会增加开销;IE、chrome、Firefox 会显示加载没有完成,图标会不停旋转。//3.html
& ltbody>。
& ltdiv id="clock " >& lt/div>。
& ltiframe src = "/clock " style = " display:none " & gt。& lt/iframe>。
& lt/body>。
//iframe流
let express = require(" express ");
let app = express();
app . use(express . static(_ dirname));
app.get("/clock ",函数(req,res) {
setInterval(function() {
让日期=新日期()。toLocaleString();
RES . write(` 0
& lttype="text/java ">。
parent . document . getelementbyid(' clock ')。innerHTML = " $ { date }//更改父窗口的dom元素
& lt/>。
`);
}, 1000);
});
app . listen(8080);
启动本地服务,打开http://localhost:8080/3.html,得到如下结果: