Browse Source

fix:优化单聊和群聊的文本、文件、图片消息接收发送

master
qiutianhong 7 months ago
parent
commit
43baedbeed
  1. 5
      frontend/src/components/chat/ChatMessage.vue
  2. 77
      frontend/src/stores/chat.ts
  3. 13
      frontend/vite.config.ts

5
frontend/src/components/chat/ChatMessage.vue

@ -55,11 +55,10 @@
v-else-if="item.content_type == 'image'"
class="chat-item-image"
>
{{ item.message }}
<el-image
fit="cover"
loading="lazy"
:src="store.getImageSrc()"
:src="item.message"
/>
</div>
</div>
@ -260,8 +259,6 @@
}
.chat-item-image {
width: 180px;
height: 180px;
margin: 10px;
}

77
frontend/src/stores/chat.ts

@ -167,6 +167,9 @@ export const useChatStore = defineStore('chatStore', () => {
};
const sendMessage = async (messageType: string) => {
console.log("群聊消息类型", messageType)
if (messageType == 'text') {
await sendTextMessage()
}
@ -211,7 +214,7 @@ export const useChatStore = defineStore('chatStore', () => {
return;
}
Message.message = await getImageSrc(Message.message)
// 封装成消息历史记录
const messageHistory = {
...Message,
@ -572,7 +575,7 @@ export const useChatStore = defineStore('chatStore', () => {
type: data.type,
time: data.time,
userId: data.userId,
message: data.message,
message: await getImageSrc(data.message),
toUserId: data.toUserId,
chatId: data.toUserId,
isMe: false,
@ -585,6 +588,14 @@ export const useChatStore = defineStore('chatStore', () => {
createdAt: Date.now(),
}
if (data.content_type === 'image') {
addMessageHistory.message = await getImageSrc(data.message)
} else if (data.content_type === 'text') {
addMessageHistory.message = data.message
} else if (data.content_type === 'file') {
addMessageHistory.message = data.message
}
await db.addOne("workbenchChatRecord", addMessageHistory)
console.log("添加成功")
@ -824,7 +835,6 @@ export const useChatStore = defineStore('chatStore', () => {
userId: data.userId,
groupId: data.to_groupid,
content_type: data.content_type,
message: data.message,
time: data.time,
type: data.type,
chatId: data.to_groupid,
@ -836,6 +846,14 @@ export const useChatStore = defineStore('chatStore', () => {
createdAt: Date.now(),
};
if (data.content_type === 'image') {
messageRecord.message = await getImageSrc(data.message)
} else if (data.content_type === 'text') {
messageRecord.message = data.message
} else if (data.content_type === 'file') {
messageRecord.message = data.message
}
// 判断当前消息是否是自己发送的
if (messageRecord.userId === userInfo.value.id) {
return;
@ -898,35 +916,30 @@ export const useChatStore = defineStore('chatStore', () => {
};
// 获取图片消息预览
const getImageSrc = async (imageMessage: string = "/C/Users/Desktop/bizhi.png") => {
// const path = userInfo.value.url + "/chat/image/view?path=" + imageMessage
// console.log(path)
// const response = await fetchGet(path)
// if (!response.ok) {
// return ''
// }
// // 检查Content-Type是否为图片
// const contentType = response.headers.get("Content-Type");
// if (!contentType || !contentType.startsWith("image/")) {
// console.error("Expected an image content type, but received:", contentType);
// return '';
// }
// // 将响应数据转换为 Blob
// const imageBlob = await response.blob();
// // 将 Blob 转换为 base64 字符串
// return new Promise((resolve, reject) => {
// const reader = new FileReader();
// reader.onloadend = () => {
// resolve(reader.result); // 返回 base64 字符串
// };
// reader.onerror = reject;
// reader.readAsDataURL(imageBlob);
// });
// 获取图片消息预览
const getImageSrc = async (imageMessage: string) => {
// 确保路径以 '/' 开始
if (!imageMessage.startsWith('/')) {
imageMessage = '/' + imageMessage;
}
console.log("地址:-----------", imageMessage)
const path = userInfo.value.url + "/chat/image/view?path=" + imageMessage;
const response = await fetchGet(path);
if (!response.ok) {
return '';
}
const blob = await response.blob(); // 获取 Blob 对象
return new Promise((resolve) => {
const reader = new FileReader();
reader.onloadend = () => {
const base64data = reader.result; // 转换为 base64
console.log(base64data);
resolve(base64data);
};
reader.readAsDataURL(blob);
});
}
return {

13
frontend/vite.config.ts

@ -1,9 +1,9 @@
import { defineConfig } from "vite";
import path from 'path'
import vue from "@vitejs/plugin-vue";
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path';
import AutoImport from 'unplugin-auto-import/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite';
import { defineConfig } from "vite";
export default defineConfig(async () => ({
@ -24,6 +24,7 @@ export default defineConfig(async () => ({
clearScreen: false,
server: {
host: '0.0.0.0',
port: 8215
},
resolve: {
@ -32,7 +33,7 @@ export default defineConfig(async () => ({
"~": path.resolve(__dirname, 'wailsjs')
},
},
build:{
build: {
sourcemap: true,
// 打包环境移除console.log,debugger
terserOptions: {

Loading…
Cancel
Save