From b689d217372f9267530a8e27ccdfa277b98c8495 Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Tue, 24 Sep 2024 17:09:46 +0800 Subject: [PATCH 1/6] =?UTF-8?q?=E7=BD=91=E7=BB=9C=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 17 ----------------- src/page/Meeting/index.tsx | 38 ++++++++++++++------------------------ src/utils/package/agora.ts | 10 ++++++++-- vite.config.ts | 8 ++++++-- 4 files changed, 28 insertions(+), 45 deletions(-) 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 } `, }) From caf4b4850a848ad68379acb0bf5f77be5b5a6d89 Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Tue, 24 Sep 2024 17:30:43 +0800 Subject: [PATCH 2/6] =?UTF-8?q?=E7=BD=91=E7=BB=9C=E6=8F=90=E7=A4=BA?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/Meeting/index.tsx | 84 +++++++++++++++----------------------- 1 file changed, 33 insertions(+), 51 deletions(-) diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index f4f76d9..8988bbf 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -147,13 +147,11 @@ const Meeting: React.FC = () => { const [currentVideoId, setCurrentVideoId] = useState('') let [currentSeconds, setCurrentSeconds] = useState(0) const [currentEffective, setCurrentEffective] = useState(4) - const [currentNetworkInfo, setCurrentNetworkInfo] = useState({ - networkQuality: { - level: '佳', - text: '网络质量极好。' - }, - networkOther: {} as RtcStats + const [networkQuality, setNetworkQuality] = useState({ + level: '佳', + text: '网络质量极好。' }) + const [networkOther, setNetworkOther] = useState({}) const [isComputerAudio, setIsComputerAudio] = useState(true) const [isFluencyPriority, setIsFluencyPriority] = useState(false) const [open, setOpen] = useState(false) @@ -236,48 +234,33 @@ const Meeting: React.FC = () => { useEffect(() => { switch (currentEffective) { case 0: - setCurrentNetworkInfo({ - ...currentNetworkInfo, - networkQuality: { - level: '断开连接', - text: '网络连接断开。' - } + setNetworkQuality({ + level: '断开连接', + text: '网络连接断开。' }) break; case 1: - setCurrentNetworkInfo({ - ...currentNetworkInfo, - networkQuality: { - level: '非常差', - text: '完全无法沟通。' - } + setNetworkQuality({ + level: '非常差', + text: '完全无法沟通。' }) break; case 2: - setCurrentNetworkInfo({ - ...currentNetworkInfo, - networkQuality: { - level: '差', - text: '勉强能沟通但不顺畅，网络质量非常差，基本不能沟通。' - } + setNetworkQuality({ + level: '差', + text: '勉强能沟通但不顺畅，网络质量非常差，基本不能沟通。' }) break; case 3: - setCurrentNetworkInfo({ - ...currentNetworkInfo, - networkQuality: { - level: '良好', - text: ' 用户主观感受有瑕疵但不影响沟通。' - } + setNetworkQuality({ + level: '良好', + text: ' 用户主观感受有瑕疵但不影响沟通。' }) break; case 4: - setCurrentNetworkInfo({ - ...currentNetworkInfo, - networkQuality: { - level: '佳', - text: '网络质量极好。' - } + setNetworkQuality({ + level: '佳', + text: '网络质量极好。' }) break; } @@ -760,23 +743,22 @@ const Meeting: React.FC = () => { setCurrentEffective(3) break; case 4: - case 5: setCurrentEffective(2) break; - case 6: + case 5: setCurrentEffective(1) break; + case 6: + setCurrentEffective(0) + break; default: - setCurrentEffective(navigator.onLine ? 4 : 0) + setCurrentEffective(4) break; } } }, onRtcStats: async (stats: RtcStats) => { - setCurrentNetworkInfo({ - ...currentNetworkInfo, - networkOther: stats - }) + setNetworkOther(stats) }, onConnectionStateChanged: async (_connection: RtcConnection, stateNumber: ConnectionStateType, reason: ConnectionChangedReasonType) => { if (stateNumber === 4 && reason === 2) { @@ -1621,13 +1603,13 @@ const Meeting: React.FC = () => {
网络质量： - {currentNetworkInfo.networkQuality.level} + {networkQuality.level} - {currentNetworkInfo.networkQuality.text} + {networkQuality.text} } title="" @@ -1641,15 +1623,15 @@ const Meeting: React.FC = () => {
带宽占用： - ↑{currentNetworkInfo.networkOther.txKBitRate}kbps ↓{currentNetworkInfo.networkOther.rxKBitRate}kbps + ↑{networkOther.txKBitRate}kbps ↓{networkOther.rxKBitRate}kbps
丢包率： - ↑{currentNetworkInfo.networkOther.txPacketLossRate}% ↓{currentNetworkInfo.networkOther.rxPacketLossRate}% + ↑{networkOther.txPacketLossRate}% ↓{networkOther.rxPacketLossRate}%
延迟： - {currentNetworkInfo.networkOther.lastmileDelay}ms + {networkOther.lastmileDelay}ms
} @@ -2447,7 +2429,7 @@ const meetingContentError = (item: any) => { const networkIcon = (network: number) => { switch (network) { case 0: - return + return @@ -2459,14 +2441,14 @@ const networkIcon = (network: number) => { case 1: - return + return case 2: - return + return From 24aaca7749fa8b0688f461b40c33a0b0c0f112ce Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Tue, 24 Sep 2024 17:46:53 +0800 Subject: [PATCH 3/6] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=BD=91=E7=BB=9C?= =?UTF-8?q?=E5=88=A4=E6=96=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/Meeting/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 8988bbf..e7cfbf4 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -764,6 +764,9 @@ const Meeting: React.FC = () => { if (stateNumber === 4 && reason === 2) { message.error('网络断开，请检查网络') } + if (stateNumber === 4 && reason === 14) { + message.error('网络断开，请检查网络') + } }, }) if (state.enableCamera) { From d2a99d3b9a96ac0db083e39bab1c0c15919307f9 Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Tue, 24 Sep 2024 17:59:39 +0800 Subject: [PATCH 4/6] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/Meeting/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index e7cfbf4..20575ed 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -152,6 +152,7 @@ const Meeting: React.FC = () => { text: '网络质量极好。' }) const [networkOther, setNetworkOther] = useState({}) + const [isNetwork, setIsNetwork] = useState(true) const [isComputerAudio, setIsComputerAudio] = useState(true) const [isFluencyPriority, setIsFluencyPriority] = useState(false) const [open, setOpen] = useState(false) @@ -752,7 +753,7 @@ const Meeting: React.FC = () => { setCurrentEffective(0) break; default: - setCurrentEffective(4) + setCurrentEffective(isNetwork ? 4 : 0) break; } } @@ -762,9 +763,11 @@ const Meeting: React.FC = () => { }, onConnectionStateChanged: async (_connection: RtcConnection, stateNumber: ConnectionStateType, reason: ConnectionChangedReasonType) => { if (stateNumber === 4 && reason === 2) { + setIsNetwork(false) message.error('网络断开，请检查网络') } if (stateNumber === 4 && reason === 14) { + setIsNetwork(false) message.error('网络断开，请检查网络') } }, @@ -1302,6 +1305,7 @@ const Meeting: React.FC = () => { enableMicr: !footerList[0][0].active, enableCamera: !footerList[0][1].active }) + setIsNetwork(true) message.success('网络已连接。') DeleteRoomManager({ roomId: state.roomId, From 1c3107c1f70ec4a192cd21656a39e571c5dc0ca7 Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Tue, 24 Sep 2024 18:02:10 +0800 Subject: [PATCH 5/6] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/Meeting/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 20575ed..44015ff 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -753,7 +753,10 @@ const Meeting: React.FC = () => { setCurrentEffective(0) break; default: - setCurrentEffective(isNetwork ? 4 : 0) + setIsNetwork(res => { + setCurrentEffective(res ? 4 : 0) + return res + }) break; } } From 3be76a9374d2c50e9fb21230732f0793f34ffeb7 Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Wed, 25 Sep 2024 09:38:48 +0800 Subject: [PATCH 6/6] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/Meeting/index.tsx | 32 +++++++++++++++----------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 44015ff..1073263 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -152,7 +152,6 @@ const Meeting: React.FC = () => { text: '网络质量极好。' }) const [networkOther, setNetworkOther] = useState({}) - const [isNetwork, setIsNetwork] = useState(true) const [isComputerAudio, setIsComputerAudio] = useState(true) const [isFluencyPriority, setIsFluencyPriority] = useState(false) const [open, setOpen] = useState(false) @@ -753,10 +752,7 @@ const Meeting: React.FC = () => { setCurrentEffective(0) break; default: - setIsNetwork(res => { - setCurrentEffective(res ? 4 : 0) - return res - }) + setCurrentEffective(storage.getItem('reconnect') ? 4 : 0) break; } } @@ -765,12 +761,9 @@ const Meeting: React.FC = () => { setNetworkOther(stats) }, onConnectionStateChanged: async (_connection: RtcConnection, stateNumber: ConnectionStateType, reason: ConnectionChangedReasonType) => { - if (stateNumber === 4 && reason === 2) { - setIsNetwork(false) - message.error('网络断开，请检查网络') - } - if (stateNumber === 4 && reason === 14) { - setIsNetwork(false) + const reconnectingCode = [2, 16, 11, 13, 14, 12] + if (stateNumber === 4 && reconnectingCode.indexOf(reason) >= 0) { + storage.setItem('reconnect', false) message.error('网络断开，请检查网络') } }, @@ -1302,19 +1295,24 @@ const Meeting: React.FC = () => { break; case 'reconnect': if (e.value == true) { - storage.setItem('reconnect', false) await onInvoke('joinChannel', { roomNum: state.channelId, enableMicr: !footerList[0][0].active, enableCamera: !footerList[0][1].active }) - setIsNetwork(true) message.success('网络已连接。') - DeleteRoomManager({ - roomId: state.roomId, - roomNum: state.channelId, - userId: userInfo.uid + setRoomUserList((res: any) => { + let userItem = res.find((item: any) => item.uid === userInfo.uid) + if (userItem.isRoomManager) { + DeleteRoomManager({ + roomId: state.roomId, + roomNum: state.channelId, + userId: userInfo.uid + }) + } + return res }) + } break; }