Ajax短轮询，长轮询，SSE(Server Sent Event)轮询 和 websocket轮询

Ajax短轮询，长轮询，SSE(Server Sent Event)轮询 和 websocket轮询

转载于： https://blog.csdn.net/qq_16183731/article/details/88324875

AJAX轮询方式

客服端以用户定义的时间间隔去服务器上查询最新的数据。

• 短轮询，客服端会对服务器在短时间内发送出多个请求。
• 长轮询或者COMET。服务器与客服端需要保持一条长时间的请求，它使得服务器在有数据时可以返回消息给客户端。长轮询在服务器没的返回信息的时候进入等待，减少了普通轮询服务器无数次的空回复。可以这样认为，长轮询使服务器每次的返回更有目的性。
  

前端设置 jsonp 访问，后端不需要设置

response.setHeader("Access-Control-Allow-Origin","*");//允许跨域访问
response.setHeader("Access-Control-Allow-Origin","www.baidu.com");//允许指定域名跨域访问
$.ajax({
	type:"post",
	url:"http://127.0.0.1:8888/ajax",
	async:true,
	data:{
		name:"bulider",
		age:"21"
	},
	dataType:"json",
	//jsonp:"callback",
	timeout:1000,//设置超时时间
	success:function(data){
		console.log(data.id)
		console.log(data)
		sendCycle();
	},
	error:function(data){
		console.log("失败")
		sendCycle();
	}
});

需要后端配合实现的访问方式

        window.onload = function sendCycle(){
				//obj.toJSONString(); 对象转json串
				$.ajax({
					type:"post",
					url:"http://127.0.0.1:8888/ajax",
					async:true,
					data:{
						name:"builder",
						age:"21"
					},
					dataType:"jsonp",
					jsonp:"callback",
					timeout:1000,//设置超时时间
					success:function(data){
						console.log(data.id)
						console.log(data)
						sendCycle();
					},
					error:function(data){
						console.log("失败")
						sendCycle();
					}
				});
			}

实现长轮询

			window.onload = function sendCycle(){
				//obj.toJSONString(); 对象转json串
				$.ajax({
					type:"post",
					url:"http://127.0.0.1:8888/ajax",
					async:true,
					data:{
						name:"wangming",
						age:"18"
					},
					dataType:"json",
					//jsonp:"callback",
					timeout:3000,//设置超时时间
					success:function(data){
						console.log(data.id)
						console.log(data)
						sendCycle();
					},
					error:function(data){
						console.log("<<<<<fail")
						sendCycle();
					}
				});
			}

前端使用定时器实现

	setInterval(sendCycle(),3000);
			
			//window.onload = function sendCycle(){
				function sendCycle(){

				//obj.toJSONString(); 对象转json串
				$.ajax({
					type:"post",
					url:"http://127.0.0.1:8888/ajax",
					async:true,
					data:{
						name:"wangming",
						age:"18"
					},
					dataType:"json",
					//jsonp:"callback",
					timeout:3000,//设置超时时间
					success:function(data){
						console.log(data.id)
						console.log(data)
						sendCycle();
					},
					error:function(data){
						console.log("<<<<<fail")
						sendCycle();
					}
				});
			}

HTTP协议

http 协议是请求/响应范式的，每个 http 响应都对应一个 http 请求，http 协议是无状态的，多个 http 请求之间相互隔离没有关联；

HTTP协议的被动性：

在标准的HTTP请求响应语义中，浏览器发起请求，服务器发送一个响应，这意味着在浏览器发起新请求前，服务器不能发送新信息给客户端浏览器；

HTTP 短轮询

http 短轮询是 server 收到请求 不管是否有数据到达都直接响应http 请求；如果浏览器收到的数据为空，则隔一段时间，浏览器又会发送相同的http请求到server 以获取数据响应；

• 缺点：消息交互的实时性较低（server端到浏览器端的数据反馈效率低）；

HTTP 长轮询

HTTP 长轮询是指server 收到请求后如果有数据，立刻响应请求；如果没有数据 就会 停留 一段时间，这段时间内，如果 server 请求的数据到达，就会立刻响应；如果这段时间过后，还没有数据到达，则以空数据的形式响应http请求；若浏览器收到的数据为空，会再次发送同样的http请求到server服务器；

server 没有数据到达时，HTTP 连接会停留一段时间，这会造成服务器资源浪费；

SSE(Server Sent Event) 实现轮询

Server-Sent是HTML5提出一个标准。由客户端发起与服务器之间创建TCP连接，然后并维持这个连接，直到客户端或服务器中的任何一方断开，ServerSent使用的是"问"+"答"的机制，连接创建后浏览器会周期性地发送消息至服务器询问，是否有自己的消息。

• 特点 客户端只需连接一次，Server就定时推送，除非其中一端断开连接。并且SSE会在连接意外断开时自动重连。
• 缺点：并没有达到最新消息服务器端的实时推送。

    window.onload = function () {
        //双不等号，可以避免为空值的判断
        if (!!window.EventSource) {
            var source = new EventSource("message/get");//请求路径
            //收到服务器消息
            source.onmessage = function (evt) {
                var data = evt.data;
                var arr = data.split(",");
                $.each(arr, function (i, item) {
                    showText(i, item);
                })
            }
            //建立连接
            source.onopen = function (evt) {
                console.log(evt)
                console.log("server connect successed")
            }
            //发送错误
            source.onerror = function (evt) {
                console.log(evt)
                console.log("服务器内部错误")
            }
        } else {
            console.log("你的浏览器不支持sse ")
        }
    }

    //更新信息
    function showText(i, item) {
        $("#message").html(i + item);
    }

WS(WebSocket)-全双工通信

HTML5标准中的一项内容，要求浏览器可以通过JavaScript脚本手动创建一个TCP连接与服务端进行通讯。WebSocket使用了ws和wss协议，需要服务器有与之握手的算法才能将连接打开。即可以满足"问"+"答"的响应机制，也可以实现主动推送的功能。

• 特点: 省流量，客户端什么时候想发就发，服务器端什么时候想回就回，两边都有监听者socket在负责。可以实现服务端消息的实时推送。