标签:comet servlet iframe stream long-polling
在浏览网页的时候,如果有新的消息,如何接收到?HTTP协议不能由服务器主动给客户端发送消息。
1、刷微博、逛论坛贴吧,想看最新的信息怎么办?F5刷新一下就OK了!
2、上面一种方式是被动的,如果用户不去刷新页面,就看不到消息。如何让服务器主动推送消息给客户端浏览器,一种方式是用setInterval来Ajax定时刷新。
这样一来,刷新操作不是由用户来操作,而是由浏览器去自动发起请求,用户无法察觉到,给用户的感觉就是服务器主动推送消息给用户。
实际上这种方式很简单也很实用,服务器不用对这种请求做特殊的处理(Comet方式就需要服务器特殊处理了),所以也经常被使用。
但是对于某些消息通知,实时性很重要。比如游戏,一秒钟能砍出好几刀甚至直接被带走了。再比如星爷《少林足球》中,人家一秒钟几十万上下。
这种方式的消息推送,服务端有消息并不能立即通知给客户端,必须要等到Ajax下一次请求才能返回给客户端。那么问题来了:两次请求的间隔时间设成多少合适。设置的间隔时间太短,老是发出HTTP请求占客户端和服务器网速和性能,间隔时间长了,客户端消息通知不及时。
而对于一些网站的消息通知,人家可能一两天才能收到一个消息,那么后台一直定时在刷新的话也是白刷,浪费资源。
3、游戏、聊天室、股票等经常用到服务器推送的应用中,通常才会用Comet。Comet实际上是一种HTTP长连接,这点与普通的HTTP有点不一样,普通的HTTP连接是客户端发送一个请求,服务器立马给出响应,然后连接立即关闭。而Comet是客户端发出HTTP请求,服务器不会立马给出响应,而是阻塞住,直到有消息需要发送给客户端的时候才给出响应。
服务器没有立即返回响应,这种情况一般会发生在网速不好或者服务器性能差的情况下,也就是浏览器打开一个网页会转圈圈转很久。Comet和这个类似,但是它不是网速不好或者服务器性能差引起的,而是服务器故意去等待的。
Comet有以下几种实现方式:
1、长轮询(long-polling)
用JS发送Ajax请求,但是服务器不会立马响应,直到服务器有消息给客户端时再响应,响应完成后连接关闭,客户端立即再次发送请求,等待响应。
下面是个DEMO:
前端页面:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript"> function getMsg() { // 请求地址是CometServlet对应的URL,加上一个随机值参数防止缓存问题 var url = "comet" + "?t="+Math.random(); var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (request.readyState == 4) { if (request.status == 200) { if (request.responseText) { // 追加到HTML中 document.body.innerHTML += request.responseText; } } // Ajax完成后,再次Ajax请求 getMsg(); } }; request.open("GET", url, true); request.send(); } window.onload = getMsg; </script> </head> <body> </body> </html>后台Servlet:
public class CometServlet extends HttpServlet { @Override public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException { // 这里用Thread.sleep来模拟comet,相当于每隔5秒服务器向客户端推送一条消息 try { Thread.sleep(5000); } catch (InterruptedException e) { e.printStackTrace(); } PrintWriter out = response.getWriter(); out.println("helloworld<br>"); } }在浏览器中打开html页面,可以看到每隔5秒服务器向客户端推送一个helloworld字符串。而接收到字符串HTTP连接就断开了,然后Ajax再立即发出请求等待服务器的下次响应。
2、流(streaming)
和上面long-polling不同的是,服务器发完消息后,不会关闭连接,而是保持HTTP连接继续等待下一条消息。这样客户端不用每次收到消息连接关闭后再次请求。
这种方式的原理是HTTP协议响应头的一个Header:Transfer-Encoding: chunked。普通的HTTP响应头中会有Content-Length表示整个响应的字节大小,浏览器接收到所有的响应数据才会加载内容。而设置Transfer-Encoding: chunked后表示响应大小不固定,浏览器接收到一点响应数据就加载一点。
基于流的Comet后台实现是一样的,但是前端会有几种不同的方式:
2.1、iframe流
基于streaming的Comet的一种前端实现方式是在HTML中加入一个隐藏的iframe,iframe的src设置成CometServlet的地址。而服务器有新消息的话就写一个script标签到这个iframe中,包含一段Javascript,浏览器加载完成这段JS就会运行JS脚本,通过JS代码来控制添加HTML。
前端页面:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript"> // 向HTML追加message,这个函数是给服务器向iframe中添加的javascript脚本调用 function addMsg(msg) { var msgElement = document.getElementById("msg"); msgElement.innerHTML += msg; } </script> </head> <body> <!-- 隐藏的iframe,src设置成CometServlet地址,用于加载服务器推送的JS脚本 --> <iframe id="iframe" style="display: none;" src="comet"></iframe> <div id="msg"></div> </body> </html>
后台Servlet:
public class CometServlet extends HttpServlet { @Override public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException { PrintWriter out = response.getWriter(); // 由于浏览器原因(FireFox、IE有这个问题,Chrome正常),接收到的数据不会立即输出到页面上。这里首先输入长度大于1024的字符串。 StringBuilder sb = new StringBuilder(); for(int i = 0; i < 1024; i++) { sb.append(‘a‘); } out.println("<!-- " + sb.toString() + " -->"); // 注意加上HTML注释 out.flush(); while(true) { // 这里用Thread.sleep来模拟comet,相当于每隔5秒服务器向客户端推送一条消息 try { Thread.sleep(5000); } catch (InterruptedException e) { e.printStackTrace(); } // 每隔5秒写一段js到iframe中,去调用parent的addMsg函数,向HTML添加内容 out.println("<script>parent.addMsg(‘helloworld<br>‘)</script>"); out.flush(); // 这里一定要flush,否则数据不发送 } } }我在测试过程中发现FireFox、IE这些浏览器接收到服务器的响应并不会立即加载,浏览器相当于有个缓存,当达到一定的大小才会去加载。经测试FireFox就是1024字节,所以我在Servlet推送消息前先向响应中写一个大于1024字节的字符串来避免浏览器不及时加载的问题。Chrome没有这个问题。
基于iframe的流方式有个小问题就是,由于iframe一直没有加载完成,处于连接状态,所有浏览器的进度会一直显示未完成,就是一直在转圈。
2.2、针对FireFox的方式
在FireFox中支持Ajax的readyState为3时获取request.responseText,也就是请求未完成就能获取到部分响应数据。这种方式对IE等其他浏览器不支持。
前端页面:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript"> function getMsg() { // 请求地址是CometServlet对应的URL,加上一个随机值参数防止缓存问题 var url = "comet" + "?t="+Math.random(); var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (request.readyState == 3) { if (request.responseText) { // 注意这里不再是追加HTML,responseText包含之前的所有消息 document.body.innerHTML = request.responseText; } } }; request.open("GET", url, true); request.send(); } window.onload = getMsg; </script> </head> <body> </body> </html>后台Servlet:
public class CometServlet extends HttpServlet { @Override public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException { PrintWriter out = response.getWriter(); while(true) { // 这里用Thread.sleep来模拟comet,相当于每隔5秒服务器向客户端推送一条消息 try { Thread.sleep(5000); } catch (InterruptedException e) { e.printStackTrace(); } out.println("helloworld<br>"); out.flush(); // 这里一定要flush,否则数据不发送 } } }
最后说明一下,本文中的后台Java代码,只是用来学习和演示Comet,实际是不能用的。后台只是简单的sleep没有任何功能不说,由于Comet用的是HTTP长连接,当客户端关闭后服务器还在阻塞,Servlet并没有停掉,这是很危险的。而Tomcat、Jetty都有针对Comet技术的成熟的方案可以使用,我在后续博文中也会继续介绍。
作者:叉叉哥 转载请注明出处:http://blog.csdn.net/xiao__gui/article/details/38331225
Comet入门及最简单的Java Demo,布布扣,bubuko.com
标签:comet servlet iframe stream long-polling
原文地址:http://blog.csdn.net/xiao__gui/article/details/38331225