From be621e9ae279ee01620ee8e622e436808e2c0d6f Mon Sep 17 00:00:00 2001
From: nanxun <nanxun@nxsir.cn>
Date: Tue, 20 Jan 2026 20:25:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF&=E5=90=8E=E7=AB=AF=EF=BC=9A?=
 =?UTF-8?q?=20=E4=BA=92=E5=8F=91=E6=B6=88=E6=81=AF=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E6=89=93=E9=80=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/IM_API/Hubs/ChatHub.cs                | 16 +++-
 .../Interface/Services/IMessageSevice.cs      |  4 +-
 backend/IM_API/Services/MessageService.cs     |  8 +-
 frontend/web/src/App.vue                      | 13 ++-
 frontend/web/src/services/api.js              |  1 -
 frontend/web/src/stores/auth.js               | 27 +++++-
 frontend/web/src/stores/chat.js               | 96 +++++++++++++++++++
 frontend/web/src/stores/signalr.js            | 37 ++++++-
 frontend/web/src/utils/db/messageDB.js        | 16 ++++
 frontend/web/src/utils/sessionIdTools.js      | 11 +++
 frontend/web/src/views/auth/Login.vue         |  2 +-
 .../web/src/views/messages/MessageContent.vue | 70 ++++++--------
 .../web/src/views/messages/MessageList.vue    |  1 -
 13 files changed, 244 insertions(+), 58 deletions(-)
 create mode 100644 frontend/web/src/utils/sessionIdTools.js

diff --git a/backend/IM_API/Hubs/ChatHub.cs b/backend/IM_API/Hubs/ChatHub.cs
index 960af7e..759f1e6 100644
--- a/backend/IM_API/Hubs/ChatHub.cs
+++ b/backend/IM_API/Hubs/ChatHub.cs
@@ -1,5 +1,6 @@
 using IM_API.Dtos;
 using IM_API.Interface.Services;
+using IM_API.Models;
 using IM_API.Tools;
 using Microsoft.AspNetCore.SignalR;
 using System.Security.Claims;
@@ -32,7 +33,7 @@ namespace IM_API.Hubs
             }
             await base.OnConnectedAsync();
         }
-        public async Task SendPrivateMessage(MessageBaseDto dto)
+        public async Task SendMessage(MessageBaseDto dto)
         {
             if (!Context.User.Identity.IsAuthenticated)
             {
@@ -41,8 +42,17 @@ namespace IM_API.Hubs
                 return;
             }
             var userIdStr = Context.User.FindFirstValue(ClaimTypes.NameIdentifier);
-            await _messageService.SendPrivateMessageAsync(int.Parse(userIdStr),dto.ReceiverId,dto);
-            await Clients.Users(dto.ReceiverId.ToString()).SendAsync("ReceiveMessage", dto);
+            MessageBaseDto msgInfo = null;
+            if(dto.ChatType.ToLower() == ChatType.PRIVATE.ToString().ToLower())
+            {
+                msgInfo = await _messageService.SendPrivateMessageAsync(int.Parse(userIdStr), dto.ReceiverId, dto);
+            }
+            else
+            {
+                msgInfo = await _messageService.SendGroupMessageAsync(int.Parse(userIdStr), dto.ReceiverId, dto);
+            }
+
+                await Clients.Users(dto.ReceiverId.ToString()).SendAsync("ReceiveMessage", msgInfo);
             return;
         }
     }
diff --git a/backend/IM_API/Interface/Services/IMessageSevice.cs b/backend/IM_API/Interface/Services/IMessageSevice.cs
index c49a949..a7fd68f 100644
--- a/backend/IM_API/Interface/Services/IMessageSevice.cs
+++ b/backend/IM_API/Interface/Services/IMessageSevice.cs
@@ -11,7 +11,7 @@ namespace IM_API.Interface.Services
         /// <param name="receiverId">接收人</param>
         /// <param name="dto"></param>
         /// <returns></returns>
