輪詢意味著客戶端和服務(wù)器之間的連接將一直進(jìn)行，查詢將定期進(jìn)行。它的缺點(diǎn)很明顯:會有很多連接，一個(gè)接受一個(gè)發(fā)送。而且每次發(fā)送請求都會有一個(gè)Http Header，會消耗流量和CPU利用率。

//1.html

& ltdiv id="clock " >& lt/div>。

& lt>。

讓ClockDiv = document . GetElementbyID(" clock ")；

setInterval(function() {

讓xhr = new()；

xhr.open("GET "，"/clock "，true)；

xhr . onreadystatechange = function(){

if(xhr . ReadyState = = 4 & amp；& ampxhr.status == 200) {

console . log(xhr . responsetext)；

clock div . innerhtml = xhr . responsetext；

}

};

xhr . send()；

}, 1000);

& lt/>。

//輪詢服務(wù)器

let express = require(" express ")；

let app = express()；

app . use(express . static(_ dirname))；

app.get("/clock "，函數(shù)(req，res) {

會議結(jié)束(新日期()。toLocaleString())；

});

app . listen(8080)；

啟動本地服務(wù)，打開http://localhost:8080/1.html，得到如下結(jié)果:

長輪詢是輪詢的改進(jìn)版本?？蛻舳讼蚍?wù)器發(fā)送HTTP后，會看看有沒有新消息。如果沒有新消息，它將等待。當(dāng)有新消息時(shí)，它將被返回給客戶端。一定程度上降低了網(wǎng)絡(luò)帶寬和CPU利用率。由于http數(shù)據(jù)包的報(bào)頭數(shù)據(jù)往往很大(通常超過400字節(jié))，而服務(wù)器真正需要的數(shù)據(jù)卻很少(有時(shí)只有10字節(jié)左右)，所以這種數(shù)據(jù)包在網(wǎng)絡(luò)上的周期性傳輸必然會浪費(fèi)網(wǎng)絡(luò)帶寬。

//2.html服務(wù)器代碼同上

& ltdiv id="clock " >& lt/div>。

& lt>。

讓ClockDiv = document . GetElementbyID(" clock ")；

函數(shù)send() {

讓xhr = new()；

xhr.open("GET "，"/clock "，true)；

xhr.timeout = 2000//超時(shí)，以毫秒為單位

xhr . onreadystatechange = function(){

if (xhr.readyState == 4) {

if (xhr.status == 200) {

//如果返回成功，將顯示結(jié)果

clock div . innerhtml = xhr . responsetext；

}

send()；//無論成功還是失敗，都將發(fā)送下一個(gè)請求

}

};

xhr.ontimeout = function() {

send()；

};

xhr . send()；

}

send()；

& lt/>。

3.iframe流(流)

iframe流模式是在頁面中插入一個(gè)隱藏的iframe，并使用其src屬性在服務(wù)器和客戶端之間創(chuàng)建一個(gè)長連接。服務(wù)器向iframe傳輸數(shù)據(jù)(通常是帶有java的HTML，用于插入信息)，以實(shí)時(shí)更新頁面。

//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 "，函數(shù)(req，res) {

setInterval(function() {

讓日期=新日期()。toLocaleString()；

RES . write(` 0

& lttype="text/java ">。

parent . document . getelementbyid(' clock ')。innerHTML = " $ { date }//更改父窗口的dom元素

& lt/>。

`);

}, 1000);

});

app . listen(8080)；

啟動本地服務(wù)，打開http://localhost:8080/3.html，得到如下結(jié)果: