Servlet 3.0笔记之异步请求Comet推送iFrame示范

huibin

浏览: 750995 次
性别:
来自: 郑州

最近访客更多访客>>

y6cn

allen900625

dameimm

cntip2010

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JSP & Servlet

Comet Servlet Ajax 应用服务器 json

Servlet3规范提出异步请求，绝对是一巨大历史进步。之前各自应用服务器厂商纷纷推出自己的异步请求实现（或者称comet，或者服务器推送支持，或者长连接），诸如Tomcat6中的NIO连接协议支持，Jetty的continuations编程架构，SUN、IBM、BEA等自不用说，商业版的服务器对Comet的支持，自然走在开源应用服务器前面，各自为王，没有一个统一的编程模型，怎一个乱字了得。相关的comet框架也不少，诸如pushlet、DWR、cometd;最近很热HTML5也不甘寂寞，推出WebSocket，只是离现实较远。

总体来说，在JAVA世界，很乱！缺乏规范，没有统一的编程模型，会严重依赖特定服务器，或特定容器。

好在Servlet3具有了异步请求规范，各个应用服务器厂商只需要自行实现即可，这样编写符合规范的异步Servlet代码，不用担心移植了。

现在编写支持comet风格servlet，很简单：

在注解处标记上 asyncSupported = true;
final AsyncContext ac = request.startAsync();

这里设定简单应用环境：一个非常受欢迎博客系统，多人订阅，终端用户仅仅需要访问订阅页面，当后台有新的博客文章提交时，服务器会马上主动推送到客户端，新的内容自动显示在用户的屏幕上。整个过程中，用户仅仅需要打开一次页面（即订阅一次），后台当有新的内容时会主动展示用户浏览器上，不需要刷新什么。下面的示范使用到了iFrame，有关Comet Stream，会在以后展开。有关理论不会在本篇深入讨论，也会在以后讨论。

这个系统需要一个博文内容功能：

新的博文后台处理部分代码：

 protected void doPost(HttpServletRequest request,
   HttpServletResponse response) throws ServletException, IOException {
  MicBlog blog = new MicBlog();

  blog.setAuthor("发布者");
  blog.setId(System.currentTimeMillis());
  blog.setContent(iso2UTF8(request.getParameter("content")));
  blog.setPubDate(new Date());

  // 放到博文队列里面去
  NewBlogListener.BLOG_QUEUE.add(blog);

  request.setAttribute("message", "博文发布成功!");

  request.getRequestDispatcher("/WEB-INF/pages/write.jsp").forward(
    request, response);
 }
 
 private static String iso2UTF8(String str){
  try {
   return new String(str.getBytes("ISO-8859-1"), "UTF-8");
  } catch (UnsupportedEncodingException e) {
   e.printStackTrace();
  }
  return null;
 }

当用户需要订阅博客更新时的界面：

当前页面HTML代码可以说明客户端的一些情况：

<html>
<head>
<title>comet推送测试</title>
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<meta name="author" content="yongboy@gmail.com"/>
<meta name="keywords" content="servlet3, comet, ajax"/>
<meta name="description" content=""/>
<link type="text/css" rel="stylesheet" href="css/main.css"/>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/comet.js"></script>
</head>
<body style="margin: 0; overflow: hidden">
<div id="showDiv" class="inputStyle"></div>
</body>
</html>

id为“showDiv”的div这里作为一个容器，用于组织显示最新的信息。

而客户端逻辑，则在comet.js文件中具体展示了如何和服务器交互的一些细节：

/**
 * 客户端Comet JS 渲染部分 
 * @author yongboy@gmail.com
 * @date 2010-10-18
 * @version 1.0
 */
String.prototype.template=function(){
    var args=arguments;
    return this.replace(/\{(\d+)\}/g, function(m, i){
        return args[i];
    });
}
var html = '<div class="logDiv">'
 + '<div class="contentDiv">{0}</div>'
    + '<div class="tipDiv">last date : {1}</div>'
    + '<div class="clear">&nbsp;</div>'
    + '</div>';

