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

不管在何种模式的开发中,经常会遇到“前端数据实时性”的问题。本文将讨论一种“保持前端数据实时性的一种办法”。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>



  • 0
    点赞
  • 2
    收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 3

打赏作者

普通网友

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值