Browse Source

1.编辑框优化

2.修复"请求后发先至"导致的消息乱序问题
3.修复几个小bug
master
xsx 2 years ago
parent
commit
9bf4859e94
  1. 2
      im-commom/src/main/java/com/bx/imcommon/mq/RedisMQPullTask.java
  2. 58
      im-uniapp/pages/chat/chat-box.vue
  3. 6
      im-web/src/components/chat/ChatAtBox.vue
  4. 1755
      im-web/src/components/chat/ChatBox.vue
  5. 1220
      im-web/src/components/chat/ChatInput.vue
  6. 20
      im-web/src/components/chat/ChatMessageItem.vue
  7. 14
      im-web/src/view/Home.vue

2
im-commom/src/main/java/com/bx/imcommon/mq/RedisMQPullTask.java

@ -53,6 +53,8 @@ public class RedisMQPullTask implements CommandLineRunner {
List<Object> datas = new LinkedList<>();
try {
if(redisMQTemplate.isClose()){
// 如果redis未初始化或已断开,3s后再重新尝试消费
EXECUTOR.schedule(this, 3, TimeUnit.SECONDS);
return;
}
if (consumer.isReady()) {

58
im-uniapp/pages/chat/chat-box.vue

@ -132,9 +132,10 @@
showRecord: false,
keyboardHeight: 322,
atUserIds: [],
recordText: "",
needScrollToBottom: false, //
showMinIdx: 0 // showMinIdx
showMinIdx: 0, // showMinIdx
reqQueue: [], //
isSending: false //
}
},
methods: {
@ -154,11 +155,7 @@
}
// id
this.fillTargetId(msgInfo, this.chat.targetId);
this.$http({
url: this.messageAction,
method: 'POST',
data: msgInfo
}).then((m) => {
this.sendMessageRequest(msgInfo).then((m) => {
m.selfSend = true;
this.$store.commit("insertMessage", m);
//
@ -278,19 +275,14 @@
receipt: this.isReceipt,
type: 0
}
this.sendText = "";
// id
this.fillTargetId(msgInfo, this.chat.targetId);
this.sendText = "";
this.$http({
url: this.messageAction,
method: 'POST',
data: msgInfo
}).then((m) => {
this.sendMessageRequest(msgInfo).then((m) => {
m.selfSend = true;
this.$store.commit("insertMessage", m);
//
this.moveChatToTop();
this.sendText = "";
}).finally(() => {
//
this.scrollToBottom();
@ -408,11 +400,7 @@
let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
msgInfo.content = JSON.stringify(res.data);
msgInfo.receipt = this.isReceipt
this.$http({
url: this.messageAction,
method: 'POST',
data: msgInfo
}).then((m) => {
this.sendMessageRequest(msgInfo).then((m) => {
msgInfo.loadStatus = 'ok';
msgInfo.id = m.id;
this.isReceipt = false;
@ -463,11 +451,7 @@
let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
msgInfo.content = JSON.stringify(data);
msgInfo.receipt = this.isReceipt
this.$http({
url: this.messageAction,
method: 'POST',
data: msgInfo
}).then((m) => {
this.sendMessageRequest(msgInfo).then((m) => {
msgInfo.loadStatus = 'ok';
msgInfo.id = m.id;
this.isReceipt = false;
@ -632,6 +616,32 @@
let px = info.windowWidth * rpx / 750;
return Math.floor(rpx);
},
sendMessageRequest(msgInfo){
return new Promise((resolve,reject)=>{
// ""
this.reqQueue.push({msgInfo,resolve,reject});
this.processReqQueue();
})
},
processReqQueue(){
if (this.reqQueue.length && !this.isSending) {
this.isSending = true;
const reqData = this.reqQueue.shift();
this.$http({
url: this.messageAction,
method: 'post',
data: reqData.msgInfo
}).then((res)=>{
reqData.resolve(res)
}).catch((e)=>{
reqData.reject(e)
}).finally(()=>{
this.isSending = false;
//
this.processReqQueue();
})
}
},
generateId(){
// id
return String(new Date().getTime()) + String(Math.floor(Math.random() * 1000));

6
im-web/src/components/chat/ChatAtBox.vue

@ -1,5 +1,5 @@
<template>
<el-scrollbar v-show="show" ref="scrollBox" class="group-member-choose"
<el-scrollbar v-show="show&&showMembers.length" ref="scrollBox" class="group-member-choose"
:style="{'left':pos.x+'px','top':pos.y-300+'px'}">
<div v-for="(member,idx) in showMembers" :key="member.id">
<chat-group-member :member="member" :height="40" :active='activeIdx==idx'
@ -56,10 +56,6 @@
}
})
this.activeIdx = this.showMembers.length > 0 ? 0: -1;
console.log(this.showMembers.length)
if(this.showMembers.length == 0){
this.close();
}
},
open(pos) {
this.show = true;

1755
im-web/src/components/chat/ChatBox.vue

File diff suppressed because it is too large

1220
im-web/src/components/chat/ChatInput.vue

File diff suppressed because it is too large

20
im-web/src/components/chat/ChatMessageItem.vue

@ -67,10 +67,8 @@
<span v-if="msgInfo.receiptOk" class="icon iconfont icon-ok" title="全体已读"></span>
<span v-else>{{msgInfo.readedCount}}人已读</span>
</div>
</div>
</div>
</div>
<right-menu v-show="menu && rightMenu.show" :pos="rightMenu.pos" :items="menuItems"
@close="rightMenu.show = false" @select="onSelectMenu"></right-menu>
@ -129,7 +127,6 @@
}
}
}
},
methods: {
onSendFail() {
@ -200,7 +197,7 @@
}
return items;
},
isAction(){
isAction() {
return this.$msgType.isAction(this.msgInfo.type);
},
isNormal() {
@ -280,7 +277,7 @@
position: absolute;
left: -10px;
top: 13px;
z-index: -1;
z-index: -1;
width: 0;
height: 0;
border-style: solid dashed dashed;
@ -409,13 +406,12 @@
}
}
.chat-at-user {
background-color: #4cd964;
padding: 2px 5px;
color: white;
//border: 1px solid #c3c3c3;
border-radius: 3px;
}
.chat-at-user {
padding: 2px 5px;
border-radius: 3px;
font-weight: 600;
cursor: pointer;
}
}
}

14
im-web/src/view/Home.vue

@ -126,16 +126,22 @@
})
},
pullPrivateOfflineMessage(minId) {
this.$store.commit("loadingPrivateMsg", true)
this.$http({
url: "/message/private/pullOfflineMessage?minId=" + minId,
method: 'get'
});
method: 'GET'
}).catch(() => {
this.$store.commit("loadingPrivateMsg", false)
})
},
pullGroupOfflineMessage(minId) {
this.$store.commit("loadingGroupMsg", true)
this.$http({
url: "/message/group/pullOfflineMessage?minId=" + minId,
method: 'get'
});
method: 'GET'
}).catch(() => {
this.$store.commit("loadingGroupMsg", false)
})
},
handlePrivateMessage(msg) {
//

Loading…
Cancel
Save