diff --git a/src/App.tsx b/src/App.tsx index 00d10a5..ffb48d8 100644 --- a/src/App.tsx +++ b/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 ( <> diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 29925d7..f4f76d9 100644 --- a/src/page/Meeting/index.tsx +++ b/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; } diff --git a/src/utils/package/agora.ts b/src/utils/package/agora.ts index 8fdd786..9926355 100644 --- a/src/utils/package/agora.ts +++ b/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) + }, }); }, // 获取视图模式 diff --git a/vite.config.ts b/vite.config.ts index 325229a..8d788dd 100644 --- a/vite.config.ts +++ b/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 } `, })