Web即时通信技术 -- 短轮询

原理

• 客户端向服务器端发送一个请求，服务器返回数据，然后客户端根据服务器端返回的数据进行处理；
• 客户端继续向服务器端发送请求，继续重复以上的步骤，如果不想给服务器端太大的压力，一般情况下会设置一个请求的时间间隔。

优缺点

优点：不需要额外的开发成本，请求数据，解析数据，作出响应，仅此而已，然后不断重复。

缺点：

• 不断的发送和关闭请求，对服务器的压力会比较大，因为本身开启Http连接就是一件比较消耗资源的事情；
• 轮询的时间间隔不好控制。如果要求的实时性比较高，显然使用短轮询会有明显的短板，如果设置interval的间隔过长，会导致消息延迟，而如果太短，会对服务器产生压力。

客户端实现

<!--轮循 polling -->  
<div id="clock"></div>  
<script>    
    let clock = document.getElementById('clock')    
    setInterval(() => {      
        let xhr = new XMLHttpRequest;      
        xhr.open('get','/clock',true)      
        xhr.onreadystatechange = function() {        
            if(xhr.readyState === 4 && xhr.status === 200) {          
                clock.innerText = xhr.responseText          
            }           
        }      
        xhr.send()    
    }, 1000);
</script>

服务器端实现 

let express = require('express')
let app = express()
app.use(express.static(__dirname))
app.get('/clock',function(req,res) {  
    res.send(new Date().toLocaleString())
})
app.listen(3000)

运行效果

 参考代码：GitHub - liu-zq/ShortPollingExamples