diff --git a/src/pages/index/ChatPage.vue b/src/pages/index/ChatPage.vue index 964bf1c..441d9ba 100644 --- a/src/pages/index/ChatPage.vue +++ b/src/pages/index/ChatPage.vue @@ -231,8 +231,7 @@ import { import { connectWebSocket, sendWebSocketMessage, - closeWebSocket, - // getWebSocket + closeWebSocket } from "@/utils/websocket"; export default { @@ -418,6 +417,7 @@ export default { // 新消息 const newMessage = { type: "sendMessage", + messageId: Date.now() + "-" + Math.random().toString(36).slice(2), senderName: this.currentUser.username, receiverName: this.currentContact.contactName, content: content, @@ -429,6 +429,7 @@ export default { this.contactMessages.push({ ...newMessage, from: "me", + createdAt: newMessage.createdAt, time: newMessage.createdAt, }); @@ -439,6 +440,7 @@ export default { newMessage ); console.log("contactMessages:" + this.contactMessages); + // 清空输入框 this.messageText = ""; this.$nextTick(() => { @@ -486,8 +488,10 @@ export default { } }, + // 监听websocket连接成功事件 websocketOnOpen() {}, + // 监听websocket接收消息事件 websocketOnMessage(data) { // 格式如下: // { @@ -501,37 +505,51 @@ export default { // } // } - if (data.type !== "newMessage") { - return; - } + // 当接收到新消息的时候,对消息显示进行处理,同时需要给websocket回一个ack确认收到的消息 + if (data.type == "newMessage") { + const message = data.message; + const senderName = message.senderName; - const message = data.message; - const senderName = message.senderName; + const currentContactName = + this.currentContact && this.currentContact.contactName; - const currentContactName = - this.currentContact && this.currentContact.contactName; - - // 是当前聊天联系人 - if (senderName === currentContactName) { - this.contactMessages.push({ - ...message, - from: "other", - time: message.createdAt, + // 是当前聊天联系人 + if (senderName === currentContactName) { + this.contactMessages.push({ + ...message, + from: "other", + time: message.createdAt, + }); + } else { + // 不是当前联系人,不加入 contactMessages,只更新最近聊天列表、未读数量 + this.updateRecentChat("receive", senderName, message); + } + + // 返回 ACK + sendWebSocketMessage({ + type: "ack", + messageId: message.messageId + }); + this.$nextTick(() => { + this.scrollToBottom(); + }); + } else if (data.type == "sendError") { + this.$message.error("发送失败,请重试"); + this.$nextTick(() => { + this.scrollToBottom(); }); } else { - // 不是当前联系人,不加入 contactMessages,只更新最近聊天列表、未读数量 - this.updateRecentChat("receive", senderName, message); + return; } - this.$nextTick(() => { - this.scrollToBottom(); - }); }, + // 监听websocket连接报错事件 websocketOnErr() { this.$message.error("网络连接失败,请重试"); this.logout(); }, + // 创建websocket createWebsocket() { const token = this.$store.state.token; const jwtToken = token.replace("Bearer ", "");