前端面试题——Web应用从服务器主动推送Data到客户端

Web应用从服务器主动推送Data到客户端有哪些方式？

• Ajax轮询，即定期发送请求，获取数据。
• Commet，即基于HTTP长连接的服务器推送技术。
• XHR长轮询，即服务器端定期返回数据，客户端接收数据，并再次发送请求。
• WebSocket，即基于Socket协议实现数据的推送。
• SSE(Server-Send Event)，即允许网页获取来自服务器端的更新。

首先，我得知道轮询是什么？

• 轮询（Polling）是一种CPU决策如何提供周边设备服务的方式，又称“程控输入输出”（Programmed I/O）。轮询法的概念是：由CPU定时发出询问，依序询问每一个周边设备是否需要其服务，有即给予服务，服务结束后再问下一个周边，接着不断周而复始。
• 在web上来说就是客户端一直向服务端发起请求，服务端返回数据，不论返回什么都会再次向服务端发送请求。
• 这样的技术实现容易，但是效率很低。并且当访问量大时，服务器的压力是非常大的。

应用场景

• 在操作浏览器时，点击A页面的一个按钮，要弹出一个空白的B页面，我在A上进行特定操作时，B页面要跳转到A页面中选中的数据的URL所对应的位置。
• 那么弹出一个空页面前端使用
  window.open('/new_window/','_blank')
• B页面跳转：一个iframe标签，然后修改它的src属性。
• 操作A界面B页面监听——轮询

代码实现

<script>
	setInterval("demo()",1000)
	function demo(){
		$.ajax({
			url:'/new_window_url/',
			async:true,
			type:'get',
			success:function(data){
				var new_url = $('new_iframe').attr('src')
				if(new_url !==data){
					$('#new_iframe').attr('src',data)
				}
			}
		})
	}
</script>

setInterval
按照固定的周期去执行一个函数或者计算表达式。在Ajax里有一个参数async，为true时代表了是异步请求，为false时是同步请求会锁住浏览器。

轮询原理：

• 每隔一点时间发一次请求来获取最新数据。
• 定时器发送ajax请求，DOM操作更新页面数据。

缺点

• 对服务器造成的压力比较大，耗费资源
  请求太多太频繁，如果是访问量比较大的网站，就会造成压力
• 会有延迟，数据的实时性不高
  并不是数据刚更新就能拿到更新的数据，需要请求正好能拿到数据
• 数据看起来可能会有紊乱，同一时间你看到的数据和别人不一样
  页面打开，开始计算的请求定时器开始时间不一样，对方拿到的可能是刚刚刷新的数据，而你还没去获取最新数据。

例子：实现一个轮询去拉取数据。(赋予开关能随时暂停，开启)

我的想法是给定时器命名，点击开关的时候先判断有无定时器，有就关闭，没有就开启。

长轮询

长轮询原理：

• 请求进来，有数据就返回，没有就截住(先不把请求响应给前端)，知道有数据或者超时再返回(然后立即再发起一个请求过来)。
• 在前端的表现就是请求处于pending状态。

网页版微信就是利用长轮询实现的：登录微信后会有一个请求发送到后端，一直等待后端返回数据，拿到后端数据之后又立马再发一个请求同样等待数据，就这样不停地等着拿数据，如此往复也就能实现数据的实时获取了。

好处

• 可以降低延迟(设置一个超时时间，在这段时间内，一有数据就返回)
• 减少了一定的请求次数，把单纯依靠请求来获取数据变成等待数据主动返回、超时返回相结合(返回了立即再次发起请求，等着获取最新数据)

缺点

• 对服务器造成的压力依旧比较大，耗费资源。

websocket

websocket原理

• websocket是H5出的一个新协议(请求格式：ws://xxxxx),也是基于TCP/UDP传输的，和HTTP是同层级的协议
• 让客户端与服务端建立长连接

协议规定

• 连接的时候需要握手(是基于HTTP来发起握手的)
• 发送的数据需要加密(根据websocket协议去发送数据)
• 保持连接不断开