2017戛纳电影节 VR设备360度全景呈现的现场细节

轮询意味着客户端和服务器之间的连接将一直进行，查询将定期进行。它的缺点很明显:会有很多连接，一个接受一个发送。而且每次发送请求都会有一个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/>。

//轮询服务器

let express = require(" express ")；

let app = express()；

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

app.get("/clock "，函数(req，res) {

会议结束(新日期()。toLocaleString())；

});

app . listen(8080)；

启动本地服务，打开http://localhost:8080/1.html，得到如下结果:

长轮询是轮询的改进版本。客户端向服务器发送HTTP后，会看看有没有新消息。如果没有新消息，它将等待。当有新消息时，它将被返回给客户端。一定程度上降低了网络带宽和CPU利用率。由于http数据包的报头数据往往很大(通常超过400字节)，而服务器真正需要的数据却很少(有时只有10字节左右)，所以这种数据包在网络上的周期性传输必然会浪费网络带宽。

//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，用于插入信息)，以实时更新页面。

//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，得到如下结果: