前端：

引用signalr三方包

frontend/web/src/stores/signalr.js

@@ -0,0 +1,44 @@
+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()
+
+export const useSignalRStore = defineStore('signalr', {
+    state: () => ({
+        connection: null,
+        isConnected: false
+    }),
+    actions: {
+        async initSignalR() {
+            const url = import.meta.env.VITE_SIGNALR_BASE_URL || 'http://localhost:5202/chat';
+            this.connection = new signalR.HubConnectionBuilder()
+                .withUrl(url, {
+                    accessTokenFactory: () => {
+                        return authStore.token;
+                    }
+                })
+                .withAutomaticReconnect()
+                .build();
+            this.registerHandlers();
+            try {
+                await this.connection.start();
+                this.isConnected = true;
+                console.log('SignalR建立通信成功！')
+            } catch (e) {
+                message.error('与服务器建立通信失败，请检查网络连接...');
+            }
+        },
+        registerHandlers() {
+            this.connection.on('ReceiveMessage', (msg) => {
+                console.log(msg)
+            });
+
+            this.connection.onclose(() => { this.isConnected = false });
+            this.connection.onreconnected(() => { this.isConnected = true });
+
+        }
+    }
+})

frontend/web/src/utils/db/messageDB.js

@@ -0,0 +1,26 @@
+import { openDB } from "idb";
+
+const DBNAME = 'IM_DB';
+const STORE_NAME = 'messages';
+
+export const dbPromise = openDB(DBNAME, 1, {
+    upgrade(db) {
+        if (!db.objectStoreNames.contains(STORE_NAME)) {
+            const store = db.createObjectStore(STORE_NAME, { keyPath: 'msgId' });
+            store.createIndex('by-sessionId', 'sessionId');
+            store.createIndex('by-time', 'timeStamp');
+        }
+    }
+})
+
+export const messagesDb = {
+    async save(msg) {
+        return (await dbPromise).put(STORE_NAME, msg);
+    },
+    async getBySession(sessionId) {
+        return (await dbPromise).getAllFromIndex(STORE_NAME, 'by-sessionId', sessionId);
+    },
+    async clearAll() {
+        return (await dbPromise).clear(STORE_NAME);
+    }
+}

frontend/web/src/views/auth/Login.vue

@@ -57,10 +57,12 @@ import MyButton from '@/components/MyButton.vue'
 import { required, maxLength, helpers } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import { useAuthStore } from '@/stores/auth'
+import { useSignalRStore } from '@/stores/signalr'
 
 const message = useMessage();
 const router = useRouter();
 const authStore = useAuthStore();
+const signalRStore = useSignalRStore();
 
 const loading = ref(false)
 const form = reactive({
@@ -96,6 +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);
       router.push('/messages')
     }else{
       message.error(res.message || '登录失败')