function showContent(json) {
 $("#showDiv").prepend(html.template(json.content, json.date));
}
var server = 'blogpush';
var comet = {  
    connection   : false,  
    iframediv    : false, 
    
    initialize: function() {
        if (navigator.appVersion.indexOf("MSIE") != -1) { 
            comet.connection = new ActiveXObject("htmlfile");  
            comet.connection.open();  
            comet.connection.write("<html>");  
            comet.connection.write("<script>document.domain = '"+document.domain+"'");  
            comet.connection.write("</html>");  
            comet.connection.close();  
            comet.iframediv = comet.connection.createElement("div");  
            comet.connection.appendChild(comet.iframediv);  
            comet.connection.parentWindow.comet = comet;  
            comet.iframediv.innerHTML = "<iframe id='comet_iframe' src='"+server+"'></iframe>";  
        }else if (navigator.appVersion.indexOf("KHTML") != -1 || navigator.userAgent.indexOf('Opera') >= 0) {   
         comet.connection = document.createElement('iframe');  
            comet.connection.setAttribute('id',     'comet_iframe');  
            comet.connection.setAttribute('src',    server);  
            with (comet.connection.style) {  
                position   = "absolute";  
                left       = top   = "-100px";  
                height     = width = "1px";  
                visibility = "hidden";  
            }  
            document.body.appendChild(comet.connection);
        }else {
            comet.connection = document.createElement('iframe');  
            comet.connection.setAttribute('id', 'comet_iframe');  
            with (comet.connection.style) {  
                left       = top   = "-100px";  
                height     = width = "1px";  
                visibility = "hidden";  
                display    = 'none';  
            }  
            comet.iframediv = document.createElement('iframe');
            comet.iframediv.setAttribute('onLoad', 'comet.frameDisconnected()');
            comet.iframediv.setAttribute('src', server);
            comet.connection.appendChild(comet.iframediv);  
            document.body.appendChild(comet.connection);  
        }  
    }, 
    frameDisconnected: function() {
        comet.connection = false;
        $('#comet_iframe').remove();
     //setTimeout("chat.showConnect();",100);
 },
 showMsg:function(data){
  showContent(data);
 },
 timeout:function(){
  var url = server + "?time=" + new Date().getTime();
        if (navigator.appVersion.indexOf("MSIE") != -1) { 
         comet.iframediv.childNodes[0].src = url;
        } else if (navigator.appVersion.indexOf("KHTML") != -1 || navigator.userAgent.indexOf('Opera') >= 0) {   
         document.getElementById("comet_iframe").src = url;
        } else {  
         comet.connection.removeChild(comet.iframediv);
         document.body.removeChild(comet.connection);
            comet.iframediv.setAttribute('src', url);
            comet.connection.appendChild(comet.iframediv);  
            document.body.appendChild(comet.connection);
        }  
 },
    onUnload: function() {  
        if (comet.connection) {  
            comet.connection = false;  
        }
    }
}

if (window.addEventListener) {
    window.addEventListener("load", comet.initialize, false);
    window.addEventListener("unload", comet.onUnload, false);
} else if (window.attachEvent) {
    window.attachEvent("onload", comet.initialize);
    window.attachEvent("onunload", comet.onUnload);
}

需要注意的是comet这个对象在初始化(initialize)和超时(timeout)时的处理方法，能够在IE以及火狐下面表现的完美，不会出现正在加载中标志。当然超时方法(timeout)，是在服务器端通知客户端调用。在Chrome和Opera下面一直有进度条显示，暂时没有找到好的解决办法。

后台处理客户端请求请求代码：

/**
 * 负责客户端的推送
 * @author yongboy  
 * @date 2011-1-13
 * @version 1.0
 */
@WebServlet(urlPatterns = { "/blogpush" }, asyncSupported = true)
public class BlogPushAction extends HttpServlet {
 private static final long serialVersionUID = 8546832356595L;
 private static final Log log = LogFactory.getLog(BlogPushAction.class);

