HTML 5 服务器发送事件 java实例

页面代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML 5 服务器发送事件</title>

	</head>

	<body>
				<h1>获得服务器更新</h1>
				<div id="result"></div>
				
				<script>
				if(typeof(EventSource)!=="undefined")
				  {
						  var source=new EventSource("/test/getDate.json");
						  source.onopen = function(){
							  
						  }
						  source.onmessage=function(event) {
							
						    	document.getElementById("result").innerHTML+=event.data + "<br />";
						   };
				  }else{
				  		document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";
				  }
				</script>
	</body>
</html>

后台java代码:

@RequestMapping("getDate.json")  
	public void getDate(HttpServletResponse response,HttpServletRequest request){
		
		    Date date = new Date();
		    OutputStream bos = null;
	        try {
	        	String result = "data:"+111+"\n\n";
	        	String result2 = "data:"+222+"\n\n";
	        	//声明浏览器在连接断开之后进行再次连接之前的等待时间 10秒
	        	String retry = "retry:"+10000+"\n\n";
	        	//事件的标识符
	        	String id="id:100\n\n";
	        	//最后一次接收到的事件的标识符
	        	String last = request.getHeader("Last-Event-ID");
	        	logger.info(last);
				bos = new BufferedOutputStream(response.getOutputStream());
		        response.setContentType("text/event-stream");
		        bos.write(result.getBytes());
		        bos.write(result2.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();
				}
			}
	    
	}

HTML 5 服务器发送事件 java实例_第1张图片

你可能感兴趣的:(HTML 5 服务器发送事件 java实例)