保证前端数据实时性 --- js异步轮询

来源：互联网发布：制作动漫人物的软件编辑：程序博客网时间：2024/06/06 15:36

不管在何种模式的开发中，经常会遇到“前端数据实时性”的问题。本文将讨论一种“保持前端数据实时性的一种办法”。js异步轮询。

1：首先分析一下这个问题：

数据实时性，你也许会说，如果用户能够每一秒都刷新一下页面，不就实时了？对的。只要每隔多长时间请求一下服务器，就能保证前端数据的实时性。

那为什么“服务器总是这么被动的等着被访问呢”？

这个问题是关键：因为http协议是请求-响应式的。服务器端不会“主动的向客户端发数据”，所以，当服务器有最新数据的时候，无法告知前端，从而前端的数据无法实时。

所以，我们至少有两种方式来解决这个问题：

第一，前端去请求服务器，获取最新数据。

第二，服务器发现有最新数据时，主动发送给客户端。

2：分析一下【1】中的两种方法：

第一种方法，其实就是“前端轮询”，前端每隔多长时间去请求一下最新数据。

第二种方法，其实底层已经不再使用http协议了，改用socket协议了。

分析两者，前者，由于频繁访问服务器，期间创建http请求，DNS解析，服务器处理等过程不断重复，浪费服务器资源。

后者就明显更好。基于socket的长连接，避免了多次请求所产生的其他额外资源浪费，更加高效和安全。

本文将对前者进行一个实现，并给出简单实例。后期会对后者进行说明。

3：假设一个业务逻辑。

“保证前端数据实时性”，OK，那就拿服务器时间来说吧。前端实时获取服务器时间。

4：实例：

<?phpecho 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>

0 0