 protected void doGet(HttpServletRequest request,
   HttpServletResponse response) throws ServletException, IOException {

  response.setHeader("Cache-Control", "private");
  response.setHeader("Pragma", "no-cache");
  response.setContentType("text/html;charset=UTF-8");
  response.setCharacterEncoding("UTF-8");
  final PrintWriter writer = response.getWriter();

  // 创建Comet Iframe
  writer.println("<!doctype html public \"-//w3c//dtd html 4.0 transitional//en\">");
  writer.println("<script type=\"text/javascript\">var comet = window.parent.comet;</script>");
  writer.flush();

  final AsyncContext ac = request.startAsync();
  ac.setTimeout(10 * 60 * 1000);// 10分钟时间;tomcat7下默认为10000毫秒

  ac.addListener(new AsyncListener() {
   public void onComplete(AsyncEvent event) throws IOException {
    log.info("the event : " + event.toString()
      + " is complete now !");
    NewBlogListener.ASYNC_AJAX_QUEUE.remove(ac);
   }

   public void onTimeout(AsyncEvent event) throws IOException {
    log.info("the event : " + event.toString()
      + " is timeout now !");

    // 尝试向客户端发送超时方法调用，客户端会再次请求/blogpush，周而复始
    log.info("try to notify the client the connection is timeout now ...");
    String alertStr = "<script type=\"text/javascript\">comet.timeout();</script>";
    writer.println(alertStr);
    writer.flush();
    writer.close();

    NewBlogListener.ASYNC_AJAX_QUEUE.remove(ac);
   }

   public void onError(AsyncEvent event) throws IOException {
    log.info("the event : " + event.toString() + " is error now !");
    NewBlogListener.ASYNC_AJAX_QUEUE.remove(ac);
   }

   public void onStartAsync(AsyncEvent event) throws IOException {
    log.info("the event : " + event.toString()
      + " is Start Async now !");
   }
  });

  NewBlogListener.ASYNC_AJAX_QUEUE.add(ac);
 }
}

每一个请求都需要request.startAsync(request,response)启动异步处理，得到AsyncContext对象，设置超时处理时间（这里设置10分钟时间），注册一个异步监听器。

异步监听器可以在异步请求于启动、完成、超时、错误发生时得到通知，属于事件传递机制，从而更好对资源处理等。

在长连接超时（onTimeout）事件中，服务器会主动通知客户端再次进行请求注册。

若中间客户端非正常关闭，在超时后，服务器端推送数量就减少了无效的连接。在真正应用中，需要寻觅一个较为理想的值，以保证服务器的有效连接数，又不至于浪费多余的连接。

每一个异步请求会被存放在一个高效并发队列中，在一个线程中统一处理，具体逻辑代码：

/**
 * 监听器单独线程推送到客户端
 * @author yongboy  
 * @date 2011-1-13
 * @version 1.0
 */
@WebListener
public class NewBlogListener implements ServletContextListener {
 private static final Log log = LogFactory.getLog(NewBlogListener.class);
 public static final BlockingQueue<MicBlog> BLOG_QUEUE = new LinkedBlockingDeque<MicBlog>();
 public static final Queue<AsyncContext> ASYNC_AJAX_QUEUE = new ConcurrentLinkedQueue<AsyncContext>();
 private static final String TARGET_STRING = "<script type=\"text/javascript\">comet.showMsg(%s);</script>";
 
 private String getFormatContent(MicBlog blog) {
  return String.format(TARGET_STRING, buildJsonString(blog));
 }

 public void contextDestroyed(ServletContextEvent arg0) {
  log.info("context is destroyed!");
 }

 public void contextInitialized(ServletContextEvent servletContextEvent) {
  log.info("context is initialized!");
  // 启动一个线程处理线程队列
  new Thread(runnable).start();
 }

 private Runnable runnable = new Runnable() {
  public void run() {
   boolean isDone = true;

   while (isDone) {
    if (!BLOG_QUEUE.isEmpty()) {
     try {
      log.info("ASYNC_AJAX_QUEUE size : "
        + ASYNC_AJAX_QUEUE.size());
      MicBlog blog = BLOG_QUEUE.take();

      if (ASYNC_AJAX_QUEUE.isEmpty()) {
       continue;
      }

      String targetJSON = getFormatContent(blog);

      for (AsyncContext context : ASYNC_AJAX_QUEUE) {
       if (context == null) {
        log.info("the current ASYNC_AJAX_QUEUE is null now !");
        continue;
       }
       log.info(context.toString());
       PrintWriter out = context.getResponse().getWriter();

       if (out == null) {
        log.info("the current ASYNC_AJAX_QUEUE's PrintWriter is null !");
        continue;
       }

       out.println(targetJSON);
       out.flush();
      }
     } catch (Exception e) {
      e.printStackTrace();
      isDone = false;
     }
    }
   }
  }
 };

 private static String buildJsonString(MicBlog blog) {
  Map<String, Object> info = new HashMap<String, Object>();
  info.put("content", blog.getContent());
  info.put("date",
    DateFormatUtils.format(blog.getPubDate(), "HH:mm:ss SSS"));

  JSONObject jsonObject = JSONObject.fromObject(info);

  return jsonObject.toString();
 }
}