优化

src/App.tsx

@@ -10,10 +10,11 @@ import Meeting from '@/page/Meeting/index'
 import NotFound from '@/page/NotFound/index'
 import { storage } from '@/utils'
 import { Spin } from "antd";
-import { onInvitation } from "@/utils/package/signalr";
+import { onInvitation, onInvoke, onReconnected } from "@/utils/package/signalr";
 import JoinMeetingModal from "./components/JoinMeetingModal";
 import * as CryptoJS from 'crypto-js';
 import { PostLogin } from "@/api/Login";
+import { startSignalr } from '@/utils/package/signalr';
 
 const App: React.FC = () => {
   const navigate = useNavigate();
@@ -55,6 +56,7 @@ const App: React.FC = () => {
           if (res.code === 200) {
             storage.setItem('user', JSON.stringify(res.data))
             toHome()
+            startSignalr()
           } else {
             toLogin()
           }
@@ -101,6 +103,11 @@ const App: React.FC = () => {
       }
     })
   }, [navigate])
+  useEffect(() => {
+    onReconnected(async () => {
+      storage.setItem('reconnect', true)
+    })
+  }, [])
   const handleResize = (): void => {
     setWindowSize({
       width: window.innerWidth,

src/api/Login/index.ts

@@ -15,5 +15,4 @@ export const PostRefresh = (refreshToken: string) =>
   request({
     url: `auth/refresh?refreshToken=${refreshToken}`,
     method: 'post',
-  })
-
+  })

src/page/Home/index.tsx

@@ -6,7 +6,6 @@ import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn'
 import { storage } from '@/utils';
 import ImageUrl from '@/utils/package/imageUrl'
-import { startSignalr } from '@/utils/package/signalr';
 import Avatar from '@/components/Avatar';
 dayjs.locale('zh-cn');
 type navListType = {
@@ -51,7 +50,6 @@ const Home: React.FC = () => {
   useEffect(() => {
     const user = JSON.parse(storage.getItem('user') as string);
     setUserInfo(user)
-    startSignalr(() => { })
     const updateTime = () => {
       setDateInfo({
         work: dayjs().format('ddd'),

src/page/Login/index.tsx

@@ -7,6 +7,7 @@ import { storage } from '@/utils'
 import { GetCheckUser, PostLogin } from '@/api/Login'
 import * as CryptoJS from 'crypto-js';
 import ImageUrl from '@/utils/package/imageUrl'
+import { startSignalr } from '@/utils/package/signalr';
 const Login: React.FC = () => {
   const navigate = useNavigate();
   const [accountPasswordStatus, setAccountPasswordStatus] = useState<boolean>(false);
@@ -130,6 +131,7 @@ const Login: React.FC = () => {
         } catch {
 
         }
+        startSignalr()
         navigate('/home')
       }
     })

src/page/Meeting/index.tsx

@@ -12,7 +12,7 @@ import { GetRoomFile, PostRoomFile, DeleteRoomFile, GetRoomUpFileurl, GetRoomFil
 import axios from 'axios';
 import ImageUrl from '@/utils/package/imageUrl'
 import agora from '@/utils/package/agora'
-import { onInvoke, onSignalr, offSignalr, startSignalr } from '@/utils/package/signalr';
+import { onInvoke, onSignalr, offSignalr, onStart } from '@/utils/package/signalr';
 import dayjs from 'dayjs';
 import durationPlugin from 'dayjs/plugin/duration';
 import { VideoSourceType } from 'agora-electron-sdk';
@@ -249,14 +249,16 @@ const Meeting: React.FC = () => {
   const handleNetworkChange = (): void => {
     if (navigator.onLine) {
       message.success('网络已恢复。')
-      startSignalr(async () => {
-        await onInvoke('joinChannel', {
-          roomNum: state.channelId,
-          enableMicr: true,
-          enableCamera: true
+      setTimeout(async () => {
+        await onStart(async () => {
+          await onInvoke('joinChannel', {
+            roomNum: state.channelId,
+            enableMicr: true,
+            enableCamera: true
+          })
+          await getRoomUser()
         })
-        await getRoomUser()
-      })
+      }, 1000)
     } else {
       message.error('网络已断开!')
     }
@@ -451,6 +453,17 @@ const Meeting: React.FC = () => {
       case 'meetingMode':
         setMeetingMode(e.value)
         break;
+      case 'reconnect':
+        if (e.value == true) {
+          storage.setItem('reconnect', false)
+          await onInvoke('joinChannel', {
+            roomNum: state.channelId,
+            enableMicr: true,
+            enableCamera: true
+          })
+          await getRoomUser()
+        }
+        break;
     }
   };
   // 聊天发送

src/utils/package/signalr.ts

@@ -1,7 +1,7 @@
 import * as signalR from '@microsoft/signalr';
 import storage from './storage';
-let connection = null as any;
-export const startSignalr = async (callBack: Function) => {
+let connection = '' as any;
+export const startSignalr = async () => {
   const user = await JSON.parse(storage.getItem('user') as string);
   connection = new signalR.HubConnectionBuilder().withAutomaticReconnect()
     .withUrl(`${import.meta.env.VITE_BASE_URL_API}/session-manage`, {
@@ -10,12 +10,32 @@ export const startSignalr = async (callBack: Function) => {
       accessTokenFactory: () => user.token
     })
     .build();
-
-  connection.start()
-    .then(() => callBack())
-    .catch((err: any) => setTimeout(() => startSignalr(() => { }), 5000));
+  onStart()
+  connection.onclose(async () => {
+    await onStart()
+  });
 }
 
+export const onStart = async (callBack?: Function) => {
+  if (connection.state !== signalR.HubConnectionState.Connected) {
+    try {
+      await connection.start();
+      if (callBack) {
+        callBack()
+      }
+    } catch (err) {
+      console.log(err);
+      setTimeout(onStart, 5000);
+    }
+  }
+}
+export const onReconnected = async (callBack: Function) => {
+  if (connection) {
+    connection.onreconnected(async (newConnectionId: any) => {
+      callBack()
+    });
+  }
+}
 export const onInvitation = (callBack: Function) => {
   if (connection) {
     connection.on("Invitation", (roomNum: string, roomName: string, InviterName: string) => {

src/utils/request/request.ts

@@ -1,6 +1,6 @@
 import axios, { AxiosInstance, AxiosResponse } from 'axios'
 import { RequestConfig, RequestInterceptors } from './types'
-import { request, storage } from '@/utils'
+import { storage } from '@/utils'
 import { constant } from '@/config'
 import { message } from 'antd';
 import { PostRefresh } from '@/api/Login';