聊天中撤回消息实现
程序员文章站
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();
}
},
来看看效果
推荐阅读
-
Angularjs中$http以post请求通过消息体传递参数的实现方法
-
python实现文件助手中查看微信撤回消息
-
Python实现微信消息防撤回功能的实例代码
-
聊天机器人如何塑造共享经济?在对话中实现共同繁荣
-
JavaScript实现QQ聊天消息展示和评论提交功能
-
(仿QQ聊天消息列表加载)wp7 listbox 列表项逐一加载的一种实现方式,以及加入渐显动画
-
Java Socket聊天室编程(一)之利用socket实现聊天之消息推送
-
PHP中利用Telegram的接口实现免费的消息通知功能
-
Android在类微信程序中实现蓝牙聊天功能的示例代码
-
iOS开发中实现hook消息机制的方法探究