-        Task<bool> SendPrivateMessageAsync(int senderId,int receiverId,MessageBaseDto dto);
+        Task<MessageBaseDto> SendPrivateMessageAsync(int senderId,int receiverId,MessageBaseDto dto);
         /// <summary>
         /// 发送群聊消息
         /// </summary>
@@ -19,7 +19,7 @@ namespace IM_API.Interface.Services
         /// <param name="groupId">接收群id</param>
         /// <param name="dto"></param>
         /// <returns></returns>
-        Task<bool> SendGroupMessageAsync(int senderId,int groupId,MessageBaseDto dto);
+        Task<MessageBaseDto> SendGroupMessageAsync(int senderId,int groupId,MessageBaseDto dto);
         /// <summary>
         /// 获取消息列表
         /// </summary>
diff --git a/backend/IM_API/Services/MessageService.cs b/backend/IM_API/Services/MessageService.cs
index 6f4c41f..d6e631b 100644
--- a/backend/IM_API/Services/MessageService.cs
+++ b/backend/IM_API/Services/MessageService.cs
@@ -79,7 +79,7 @@ namespace IM_API.Services
             throw new NotImplementedException();
         }
         #region 发送群消息
-        public async Task<bool> SendGroupMessageAsync(int senderId, int groupId, MessageBaseDto dto)
+        public async Task<MessageBaseDto> SendGroupMessageAsync(int senderId, int groupId, MessageBaseDto dto)
         {
             //判断群存在
             var isExist = await _context.Groups.AnyAsync(x => x.Id == groupId);
@@ -92,12 +92,12 @@ namespace IM_API.Services
             message.StreamKey = StreamKeyBuilder.Group(groupId);
             _context.Messages.Add(message);
             await _context.SaveChangesAsync();
-            return true;
+            return _mapper.Map<MessageBaseDto>(message);
 
         }
         #endregion
         #region 发送私聊消息
-        public async Task<bool> SendPrivateMessageAsync(int senderId, int receiverId, MessageBaseDto dto)
+        public async Task<MessageBaseDto> SendPrivateMessageAsync(int senderId, int receiverId, MessageBaseDto dto)
         {
             bool isExist = await _context.Friends.AnyAsync(x => x.FriendId == receiverId);
             if (!isExist) throw new BaseException(CodeDefine.FRIEND_RELATION_NOT_FOUND);
@@ -107,7 +107,7 @@ namespace IM_API.Services
             message.StreamKey = StreamKeyBuilder.Private(dto.SenderId, dto.ReceiverId);
             _context.Messages.Add(message);
             await _context.SaveChangesAsync();
-            return true;
+            return _mapper.Map<MessageBaseDto>(message);
         }
         #endregion
     }
diff --git a/frontend/web/src/App.vue b/frontend/web/src/App.vue
index 5668470..79bb67b 100644
--- a/frontend/web/src/App.vue
+++ b/frontend/web/src/App.vue
@@ -7,8 +7,19 @@
 
 <script setup>
 import Alert from '@/components/messages/Alert.vue';
-</script>
+import { onMounted } from 'vue';
+import { useAuthStore } from './stores/auth';
+//import { useSignalRStore } from './stores/signalr';
 
+onMounted(async () => {
+  const { useSignalRStore } = await import('./stores/signalr');
+  const authStore = useAuthStore();
+  const signalRStore = useSignalRStore();
+  if(authStore.token){
+    signalRStore.initSignalR();
+  }
+})
+</script>
 <style scoped>
 
   #app {
