断网重连

src/page/Home/index.tsx

@@ -51,7 +51,7 @@ const Home: React.FC = () => {
   useEffect(() => {
     const user = JSON.parse(storage.getItem('user') as string);
     setUserInfo(user)
-    startSignalr()
+    startSignalr(() => { })
     const updateTime = () => {
       setDateInfo({
         work: dayjs().format('ddd'),

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 } from '@/utils/package/signalr';
+import { onInvoke, onSignalr, offSignalr, startSignalr } from '@/utils/package/signalr';
 import dayjs from 'dayjs';
 import durationPlugin from 'dayjs/plugin/duration';
 import { VideoSourceType } from 'agora-electron-sdk';
@@ -172,6 +172,8 @@ const Meeting: React.FC = () => {
       setUser(userInfo)
       setIsInit(false)
       window.addEventListener('customStorageChange', handleCustomStorageChange);
+      window.addEventListener('online', handleNetworkChange);
+      window.addEventListener('offline', handleNetworkChange);
       time = setInterval(() => {
         let effectiveTypeLength = ['slow-2g', '2g', '3g', '4g'].indexOf((navigator as any).connection.effectiveType)
         if (effectiveTypeLength >= 0) {
@@ -184,6 +186,8 @@ const Meeting: React.FC = () => {
     }
     return () => {
       window.removeEventListener('customStorageChange', handleCustomStorageChange);
+      window.removeEventListener('online', handleNetworkChange);
+      window.removeEventListener('offline', handleNetworkChange);
       clearInterval(time)
     };
   }, [fileList.pageIndex]);
@@ -241,8 +245,24 @@ const Meeting: React.FC = () => {
 
   }, [currentVideoId])
 
+  // 网络
+  const handleNetworkChange = (): void => {
+    if (navigator.onLine) {
+      message.success('网络已恢复。')
+      startSignalr(async () => {
+        await onInvoke('joinChannel', {
+          roomNum: state.channelId,
+          enableMicr: true,
+          enableCamera: true
+        })
+        await getRoomUser()
+      })
+    } else {
+      message.error('网络已断开!')
+    }
+  }
   // 加入房间时间
-  const changeCurrentSeconds = () => {
+  const changeCurrentSeconds = (): string => {
     const duration = dayjs.duration(currentSeconds, 'seconds');
     const hours = duration.hours(); // 整数小时
     const minutes = duration.minutes(); // 整数分钟

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 () => {
+export const startSignalr = async (callBack: Function) => {
   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`, {
@@ -12,8 +12,8 @@ export const startSignalr = async () => {
     .build();
 
   connection.start()
-    .then(() => console.log('Connection started!'))
+    .then(() => callBack())
-    .catch((err: any) => setTimeout(()=> startSignalr(), 5000));
+    .catch((err: any) => setTimeout(() => startSignalr(() => { }), 5000));
 }
 
 export const onInvitation = (callBack: Function) => {