使用Ajax轮询模拟简单的站内信箱(消息管理)功能

前一段时间项目需要写一个类似于站内信箱的消息管理的功能，由于对前端不是很熟悉，刚开始不知道怎么做，后来看了网上的方案，现模拟一个非常简单的消息管理。

我们首先看一下最终效果的样式，就是非常简单的一个样子，如下所示：

我这边暂时只写了三个类型的消息，订单、上下架、审核。不同的消息推送过来会显示在不同类型上，消息管理上显示的是三种类型的消息总数量。

好，接下来介绍一下代码。首先是数据库的设计，共有七个字段，分别是一个自增字段id，消息类型type，消息标题title，消息具体内容detail，消息状态status，创建时间time以及用户userId。如下所示：

然后我们看推送消息的后台代码PullMsgServlet，分别有四个方法，分别是获取所有消息的历史记录，获取某人的未读消息，获取未读消息的总数，还有获取某种类型的未读消息总数。

 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         String operateType = Base64Util.decode(request.getParameter("operateType"));
         msgDao = new MessageDao();
         switch (operateType) {
             case "showHistory":
                 showHistory(request, response);
                 break;
             case "showPending":
                 showPending(request, response);
                 break;
             case "showCount":
                 showCount(request,response);
                 break;
             case "showCountByType":
                 showCountByType(request, response);
                 break;
             default:
                 break;
         }
         response.setCharacterEncoding("utf-8");
         response.setContentType("text/html;charset=UTF-8");
         response.getWriter().print(Base64Util.encode(result.toString()));
     }
 
     /**
      * 所有消息的历史记录
      * @param request
      * @param response
      * @throws ServletException
      * @throws IOException
      */
     private void showHistory(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
         HttpSession session = request.getSession();
         userId = session.getAttribute("userId").toString();
         List<Object> historyList = msgDao.getMsgByUserId(userId);
         HttpResultList result = new HttpResultList();
         result.setResult(historyList.size()>0);
         result.setDatas(historyList);
     }
 
     /**
      * 某人的未读消息
      * @param request
      * @param response
      * @throws ServletException
      * @throws IOException
      */
     private void showPending(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
         HttpSession session = request.getSession();
         userId = session.getAttribute("userId").toString();
         List<Object> pendingList = msgDao.getUnreadMsg();
         HttpResultList result = new HttpResultList();
         result.setResult(pendingList.size()>0);
         result.setDatas(pendingList);
     }
 
     /**
      * 某人未读消息的总数
      * @param request
      * @param response
      * @throws ServletException
      * @throws IOException
      */
     private void showCount(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
         String number = msgDao.getMsgNum()+"";
         result = new JSONObject();
         result.put("result", number);
     }
 
     /**
      * 某人某种类型的未读消息总数
      * @param request
      * @param response
      * @throws ServletException
      * @throws IOException
      */
     private void showCountByType(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
         Map<String, Integer> map = msgDao.getTypeNum();
         //获得返回的type
         List<String> keyList = new ArrayList<>();
         for (String key : map.keySet()) {
             keyList.add(key);
         }
         //获得返回type的个数
         List<Integer> valueList = new ArrayList<>();
         for (Integer value : map.values()) {
             valueList.add(value);
         }
         result = new JSONObject();
         JSONObject content = new JSONObject();
         content.put("type", JSONArray.fromObject(keyList));
         content.put("typeNum", JSONArray.fromObject(valueList));
         result.put("result", content);
     }

接下来我们看前端代码，这边使用了setInterval定时器，设置的js代码每５秒轮询后台一次，请求后台servlet从数据库里面获取的数据，如下所示：

 setInterval(function(){
     getType();
 },5000);
 
 /**
  * 得到某个类型的消息数量
  */
 function getType(){
     var lis = document.getElementById("type").getElementsByTagName("li");
     var msgType = "";
     for(var i=0; i<lis.length; i++){
         msgType = lis[i].innerText;
     }
     $.ajax({
         type:"POST",
         url:"PullMsgServlet",
         dataType:'json',
         processData:false,
         data: {
             operateType: "showCountByType"
         },
         success:function(data){
             var result = data.result;
             var type = "";
             if(result){
                 for(var i=0; i<result.type.length; i++){
                     type = result.type[i];
                     if(type == "订单"){
                         $("#order").html(result.typeNum[i]);
                     }else if(type == "上下架"){
                         $("#shelf").html(result.typeNum[i]);
                     }else if(type == "审核"){
                         $("#review").html(result.typeNum[i]);
                     }
                 }
             }
         },
         error: function () {
             // alert("error...");
         }
     });
 }

这样前端每隔５秒就轮询一次PullMsgServlet，查询数据库里是否有未读的消息，如果有，就显示在前端页面上。这样，一个最简单的消息推送以及显示功能就有了，只是我还没有写前端历史列表的查看，等以后写了再更新。。。。