不管在何种模式的开发中,经常会遇到“前端数据实时性”的问题。本文将讨论一种“保持前端数据实时性的一种办法”。js异步轮询。
1:首先分析一下这个问题:
数据实时性,你也许会说,如果用户能够每一秒都刷新一下页面,不就实时了?对的。只要每隔多长时间请求一下服务器,就能保证前端数据的实时性。
那为什么“服务器总是这么被动的等着被访问呢”?
这个问题是关键:因为http协议是请求-响应式的。服务器端不会“主动的向客户端发数据”,所以,当服务器有最新数据的时候,无法告知前端,从而前端的数据无法实时。
所以,我们至少有两种方式来解决这个问题:
第一,前端去请求服务器,获取最新数据。
第二,服务器发现有最新数据时,主动发送给客户端。
2:分析一下【1】中的两种方法:
第一种方法,其实就是“前端轮询”,前端每隔多长时间去请求一下最新数据。
第二种方法,其实底层已经不再使用http协议了,改用socket协议了。
分析两者,前者,由于频繁访问服务器,期间创建http请求,DNS解析,服务器处理等过程不断重复,浪费服务器资源。
后者就明显更好。基于socket的长连接,避免了多次请求所产生的其他额外资源浪费,更加高效和安全。
本文将对前者进行一个实现,并给出简单实例。后期会对后者进行说明。
3:假设一个业务逻辑。
“保证前端数据实时性”,OK,那就拿服务器时间来说吧。前端实时获取服务器时间。
4:实例:
<?php
echo date('Y-m-d H:i:s', time());
?>
<html>
<head>
<title>Async Event Loop</title>
</head>
<body>
</body>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript">
setInterval(function(){
$.ajax({
url : '',
type : 'post',
success : function(data){
$('body').html(data);
}
});
},1000);
</script>
</html>