-
普通轮询
poll_ajax_origin.png
客户端的每一个请求都是基于XmlHttpRequest异步请求对象。客户端每隔s秒之后，请求一次服务器端，然后客户端对服务器端的数据进行解析和渲染。客户端不断对服务器端进行请求（轮询），不管有没有数据，都必须进行返回。这样的方式固然有优势，但是缺点就是：造成服务器的压力非常大，而且由信息返回的时候还好，当服务器端没有数据的时候，依旧响应客户端（常理看来，很没有必要）。
普通轮询的前端代码实例：
<script type="text/javascript">
var xmlHttpRequest = new XMLHttpRequest();
function sendAsyncInfo(){
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
var data = xmlHttpRequest.responseText;
if(!(data == null || "" == data.trim())){
var ele = document.createElement("p");
ele.innerHTML = data;
document.getElementById("newInfo").appendChild(ele);
}
}
}
xmlHttpRequest.open("get","http://localhost:9090/lp",true);
xmlHttpRequest.send();
}
//每隔1s，请求一次服务器端
window.setInterval(sendAsyncInfo,1000);
</script>
普通轮询的后台服务器（servlet）代码实例：
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
int number = new Random().nextInt(10);
if(number > 2 && number < 5){
//模拟有新的数据出现
out.println(new Date() + ":您有新的信息出现");
}
}
-
长轮询
poll_ajax_long.png
客户端请求服务器端，客户端采用XmlHttpRequest对象进行请求。客户端每隔s秒钟进行请求服务器端一次（每请求一次，建立一个XmlHttpRequest对象）。请求服务器时，如果服务器端没有数据，则服务器端抓住这个Http连接，等服务器端有数据的时候再进行返回。而如果服务器端有数据，直接响应客户端，将数据返回，此时Http连接断开。
解释：每请求一次，建立一个XmlHttpRequest对象？
- 如果每请求一次，都是基于同一个XmlHttpRequest对象。比如，a时刻，向服务器端发送请求s1，此时服务器端没有数据，那么客户端一直等待服务器端响应。b时刻，此时，s1请求没有得到响应（服务器端依旧没有新的数据），那么循环发起请求s2，因为请求都是建立在同一个XmlHttpRequest对象上，因此刚才的请求s1就会被停止掉。
- 如果每请求一次，同时创建一个XmlHttpRequest对象。比如，a时刻，向服务器端发送请求s1，此时服务器端没有数据，那么客户端一直等待服务器端响应。b时刻，此时，s1请求没有得到响应（服务器端依旧没有新的数据），那么循环发起请求s2，s1和s2都是建立在不同的XmlHttpRequest对象上，因此s1和s2请求互不干扰，s1继续等待服务器端响应，s2开始请求服务器端数据。
长轮询的前端代码实例：
<script type="text/javascript">
function sendAsyncInfo(){
console.log("invoke");
//每请求一次创建一个XmlHttpRequest对象
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
var data = xmlHttpRequest.responseText;
if(!(data == null || "" == data.trim())){
var ele = document.createElement("p");
ele.innerHTML = data;
document.getElementById("newInfo").appendChild(ele);
}
}
}
xmlHttpRequest.open("post","http://localhost:9090/lp",true);
xmlHttpRequest.send();
}
//每隔1s，请求服务器端接口数据
window.setInterval(sendAsyncInfo,1000);
</script>
长轮询的后台代码实例：
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("开始新一轮的请求:");
//设置响应内容的编码格式
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
//模拟服务器一直在查找新的数据
while(true){
int number = new Random().nextInt(10);
if(number == 6){
//模拟有新的数据出现
break;
}
else{
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
out.println(new Date() + ":您有新的信息出现");
}
-
EventSource 推送（ajax普通轮询）
eventSource_poll.png
处理过程：
客户端建立EventSource对象，对服务器通过http协议不断进行请求。服务器对客户端的响应数据格式有四部分构成，event，data，id，空格行。客户端接收到服务器端的响应数据之后，根据event事件值，找到EventSource对象对应的事件监听器。
- 例如，event值为load，那么客户端收到响应数据之后，解析到event值为load。客户端为EventSource对象添加该事件的监听器，
EventSource.onLoad = function(){ //处理服务器端的响应数据 }或者
EventSource.addEventListener("load",function(){ //处理服务器端的响应数据 })。 - EventSource有三个默认的监听器，分别监听open，message，error事件。客户端和服务器端进行连接时，将会触发open事件，执行
EventSource.onOpen = function(){}或者EventSource.addEventListener("open",function(){ })。对于message事件，当服务器端响应的数据没有指定事件类型时，将会默认触发客户端的message事件。 - 服务器端响应的报文数据中，id 表示事件event的id，用户可以自定义。并且响应的类型为
text/event-stream类型。
EventSource推送的前端代码实例：
<script type="text/javascript">
if(window.EventSource){
var eventSource = new EventSource("http://localhost:9090/sse");
//只要和服务器连接，就会触发open事件
eventSource.addEventListener("open",function(){
console.log("和服务器建立连接");
});
//处理服务器响应报文中的load事件
eventSource.addEventListener("load",function(e){
console.log("服务器发送给客户端的数据为:" + e.data);
});
//如果服务器响应报文中没有指明事件，默认触发message事件
eventSource.addEventListener("message",function(e){
console.log("服务器发送给客户端的数据为:" + e.data);
});
//发生错误，则会触发error事件
eventSource.addEventListener("error",function(e){
console.log("服务器发送给客户端的数据为:" + e.data);
});
}
else{
console.log("服务器不支持EvenSource对象");
}
</script>
EventSource推送的后台代码实例：
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//媒体类型为 text/event-stream
response.setContentType("text/event-stream");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
//响应报文格式为:
//data:Hello World
//event:load
//id:140312
//换行符(/r/n)
out.println("data:Hello World");
out.println("event:load");
out.println("id:140312");
out.println();
out.flush();
out.close();
}
EventSource对象实现推送的请求和响应报文：
- 请求报文
request.png
- 响应报文头部
response_header.png
- 响应报文数据部分
response_data.png
网友评论