欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

聊天中撤回消息实现

程序员文章站 2022-06-06 08:05:18
...

需求:撤回消息

思路

  • 鼠标右键弹出 撤回 按钮
  • 点击撤回按钮,拿到当前选中消息id,遍历消息列表拿到消息相关数据,主要是拿到用户名
  • 通过接口撤回当前消息
  • 在撤回成功回调中重新更新列表数据
  • 到这里,有两个办法更新列表 办法一、可以通过http刷新消息列表
    办法二、也可以遍历本地消息,用元素替换掉当前消息即可
    办法二效果肯定好一些,毕竟不需要等http回调

一、鼠标右键弹出 撤回 按钮

消息列表

 <li class="tal" v-for="(item,index) in showMesDatas"                                        @contextmenu.prevent="rightMessageClick(item.mid,item.uid)"
 </li>

右击事件,追加撤回按钮

    //右击事件处理
      rightMessageClick(msgId, uid) {
        console.log('右击事件');
        this.withdrawMessageSmgId = msgId; //保存消息id
        if (uid === this.user.userId) {
          this.setMsg(msgId);
        } else {
          return;
        }
      },
      //撤回,删除,取消
      handelBackEvent(e, msgId) {
        let thisId = e.target.id;
        switch (thisId) {
          case 'delMsg': //删除消息
            this.delMsg(msgId);
            break;

          case 'withdrawMessage'://撤回消息
            this.withdrawMessage(msgId);

            break;
          case 'cancelBack'://取消
            $('#backMsg').remove();
            console.log('cancelBack');
            break;

        }
      },
      setMsg(num) {
        $('#backMsg').remove();
        var backMsghtml = '<div id="backMsg" style="position: relative;z-index: 99;margin-right: 15%;">' +
            '<span  id="delMsg" style="font-size: 5px;padding: 0;cursor:pointer ;">删除</span>' +
            '<span  id="withdrawMessage" style="font-size: 5px;padding: 0;cursor:pointer ;margin: auto 2px">撤回</span>' +
            '<span  id="cancelBack" style="font-size: 5px;padding: 0;cursor:pointer ;">取消</span>' +
            '</div>';
        $('#msg' + num).append(backMsghtml);

      },

二、撤回消息,界面处理注意

let rspOBJ = DispatchmessageCtrl.backMsg(MsgIndex, TargetType, TargetInfo);这是通过websocket处理撤回

我们主要做的是删除消息,追加 let htmld = ' <div class="msgDrowBackContent" style="text-align: center">' + '<div><p></p></div><div>' + msgInfo.una + '撤回了一条消息' + '</div>'; $('#msg' + msgId).append(htmld);

   //撤回消息
      withdrawMessage(msgId) {
        if (msgId != null && msgId != '') {
          function findshowMes(findshowMesDatas) {
            for (let i = 0; i < findshowMesDatas.length; i++) {
              if (findshowMesDatas[i].mid == msgId) {
                var msgInfo = findshowMesDatas[i];
                return msgInfo;
                break;
              }
            }
          }
          let msgInfo = findshowMes(this.showMesDatas);
          var MsgIndex;//消息编号
          var TargetType;//对象类型	Int	0-终端 1-群组 2-调度员 3-临时组
          var TargetInfo = {};//对象信息
          if (msgInfo.gid === 0) {
            MsgIndex = msgInfo.mid;
            TargetType = 0;
            TargetInfo = {
              UserID: msgInfo.uid,
              UserNumber: this.conversationNumber,
              UserName: msgInfo.una,
            };
          } else {
            MsgIndex = msgInfo.mid;
            TargetType = 1;
            TargetInfo = {
              GroupID: msgInfo.gid,
              GroupNumber: this.conversationNumber,
              GroupName: msgInfo.gna,
            };
          }
          let rspOBJ = DispatchmessageCtrl.backMsg(MsgIndex, TargetType, TargetInfo);
          if (rspOBJ === 0) {
            // Dispatchmessage.backMsg(TargetInfo)      //处理消息撤回后的界面
            let deleteMesDatas = this.showMesDatas;
            let htmld = ' <div class="msgDrowBackContent" style="text-align: center">' +
                '<div><p></p></div><div>' + msgInfo.una + '撤回了一条消息' + '</div>';
            $('#msg' + msgId).append(htmld);
            for (let i = 0; i < deleteMesDatas.length; i++) {
              if (JSON.stringify(deleteMesDatas[i]).indexOf(JSON.stringify(msgId)) != -1) {
                deleteMesDatas.splice(i, 1);
                console.log(deleteMesDatas);
                this.withdrawMessageShow = false;
                this.showMesDatas = deleteMesDatas;
                // this.getTalkHistorys();
                $('#backMsg').remove();
                break;
              }
            }
          } else {
            // Dispatchmessage.backMsg(-1)
            // 失败后的处理,参数传入-1
            this.withdrawMessageShow = false;
            this.$message.warning('撤回失败');
            $('#backMsg').remove();
          }
        } else {
          $('#backMsg').remove();
        }

      },

来看看效果

聊天中撤回消息实现
聊天中撤回消息实现