使用Ajax轮询模拟简单的站内信箱(消息管理)功能
前一段时间项目需要写一个类似于站内信箱的消息管理的功能,由于对前端不是很熟悉,刚开始不知道怎么做,后来看了网上的方案,现模拟一个非常简单的消息管理。 我们首先看一下最终效果的样式,就是非常简单的一个样子,如下所示: 我这边暂时只写了三个类型的消息,订单、上下架、审核。不同的消息推送过来会显示在不同类型上,消息管理上显示的是三种类型的消息总数量。 好,接下来介绍一下代码。首先是数据库的设计,共有七个字段,分别是一个自增字段id,消息类型type,消息标题title,消息具体内容detail,消息状态status,创建时间time以及用户userId。如下所示: 然后我们看推送消息的后台代码PullMsgServlet,分别有四个方法,分别是获取所有消息的历史记录,获取某人的未读消息,获取未读消息的总数,还有获取某种类型的未读消息总数。 1 protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { 2 String operateType = Base64Util.decode(request.getParameter("operateType")); 3 msgDao = new MessageDao(); 4 switch (operateType) { 5 case "showHistory": 6 showHistory(request,response); 7 break; 8 case "showPending": 9 showPending(request,response); 10 break; 11 case "showCount": 12 showCount(request,response); 13 break; 14 case "showCountByType": 15 showCountByType(request,response); 16 break; 17 default: 18 break; 19 } 20 response.setCharacterEncoding("utf-8"); 21 response.setContentType("text/html;charset=UTF-8"); 22 response.getWriter().print(Base64Util.encode(result.toString())); 23 } 24 25 /** 26 * 所有消息的历史记录 27 * @param request 28 * @param response 29 * @throws ServletException 30 * @throws IOException 31 */ 32 private void showHistory(HttpServletRequest request,IOException{ 33 HttpSession session = request.getSession(); 34 userId = session.getAttribute("userId").toString(); 35 List<Object> historyList = msgDao.getMsgByUserId(userId); 36 HttpResultList result = new HttpResultList(); 37 result.setResult(historyList.size()>0); 38 result.setDatas(historyList); 39 } 40 41 /** 42 * 某人的未读消息 43 * @param request 44 * @param response 45 * @throws ServletException 46 * @throws IOException 47 */ 48 private void showPending(HttpServletRequest request,IOException{ 49 HttpSession session = request.getSession(); 50 userId = session.getAttribute("userId").toString(); 51 List<Object> pendingList = msgDao.getUnreadMsg(); 52 HttpResultList result = new HttpResultList(); 53 result.setResult(pendingList.size()>0); 54 result.setDatas(pendingList); 55 } 56 57 /** 58 * 某人未读消息的总数 59 * @param request 60 * @param response 61 * @throws ServletException 62 * @throws IOException 63 */ 64 private void showCount(HttpServletRequest request,IOException{ 65 String number = msgDao.getMsgNum()+""; 66 result = new JSONObject(); 67 result.put("result",number); 68 } 69 70 /** 71 * 某人某种类型的未读消息总数 72 * @param request 73 * @param response 74 * @throws ServletException 75 * @throws IOException 76 */ 77 private void showCountByType(HttpServletRequest request,IOException{ 78 Map<String,Integer> map = msgDao.getTypeNum(); 79 //获得返回的type 80 List<String> keyList = new ArrayList<>(); 81 for (String key : map.keySet()) { 82 keyList.add(key); 83 } 84 //获得返回type的个数 85 List<Integer> valueList = new ArrayList<>(); 86 for (Integer value : map.values()) { 87 valueList.add(value); 88 } 89 result = new JSONObject(); 90 JSONObject content = new JSONObject(); 91 content.put("type",JSONArray.fromObject(keyList)); 92 content.put("typeNum",JSONArray.fromObject(valueList)); 93 result.put("result",content); 94 } 接下来我们看前端代码,这边使用了setInterval定时器,设置的js代码每5秒轮询后台一次,请求后台servlet从数据库里面获取的数据,如下所示: 1 setInterval(function(){ 2 getType(); 3 },5000); 4 5 /** 6 * 得到某个类型的消息数量 7 */ 8 function getType(){ 9 var lis = document.getElementById("type").getElementsByTagName("li"); 10 var msgType = ""; 11 for(var i=0; i<lis.length; i++){ 12 msgType = lis[i].innerText; 13 } 14 $.ajax({ 15 type:"POST",16 url:"PullMsgServlet",17 dataType:‘json‘,18 processData:false,19 data: { 20 operateType: "showCountByType" 21 },22 success:function(data){ 23 var result = data.result; 24 var type = ""; 25 if(result){ 26 for(var i=0; i<result.type.length; i++){ 27 type = result.type[i]; 28 if(type == "订单"){ 29 $("#order").html(result.typeNum[i]); 30 }else if(type == "上下架"){ 31 $("#shelf").html(result.typeNum[i]); 32 }else if(type == "审核"){ 33 $("#review").html(result.typeNum[i]); 34 } 35 } 36 } 37 },38 error: function () { 39 // alert("error..."); 40 } 41 }); 42 } 这样前端每隔5秒就轮询一次PullMsgServlet,查询数据库里是否有未读的消息,如果有,就显示在前端页面上。这样,一个最简单的消息推送以及显示功能就有了,只是我还没有写前端历史列表的查看,等以后写了再更新。。。。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |