加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-16 03:02:59 所属栏目:百科 来源:网络整理
导读:前一段时间项目需要写一个类似于站内信箱的消息管理的功能,由于对前端不是很熟悉,刚开始不知道怎么做,后来看了网上的方案,现模拟一个非常简单的消息管理。 我们首先看一下最终效果的样式,就是非常简单的一个样子,如下所示: 我这边暂时只写了三个类型

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

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

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

好,接下来介绍一下代码。首先是数据库的设计,共有七个字段,分别是一个自增字段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,查询数据库里是否有未读的消息,如果有,就显示在前端页面上。这样,一个最简单的消息推送以及显示功能就有了,只是我还没有写前端历史列表的查看,等以后写了再更新。。。。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读