网络优化

src/App.tsx

@@ -57,8 +57,6 @@ const App: React.FC = () => {
             toSrc('/login')
         }
         window.addEventListener('resize', handleResize);
-        window.addEventListener('online', handleNetworkChange);
-        window.addEventListener('offline', handleNetworkChange);
         const originalSetItem = window.localStorage.setItem;
         window.localStorage.setItem = function (key, value) {
             originalSetItem.call(this, key, value);
@@ -71,8 +69,6 @@ const App: React.FC = () => {
         return () => {
             window.removeEventListener('resize', handleResize);
             window.removeEventListener('customStorageChange', handleCustomStorageChange);
-            window.removeEventListener('online', handleNetworkChange);
-            window.removeEventListener('offline', handleNetworkChange);
         };
     }, []);
     useEffect(() => {
@@ -238,19 +234,6 @@ const App: React.FC = () => {
             }
         }
     };
-
-    const handleNetworkChange = (): void => {
-        if (location.hash.indexOf('/meeting') === -1) {
-            if (navigator.onLine) {
-                message.success('网络已恢复。')
-                setTimeout(async () => {
-                    await onStart()
-                }, 1000)
-            } else {
-                message.error('网络已断开!')
-            }
-        }
-    }
     return (
         <>
             <Routes>

src/page/Meeting/index.tsx

@@ -11,10 +11,10 @@ import { storage } from '@/utils';
 import { GetRoomUser, PostOpenMicr, PostOpenCamera, GetLeaveAll, PostRoomManager, DeleteRoomManager, GetRoomKickout, GetShowUser, PostShowUser, PostMuteAll, GetRoomUserItem, GetApplySpeak } from '@/api/Meeting';
 import ImageUrl from '@/utils/package/imageUrl'
 import { agora } from '@/utils/package/agora'
-import { onInvoke, onSignalr, offSignalr, onStart } from '@/utils/package/signalr';
+import { onInvoke, onSignalr, offSignalr } from '@/utils/package/signalr';
 import dayjs from 'dayjs';
 import durationPlugin from 'dayjs/plugin/duration';
-import { AudioVolumeInfo, QualityType, RtcConnection, RtcStats, UserOfflineReasonType, VideoSourceType, VideoStreamType } from 'agora-electron-sdk';
+import { AudioVolumeInfo, ConnectionChangedReasonType, ConnectionStateType, QualityType, RtcConnection, RtcStats, UserOfflineReasonType, VideoSourceType, VideoStreamType } from 'agora-electron-sdk';
 import Avatar from '@/components/Avatar';
 import SharedFilesModel from '@/components/SharedFilesModel';
 import StupWizard from '@/components/StupWizard';
@@ -203,8 +203,6 @@ const Meeting: React.FC = () => {
     agoraInit()
     storage.setItem('noViewChatList', 0)
     window.addEventListener('customStorageChange', handleCustomStorageChange);
-    window.addEventListener('online', handleNetworkChange);
-    window.addEventListener('offline', handleNetworkChange);
     const container = document.getElementById('videoView') as HTMLElement;
     container.addEventListener('wheel', handleWheelChange);
     time = setInterval(() => {
@@ -229,8 +227,6 @@ const Meeting: React.FC = () => {
     // }, 3000)
     return () => {
       window.removeEventListener('customStorageChange', handleCustomStorageChange);
-      window.removeEventListener('online', handleNetworkChange);
-      window.removeEventListener('offline', handleNetworkChange);
       window.removeEventListener('wheel', handleWheelChange);
       clearInterval(time)
       // clearInterval(getDesktopCapturerVideoTime)
@@ -781,7 +777,12 @@ const Meeting: React.FC = () => {
           ...currentNetworkInfo,
           networkOther: stats
         })
-      }
+      },
+      onConnectionStateChanged: async (_connection: RtcConnection, stateNumber: ConnectionStateType, reason: ConnectionChangedReasonType) => {
+        if (stateNumber === 4 && reason === 2) {
+          message.error('网络断开，请检查网络')
+        }
+      },
     })
     if (state.enableCamera) {
       await agora.startCameraCapture()
@@ -935,23 +936,6 @@ const Meeting: React.FC = () => {
     }
     changeAgoraDevice()
   }
-  // 网络
-  const handleNetworkChange = (): void => {
-    if (navigator.onLine) {
-      message.success('网络已恢复。')
-      setTimeout(async () => {
-        await onStart(async () => {
-          await onInvoke('joinChannel', {
-            roomNum: state.channelId,
-            enableMicr: !footerList[0][0].active,
-            enableCamera: !footerList[0][1].active
-          })
-        })
-      }, 1000)
-    } else {
-      message.error('网络已断开!')
-    }
-  }
   // 滚动
   const handleWheelChange = (e: any): void => {
     const container = document.getElementById('videoView') as HTMLElement;
@@ -1333,6 +1317,12 @@ const Meeting: React.FC = () => {
             enableMicr: !footerList[0][0].active,
             enableCamera: !footerList[0][1].active
           })
+          message.success('网络已连接。')
+          DeleteRoomManager({
+            roomId: state.roomId,
+            roomNum: state.channelId,
+            userId: userInfo.uid
+          })
         }
         break;
     }

src/utils/package/agora.ts

@@ -13,7 +13,9 @@ import {
   RtcConnection,
   RtcStats,
   AudioVolumeInfo,
-  UserOfflineReasonType
+  UserOfflineReasonType,
+  ConnectionStateType,
+  ConnectionChangedReasonType
 } from "agora-electron-sdk";
 import { GetRoomRtcToken, GetAgoraConf } from "@/api/Home/Index";
 import { storage } from '@/utils';
@@ -109,7 +111,7 @@ export const agora = {
     }, 1000);
   },
   // 事件回调
-  registerEventHandler: ({ onJoinChannelSuccess, onUserJoined, onUserOffline, onAudioVolumeIndication, onNetworkQuality, onRtcStats }: any) => {
+  registerEventHandler: ({ onJoinChannelSuccess, onUserJoined, onUserOffline, onAudioVolumeIndication, onNetworkQuality, onRtcStats, onConnectionStateChanged }: any) => {
     rtcEngine.registerEventHandler({
       // 监听本地用户加入频道事件
       onJoinChannelSuccess: async (connection: RtcConnection, elapsed: number) => {
@@ -147,6 +149,10 @@ export const agora = {
       onRtcStats: async (_connection: RtcConnection, stats: RtcStats) => {
         await onRtcStats(stats)
       },
+      // 网络连接状态已改变回调。
+      onConnectionStateChanged: async (connection: RtcConnection, state: ConnectionStateType, reason: ConnectionChangedReasonType) => {
+        await onConnectionStateChanged(connection, state, reason)
+      },
     });
   },
   // 获取视图模式

vite.config.ts

@@ -68,7 +68,9 @@ export default defineConfig({
         RtcConnection,
         RtcStats,
         AudioVolumeInfo,
-        UserOfflineReasonType
+        UserOfflineReasonType,
+        ConnectionStateType,
+        ConnectionChangedReasonType
        } = require("agora-electron-sdk")
       export {
         createAgoraRtcEngine,
@@ -85,7 +87,9 @@ export default defineConfig({
         RtcConnection,
         RtcStats,
         AudioVolumeInfo,
-        UserOfflineReasonType
+        UserOfflineReasonType,
+        ConnectionStateType,
+        ConnectionChangedReasonType
       }
     `,
     })