今天想用EvevtSource 做一个文件导入的功能,因为文件导入后台处理需要花较长的时间,
并且不可预估,普通ajax请求就一定会超时,因为页面长时间无法响应。EventSource客户端接收到
服务器端的响应数据之后,根据event事件值,找到EventSource对象对应的事件监听器。
EventSource推送的前端代码实例:
<script type="text/javascript">
window.onload = function() {
var btn = document.querySelector('#essBtn');
btn.addEventListener('click', function(){
console.log("开始", window.EventSource);
if (window.EventSource) {
var eventSource = new EventSource("/api/ops/tickets/importCSVfile?url=http://172.30.0.182:7500/v1/tfs/T2UzdTB7Aj1RCvBVdK");
//只要和服务器连接,就会触发open事件
eventSource.addEventListener("open", function(e) {
console.log("和服务器建立连接");
document.getElementById("pid").innerHtml = e.data;
});
//处理服务器响应报文中的load事件
eventSource.addEventListener("load", function(e) {
console.log("服务器发送给客户端的数据为:" + e.data);
document.getElementById("pid").innerHTML = e.data;
eventSource.close();
});
//如果服务器响应报文中没有指明事件,默认触发message事件
eventSource.addEventListener("message", function(e) {
console.log("服务器发送给客户端的数据为:" + e.data);
document.getElementById("pid").innerHTML = e.data;
});
//发生错误,则会触发error事件
eventSource.addEventListener("error", function(e) {
console.log("服务器发送给客户端的数据为:" + e.data);
document.getElementById("pid").innerHTML = e.data;
});
} else {
console.log("服务器不支持EvenSource对象");
}
},false);
}
</script>
EventSource推送的后台代码(java需要把任务异步化,目前没有到有用的解决方案):
public void eventSource(HttpServletRequest request,
HttpServletResponse response) throws IOException,
InterruptedException {
String url = request.getParameter("url");
if (StringUtil.isNotEmpty(url)) {
response.setContentType("text/event-stream");
response.setCharacterEncoding("UTF-8");
response.setStatus(200);
PrintWriter pw = response.getWriter();
pw.println("event:open");
pw.println("data:我已经连接上了");
pw.println("id:140312");
pw.println("\n");
pw.println("event:message");
pw.println("data:还活着不要急!");
pw.println("id:140313");
pw.println("\n");
int sum = 0;
// sum = importCVSFileUtil(url);
if (sum == 0) {
Thread.sleep(5000);// 模拟阻塞
pw.println("event:load");
pw.println("data:我已经完成" + sum + "条数据的导入啦!byebye");
pw.println("id:140314");
pw.println("\n");
}
pw.flush();
pw.close();
}
}
网友评论