目前客户端(浏览器)和服务端交互大致有以下几种方式:
1.form表单提交方式,适合访问量不大,对用户体验要求不高的web系统开发,或者页面整体刷新无伤大雅的场合,通信方向是客户端提交给服务端,是客户端主动发起;
2.Ajax方式,特点是用户体验好,无需页面整体刷新,对服务器压力也小,有利于客户端和服务端的解耦,也是目前广为使用的一种客户端服务端交互方式,它也是通过客户端发起请求,服务端接受处理,通信方向和form表单相同;
3.server-sent-event,它是服务端主动向客户端(浏览器)发送数据,客户端监听并接受,然后处理,通信方向也是单向的,但是和上面两种相反,是服务端发起,客户端接受,但是其应用层协议还是基于http的。
4.web socket,这是将以前服务端通信的套接字原理实现在了浏览器上,使得浏览器和服务端可以相互发送消息,通信方向是双向的,只要连接一建立,双方都可以向对方发送数据,无需哪一方先来后来,应用层协议基于WS协议。(这个之前没怎么太深入了解过,只知道有这样的技术)
这里主要实现的是第三种方式,即服务端推送事件,因为是HTML5的新技术所以在很多老版的浏览器中(如IE6-IE8)还不支持,因此应用还不够广泛.直接上代码
JS部分代码:
if(typeof(EventSource)!=="undefined")
{
var source=new EventSource("请求地址");
source.onopen = function(){
}
source.onmessage=function(event) {
var Str=event.data;
console.info(Str);
};
}else{
console.info("浏览器暂不支持推送事件...");
}
代码构造一个eventSource对象,指向一个后台Controller方法,这个对象是HTML5中的服务端推送事件API封装对象,然后添加onmessage事件,
用来监听服务端发送过来的消息,服务端一有消息发送,就会执行这个事件的回调函数,
Java部分代码:
/**
* Html5推送事件
*/
@RequestMapping(value={"请求方法名"},method = { RequestMethod.GET })
@ResponseBody
public void XXX(HttpServletResponse response,HttpServletRequest request){
OutputStream bos = null;
try {
String result = "data:"+"所需要传递的参数"+"\n\n";
//声明浏览器在连接断开之后进行再次连接之前的等待时间 3秒
String retry = "retry:"+3000+"\n\n";
//事件的标识符
String id="id:100\n\n";
//最后一次接收到的事件的标识符
String last = request.getHeader("Last-Event-ID");
bos = new BufferedOutputStream(response.getOutputStream());
response.setContentType("text/event-stream");
bos.write(result.getBytes());
bos.write(retry.getBytes());
bos.write(id.getBytes());
bos.flush();
} catch (IOException e) {
e.printStackTrace();
}finally{
try {
bos.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
通过这种事件推送技术可以实现由服务器一直与前端页面保持通信并传递所需要的数据,而前端页面可根据数据对显示内容作出即时响应,方便用户的操作.如果使用AJAX固定SetTime向后台
发送请求,这样会影响的处理时间和效率,而事件推方式如果服务端收到一些需要通知客户端的信息,那么可以直接发送给客户端,而不必等待其发送请求.