diff --git a/frontend/web/src/services/api.js b/frontend/web/src/services/api.js
index 3243dcd..ea2eb94 100644
--- a/frontend/web/src/services/api.js
+++ b/frontend/web/src/services/api.js
@@ -64,7 +64,6 @@ api.interceptors.response.use(
 
                     isRefreshing = true;
                     const refreshToken = authStore.refreshToken;
-                    console.log(authStore)
                     if (refreshToken != null && refreshToken != '') {
                         const res = await authService.refresh(refreshToken)
                         authStore.setLoginInfo(res.data.token, res.data.refreshToken, res.data.userInfo)
diff --git a/frontend/web/src/stores/auth.js b/frontend/web/src/stores/auth.js
index edde2ab..7b70aca 100644
--- a/frontend/web/src/stores/auth.js
+++ b/frontend/web/src/stores/auth.js
@@ -8,6 +8,31 @@ export const useAuthStore = defineStore('auth', () => {
 
   //判断是否已登录
   const isLoggedIn = computed(() => !!refreshToken.value);
+  /**
+    * 安全解析 JWT
+    */
+  const getPayload = (t) => {
+    try {
+      const base64Url = t.split('.')[1];
+      const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+      // 处理 Unicode 字符解码
+      return JSON.parse(decodeURIComponent(atob(base64).split('').map(c =>
+        '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
+      ).join('')));
+    } catch (e) {
+      return null;
+    }
+  };
+
+  // 检查 Token 是否过期
+  const isTokenExpired = computed(() => {
+    if (!token.value) return true;
+    const payload = getPayload(token.value);
+    if (!payload || !payload.exp) return true;
+
+    const now = Math.floor(Date.now() / 1000);
+    return (payload.exp - now) < 30; // 预留 30 秒缓冲
+  });
 
   /**
    * 登录成功保存状态
@@ -36,5 +61,5 @@ export const useAuthStore = defineStore('auth', () => {
     localStorage.removeItem('user_info')
   }
 
-  return { token, refreshToken, userInfo, isLoggedIn, setLoginInfo, logout };
+  return { token, refreshToken, userInfo, isLoggedIn, isTokenExpired, setLoginInfo, logout };
 })
diff --git a/frontend/web/src/stores/chat.js b/frontend/web/src/stores/chat.js
index e69de29..1a3547c 100644
--- a/frontend/web/src/stores/chat.js
+++ b/frontend/web/src/stores/chat.js
@@ -0,0 +1,96 @@
+import { defineStore } from "pinia";
+import { messagesDb } from "@/utils/db/messageDB";
+import { messageService } from "@/services/message";
+
+export const useChatStore = defineStore('chat', {
+    state: () => ({
+        activeSessionId: null,
+        activeConversationId: null,
+        messages: [],
+        pageSize: 20
+    }),
+    actions: {
+        async addMessage(msg, sessionId) {
+            await messagesDb.save({ ...msg, sessionId });
+            this.messages.push({ ...msg, sessionId })
+        },
+        /**
+         * 切换会话加载当前会话消息列表
+         * @param {*} sessionId 
+         */
+        async swtichSession(sessionId, conversationId) {
+            this.activeSessionId = sessionId;
+            this.activeConversationId = conversationId;
+            this.messages = [];
+            //先从浏览器缓存加载一部分消息列表
+            const localHistory = await messagesDb.getPageMessages(sessionId, new Date().toISOString(), this.pageSize);
+            console.log(localHistory)
+            if (localHistory.length > 0) {
+                this.messages = localHistory;
+            } else {
+                //如果本地没有消息数据则从后端拉取数据
+                const conversation = (await messageService.getConversationById(this.activeConversationId)).data;
+                const serverHistoryMsg = await this.fetchHistoryFromServer(this.activeConversationId, conversation.lastReadMessageId);
+                //对消息进行过滤，防止重复消息
+                const filterMsg = serverHistoryMsg.filter(m => !this.messages.find(exist => exist.msgId === m.msgId));
+                this.messages = [...filterMsg, ...this.messages]
+            }
+            //拉取新消息
+            this.fetchNewMsgFromServier(this.activeConversationId).then((newMsg) => {
+                //去重
+                const filterNewMsg = newMsg.filter(m => !this.messages.find(exist => exist.msgId === m.msgId));
+                this.messages = [...filterNewMsg, ...this.messages]
+            });
+        },
+        /**
+         * 从服务器加载新消息
+         * @param {*} sessionId 
+         * @returns 
+         */
+        async fetchNewMsgFromServier(conversationId) {
+            const newMsg = (await messageService.getMessages(conversationId)).data;
+            if (newMsg.length > 0) {
+                const sessionId = this.activeSessionId;
+                await Promise.all(newMsg.map(msg =>
+                    messagesDb.save({ ...msg, sessionId })
+                ));
+                return newMsg;
+            } else {
+                return [];
+            }
+        },
+        /**
+         * 从服务器加载历史消息
+         * @param {*} sessionId 
+         * @param {*} msgId 
+         * @returns 
+         */
+        async fetchHistoryFromServer(conversationId, msgId) {
+            const res = (await messageService.getHistoryMessages(conversationId, msgId, this.pageSize)).data;
+
+            if (res.length > 0) {
+                const sessionId = this.activeSessionId;
+                await Promise.all(res.map(msg =>
+                    messagesDb.save({ ...msg, sessionId })
+                ));
+                return res;
+            } else {
+                return [];
+            }
+        },
+        /**
+         * 加载更多历史消息
+         */
+        async loadMoreMessages() {
+            const lastTimeStamp = this.messages.length > 0 ? this.messages[0].timeStamp : new Date().toISOString();
+            const history = await messagesDb.getPageMessages(this.activeSessionId, lastTimeStamp, this.pageSize);
+            if (history.length > 0) {
+                this.messages = [...history, ...this.messages]
+            } else {
+                const fetchMsg = await this.fetchHistoryFromServer(this.conversationId, this.messages[0].msgId);
+                const newMsgs = fetchMsg.filter(m => !this.messages.find(exist => exist.msgId === m.msgId));
+                this.messages = [...newMsgs, ...this.messages]
+            }
+        }
+    }
+})
\ No newline at end of file
diff --git a/frontend/web/src/stores/signalr.js b/frontend/web/src/stores/signalr.js
index 124be1d..e3f7c71 100644
--- a/frontend/web/src/stores/signalr.js
+++ b/frontend/web/src/stores/signalr.js
@@ -2,9 +2,8 @@ import { defineStore } from "pinia";
 import * as signalR from '@microsoft/signalr';
 import { useMessage } from "@/components/messages/useAlert";
 import { useAuthStore } from "./auth";
-
-const message = useMessage()
-const authStore = useAuthStore()
+import { useChatStore } from "./chat";
+import { authService } from "@/services/auth";
 
 export const useSignalRStore = defineStore('signalr', {
     state: () => ({
@@ -13,10 +12,16 @@ export const useSignalRStore = defineStore('signalr', {
     }),
     actions: {
         async initSignalR() {
+            const message = useMessage()
+            const authStore = useAuthStore()
             const url = import.meta.env.VITE_SIGNALR_BASE_URL || 'http://localhost:5202/chat';
             this.connection = new signalR.HubConnectionBuilder()
                 .withUrl(url, {
-                    accessTokenFactory: () => {
+                    accessTokenFactory: async () => {
+                        if (authStore.isTokenExpired) {
+                            const res = await authService.refresh(authStore.refreshToken)
+                            authStore.setLoginInfo(res.data.token, res.data.refreshToken, res.data.userInfo)
+                        }
                         return authStore.token;
                     }
                 })
@@ -32,13 +37,35 @@ export const useSignalRStore = defineStore('signalr', {
             }
         },
         registerHandlers() {
+            const chatStore = useChatStore()
             this.connection.on('ReceiveMessage', (msg) => {
-                console.log(msg)
+                chatStore.addMessage(msg);
             });
 
             this.connection.onclose(() => { this.isConnected = false });
             this.connection.onreconnected(() => { this.isConnected = true });
 
+        },
+        async sendMsg(msg) {
+            const message = useMessage()
+            const chatStore = useChatStore()
+            if (!this.isConnected) {
+                message.error('与服务器连接中断，请重连后尝试...');
+                return;
+            }
+            try {
+                // 后端 Hub 定义的方法名通常为 SendMessage
+                // 参数顺序需要与后端 ChatHub 中的方法签名一致
+                if (msg.msgId == null) {
+                    msg.msgId = self.crypto.randomUUID();
+                }
+                await this.connection.invoke("SendMessage", msg);
+                chatStore.addMessage(msg);
+                console.log("消息发送成功!");
+            } catch (err) {
+                console.error("消息发送失败:", err);
+                message.error("消息发送失败");
+            }
         }
     }
 })
\ No newline at end of file
diff --git a/frontend/web/src/utils/db/messageDB.js b/frontend/web/src/utils/db/messageDB.js
index 86b824d..49bb17a 100644
--- a/frontend/web/src/utils/db/messageDB.js
+++ b/frontend/web/src/utils/db/messageDB.js
@@ -22,5 +22,21 @@ export const messagesDb = {
     },
     async clearAll() {
         return (await dbPromise).clear(STORE_NAME);
+    },
+    async getPageMessages(sessionId, beforeTimeStamp, limit = 20) {
+        const db = await dbPromise;
+        const tx = db.transaction(STORE_NAME, 'readonly');
+        const index = tx.store.index('by-sessionId');
+        const range = IDBKeyRange.only(sessionId);
+        let cursor = await index.openCursor(range, 'prev');
+        const results = [];
+        // 如果之前有消息，跳过已经加载的部分（这里简单演示，实际建议用 offset 或 ID）
+        while (cursor && results.length < limit) {
+            if (cursor.value.timeStamp < beforeTimeStamp) {
+                results.unshift(cursor.value); // 插到数组开头，保持时间正序
+            }
+            cursor = await cursor.continue();
+        }
+        return results;
     }
 }
\ No newline at end of file
diff --git a/frontend/web/src/utils/sessionIdTools.js b/frontend/web/src/utils/sessionIdTools.js
new file mode 100644
index 0000000..95d2b1d
--- /dev/null
+++ b/frontend/web/src/utils/sessionIdTools.js
@@ -0,0 +1,11 @@
+/**
+ * 生成唯一的会话 ID (私聊)
+ * @param {string|number} id1 用户A的ID
+ * @param {string|number} id2 用户B的ID
+ */
+export const generateSessionId = (id1, id2) => {
+    // 1. 转换为字符串并放入数组
+    // 2. 排序（确保顺序一致性）
+    // 3. 用下划线或其他分隔符拼接
+    return [String(id1), String(id2)].sort().join('_');
+};
\ No newline at end of file
diff --git a/frontend/web/src/views/auth/Login.vue b/frontend/web/src/views/auth/Login.vue
index acf9ded..402c14b 100644
--- a/frontend/web/src/views/auth/Login.vue
+++ b/frontend/web/src/views/auth/Login.vue
@@ -98,7 +98,7 @@ const handleLogin = async () => {
     if(res.code === 0){ // Assuming 0 is success
       message.success('登录成功')
       authStore.setLoginInfo(res.data.token, res.data.refreshToken, res.data.userInfo);
-      signalRStore.initSignalR(res.data.token);
+      signalRStore.initSignalR();
       router.push('/messages')
     }else{
       message.error(res.message || '登录失败')
diff --git a/frontend/web/src/views/messages/MessageContent.vue b/frontend/web/src/views/messages/MessageContent.vue
index eb97f96..d6be9a3 100644
--- a/frontend/web/src/views/messages/MessageContent.vue
+++ b/frontend/web/src/views/messages/MessageContent.vue
@@ -9,7 +9,7 @@
     </header>
 
     <div class="chat-history" ref="historyRef">
-      <div v-for="m in messages" :key="m.id" :class="['msg', m.senderId == myInfo.id ? 'mine' : 'other']">
+      <div v-for="m in chatStore.messages" :key="m.id" :class="['msg', m.senderId == myInfo.id ? 'mine' : 'other']">
         <img :src="m.senderId == myInfo.id ? (myInfo?.avatar || defaultAvatar) : defaultAvatar" class="avatar-chat" />
         
         <div class="msg-content">
@@ -42,11 +42,14 @@
 </template>
 
 <script setup>
-import { ref, computed, nextTick, onMounted } from 'vue';
+import { ref, computed, nextTick, onMounted, watch } from 'vue';
 import { useAuthStore } from '@/stores/auth';
 import defaultAvatar from '@/assets/default_avatar.png';
 import { messageService } from '@/services/message';
 import { formatDate } from '@/utils/formatDate';
+import { useChatStore } from '@/stores/chat';
+import { generateSessionId } from '@/utils/sessionIdTools';
+import { useSignalRStore } from '@/stores/signalr';
 
 const props = defineProps({
     id:{
@@ -54,26 +57,26 @@ const props = defineProps({
         required:true
     }
 })
+
+const chatStore = useChatStore();
+const signalRStore = useSignalRStore();
+
 const input = ref('');   // 输入框内容
 const historyRef = ref(null); // 绑定 DOM 用于滚动
 const myInfo = useAuthStore().userInfo;
 
 const conversationInfo = ref(null)
 
-// --- 模拟会话数据 (实际开发中应从后端或 store 获取) ---
-const sessions = ref([
-  { id: 1, name: '南浔', avatar: 'https://i.pravatar.cc/40?1', last: '' },
-  { id: 2, name: '技术群', avatar: 'https://i.pravatar.cc/40?2', last: '' }
-]);
-
 // --- 消息数据 ---
-const messages = ref({
-  1: [
-    { id: 1, type: 'text', content: '在干嘛？', mine: false, time: '14:00' },
-    { id: 2, type: 'text', content: '在写代码呢，帮你调样式', mine: true, time: '14:02' }
-  ],
-  2: []
-});
+const messages = ref([]);
+
+watch(
+  () => chatStore.messages,
+  async (newVal) => {
+    scrollToBottom();
+  },
+  {deep: true}
+);
 
 // 自动滚动到底部
 const scrollToBottom = async () => {
@@ -84,31 +87,19 @@ const scrollToBottom = async () => {
 };
 
 // 发送文本
-function sendText() {
+async function sendText() {
   if (!input.value.trim()) return;
-  
-  const now = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-  const newMessage = {
-    id: Date.now(),
-    type: 'text',
-    content: input.value,
-    mine: true,
-    time: now
-  };
-
-  // 插入消息
-  if (!messages.value[props.id]) {
-    messages.value[props.id] = [];
-  }
-  messages.value[props.id].push(newMessage);
-
-  // 同步更新会话列表最后一条摘要
-  if (currentSession.value) {
-    currentSession.value.last = input.value;
-  }
-
+  // 根据 C# MessageBaseDto 构造的示例对象
+const msg = {
+    type: "Text",            // 消息类型，例如 'Text', 'Image', 'File'
+    chatType: "PRIVATE",     // 'PRIVATE' 或 'GROUP'
+    senderId: conversationInfo.value.userId,             // 当前用户ID (对应 int)
+    receiverId: conversationInfo.value.targetId,           // 接收者ID (对应 int)
+    content: input.value, 
+    timeStamp: new Date().toISOString() // 对应 DateTime，建议存标准 ISO 字符串
+};
+  await signalRStore.sendMsg(msg);
   input.value = ''; // 清空输入框
-  scrollToBottom(); // 滚动
 }
 
 // 通话模拟
@@ -140,7 +131,8 @@ async function loadMessages(conversationId, msgId = null, pageSize = null) {
 // 初始化时滚动到底部
 onMounted(async () => {
   await loadConversation(props.id);
-  await loadMessages(props.id);
+  const sessionid = generateSessionId(conversationInfo.userId, conversationInfo.targetId)
+  await chatStore.swtichSession(sessionid,props.id);
   scrollToBottom();
 });
 </script>
diff --git a/frontend/web/src/views/messages/MessageList.vue b/frontend/web/src/views/messages/MessageList.vue
index b94c6bf..4f182f0 100644
--- a/frontend/web/src/views/messages/MessageList.vue
+++ b/frontend/web/src/views/messages/MessageList.vue
@@ -49,7 +49,6 @@ const currentSession = computed(() => sessions.value.find(s => s.id === activeId
 
 function selectSession(s) {
   activeId.value = s.id
-  s.unread = 0
   router.push(`/messages/chat/${s.id}`)
   scrollToBottom()
 }
-- 
2.39.2