layim的websocket消息撤回功能實現

原創 jkxqj 2018-08-22 03:54

我的大概思路就是，前端根據選取的內容獲得他的cid，我的cid是js生成的uuid，
然後：1、通過websocket廣播給對應的人 去刪除localstorage裏的緩存，
2、ajax異步請求刪除數據庫裏的數據記錄
3、如果對方此時也打開了聊天面板就要用jquery找到那條消息然後remove。

由於目前發現layim3.6版本並沒有給自己發的消息賦值data-cid,所以實現起來比較麻煩。
首先如果你的layim和我一樣嵌入到很多頁面使用的話，你需要找到一個公共的head.jsp或者menu.jsp去存放uuid的值。如下

<input type="hidden" value="" id="uuid">

然後修改layim.js源碼如下
在末尾加入一個生成uuid的函數

  , guid=function() {
        var s = [];
        var hexDigits = "0123456789abcdef";
        for (var i = 0; i < 36; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
        s[8] = s[13] = s[18] = s[23] = "-";
        var uuid = s.join("");
        return uuid;
    }
  ;

修改發送消息的部分代碼如下

  //發送消息
  var sendMessage = function(){
    var uuid=guid();
    $("#uuid").val(uuid);
    var data = {
      username: cache.mine ? cache.mine.username : '訪客'
      ,avatar: cache.mine ? cache.mine.avatar : (layui.cache.dir+'css/pc/layim/skin/logo.jpg')
      ,id: cache.mine ? cache.mine.id : null
      ,cid: $("#uuid").val()
      ,mine: true
    };

實現撤回消息的核心代碼如下

$("body").on("mousedown",".layim-chat-mine>.layim-chat-text",function(e){
        if(e.which == 3){
            var cid =$(e.target).parent().data("cid")==undefined?$(e.target).parent().parent().data("cid"):$(e.target).parent().data("cid");
            var msgDom=$(".layim-chat-mine[data-cid='"+cid+"']")
            var time= msgDom.find("i").html();  //消息發佈時間字符串
            var now=new Date();   //當前時間
            var msgTime = new Date(Date.parse(time.replace(/-/g,"/")));      //消息發佈時間轉換成Date格式
            console.log(now+"---"+msgTime);
            if((now - msgTime)/60000 < 2){    //只能撤回2分鐘內的消息
                layer.confirm('確定要撤回消息嗎?', {icon: 3, title:'提示'}, function(index){
                    //console.log(cid);
                    // var windowName=msgDom.find(".layim-chat-other>img").attr("class");
                    var windowName =$(e.target).parent().parent().parent().find(".layim-chat-other>img").attr("class")==undefined?$(e.target).parent().parent().parent().parent().find(".layim-chat-other>img").attr("class"):$(e.target).parent().parent().parent().find(".layim-chat-other>img").attr("class");
                    //console.log(windowName);
                    var arr=windowName.split(" ");
                    var localIndex = arr[0].substring(6,windowName.length);  
                    //console.log(localIndex);
                    var cache =  layui.layim.cache();
                    var local = layui.data('layim')[cache.mine.id];     //獲取當前用戶本地數據
                    //console.log(JSON.stringify(local));
                    var s=local.chatlog[localIndex];
                    //console.log(JSON.stringify(s));
                    var type=s[0].type;
                    var toId=s[0].id;
                    $.post("api/friend/delMsgFromMongoByCid",{"cid":cid,"type":type},function(res){
                        console.log(res);
                    })
                    console.log(type);
                    var array=[];
                    $.each(s,function(k,v){
                        if(v.cid!=cid){
                            array.push(v);
                        }
                    });
                    local.chatlog[localIndex]=array;
                    //向localStorage同步數據
                    layui.data('layim', {
                      key: cache.mine.id
                      ,value: local
                    });
                    //console.log(local.chatlog[localIndex])
                if(type=='friend'){
                        var obj={
                               "mine":{
                                   "id":userId        
                                 },   
                                 "to":{
                                   "type":"delMsg", 
                                   "cid":cid,
                                   "id":toId,
                                   "toType":type
                                 }
                               };
                        ws.send(JSON.stringify(obj));
                 }else{
                       $.post("api/qun/getSimpleMemberByGroupId?groupId="+toId,function(res){
                           console.log(res);
                            if(res!=null){
                               var obj1={
                                       "mine":{
                                           "id":userId        
                                         },   
                                         "to":{
                                           "type":"delMsg", 
                                           "cid":cid,
                                           "id":toId,
                                           "toType":type,
                                           "memberList":res
                                         }
                               }
                              ws.send(JSON.stringify(obj1));    //發送消息倒Socket服務
                            }
                       })
                 }
                    $(e.target).parent().remove(); 
                    layer.close(index);
                });
            }else{
                layer.msg("超過2分鐘的消息無法撤回！",{time:1000});
            }
        }
    });

禁用瀏覽器默認右鍵菜單

document.oncontextmenu=function(ev){
    return false;    //屏蔽右鍵菜單
}

接收撤銷的websocket消息的代碼如下

   ws.onmessage = function (event) {    //如果獲取到消息，心跳檢測重置
        heartCheck.reset().start();      //拿到任何消息都說明當前連接是正常的
        console.log("llws收到消息啦:" +event.data);
        if(event.data!='pong'){
            var obj=eval("("+event.data+")");
            layui.use(['layim'], function(layim){
                if(obj.type=="onlineStatus"){
                    layim.setFriendStatus(obj.id, obj.content);
                }else if(obj.type=="friend" || obj.type=="group"){
                    layim.getMessage(obj);  
                }else if(obj.type=="delMsg"){
                    var cid =obj.cid;
                    var type=obj.toType;
                    var toId=obj.toId;
                    var uId=obj.userId;
                    //console.log(cid);
                    $(".layim-chat-main li[data-cid='"+cid+"']").remove();
                    var cache =  layui.layim.cache();
                    var local = layui.data('layim')[cache.mine.id];     //獲取當前用戶本地數據
                    //console.log(JSON.stringify(local));
                    var localIndex="";
                    if(type=='friend'){
                        localIndex=type+uId;    
                    }else{
                        localIndex=type+toId;
                    }
                    //console.log(localIndex);
                    var s=local.chatlog[localIndex];
                    //console.log(JSON.stringify(s));
                    var array=[];
                    $.each(s,function(k,v){
                        if(v.cid!=cid){
                            array.push(v);
                        }
                    });
                    local.chatlog[localIndex]=array;
                    //向localStorage同步數據
                    layui.data('layim', {
                      key: cache.mine.id
                      ,value: local
                    }); 

                }
            });
        }
    };

java服務端代碼如下

if(type.equals("delMsg")){
               String toType=jsonObject.getJSONObject("to").getString("toType");
               String toId=jsonObject.getJSONObject("to").getString("id");
               String cid=jsonObject.getJSONObject("to").getString("cid");
               String userId=jsonObject.getJSONObject("mine").getString("id");
               JSONObject toMessage=new JSONObject();
               toMessage.put("cid",cid); 
               toMessage.put("userId",userId); 
               toMessage.put("toType",toType);
               toMessage.put("toId",toId);
               toMessage.put("type","delMsg");
               if(toType!=null && toId!=null && cid!=null){
                   switch (toType) {
                    case "friend":                                       //單聊撤回
                          if(mapUS.containsKey(toId+"")){               //如果在線，及時推送撤回消息
                             mapUS.get(toId+"").getAsyncRemote().sendText(toMessage.toString());               //發送消息給對方
                             System.out.println("撤回單聊-來自客戶端的消息:" + toMessage.toString()); 
                          }/*else{                                        //如果不在線 就直接把redis裏的那條記錄幹掉
                              // 如果是離線用戶,刪除保存到redis的數據
                                List<Object> redisLogList = RedisUtils.getObjList(toId+"_msg");
                                  for (int i=0;i<redisLogList.size();i++){
                                      Object o = redisLogList.get(i);
                                      String s = o.toString();
                                      if (s.indexOf(cid) > -1){
                                          RedisUtils.removeOneOfList(toId+"_msg", o);
                                          break;
                                      }
                                  }
                          }*/
                        break;
                    case "fankui":                                          //家長與老師反饋消息撤回
                          if(mapUS.containsKey(toId+"")){                  //如果在線，及時推送撤回消息
                              mapUS.get(toId+"").getAsyncRemote().sendText(toMessage.toString());         //發送消息給對方
                              System.out.println("撤回反饋-來自客戶端的消息:" + toMessage.toString()); 
                          }/*else{
                              // 如果是離線用戶,刪除保存到redis的數據
                                List<Object> redisLogList = RedisUtils.getObjList(toId+"_msg");
                                  for (Object o : redisLogList){
                                      String s = o.toString();
                                      if (s.indexOf(cid) > -1){
                                          RedisUtils.removeOneOfList(toId+"_msg", o);
                                          break;
                                      }
                                  } 
                          }*/
                        break;
                    case "group":
                            //JSONArray memberList=JSONArray.fromObject(llClient.getGroupUser(Integer.parseInt(toId)));  //獲取羣成員userId列表
                            JSONArray memberList=jsonObject.getJSONObject("to").getJSONArray("memberList");
                            if(memberList.size()>0){              
                                for(int i=0;i<memberList.size();i++){                            //發送到在線用戶(除了發送者)
                                    if(mapUS.containsKey(memberList.get(i)) && !memberList.get(i).equals(jsonObject.getJSONObject("mine").getInt("id")+"")){
                                      session=mapUS.get(memberList.get(i));
                                      session.getAsyncRemote().sendText(toMessage.toString());
                                      System.out.println("撤回羣聊-來自客戶端的消息:" + toMessage.toString()); 
                                    }/*else if(memberList.get(i).equals(jsonObject.getJSONObject("mine").getInt("id")+"")){
                                                 //如果是發送者自己，不做任何操作。
                                    }else{      //如果是離線用戶,數據存到redis待用戶上線後推送。
                                          List<Object> redisLogList = RedisUtils.getObjList(memberList.get(i) + "_msg");
                                          for (Object o : redisLogList){
                                              String s = o.toString();
                                              if (s.indexOf(cid) > -1){
                                                  RedisUtils.removeOneOfList(memberList.get(i) + "_msg", o);
                                                  break;
                                              }
                                          }
                                    }*/
                                }
                            }
                        break;
                    default:
                        break;
             } 
           }

分享完畢，有問題可以聯繫qq：1434262447，加我時備註一下

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

websocket

congwa2015 2019-02-22 23:54:21

[x-webkit-deflate-frame] is not supported]

hi_nohup 2019-02-22 23:06:14

WebSocket 教程

qq582092a40b5ce 2019-02-22 22:42:36

WebSocket

kangyunqiang 2019-02-22 22:15:14

java ssm 後臺框架平臺 項目源碼 websocket 即時通訊 IM quartz spri

m17173821854 2019-02-22 22:07:50

Activiti 工作流項目源碼 代碼生成器 websocket即時通訊 有手機端

17015565998 2019-02-22 21:40:21

websocket

lianhuayu420 2019-02-22 20:36:26

從構建分佈式秒殺系統聊聊WebSocket推送通知

小柒2015 2019-02-22 20:09:41

Nginx配置websocket的反向代理

songfasong 2019-02-22 19:41:54

淺談websocket

負重前行 2019-02-22 19:37:20

HTML5 WebSocket 技術介紹

Khufly 2019-02-22 17:54:36

windows下使用redis，Redis入門使用，Redis基礎命令

rr57d8b304c52a3 2019-02-22 17:34:54

WebSocket 是什麼原理？爲什麼可以實現持久連接？

xiaogong1688 2019-02-22 17:14:16

nginx websocket配置

hexuyong 2019-02-22 16:01:06

Java SPI機制簡介

rr57faf513d7b0b 2019-02-22 13:15:50