From 83c337e5c4fd2b6bdc5d0f94bff983e43646ba02 Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Wed, 24 Jul 2024 11:17:54 +0800 Subject: [PATCH] =?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/App.tsx | 9 ++++++++- src/api/Login/index.ts | 3 +-- src/page/Home/index.tsx | 2 -- src/page/Login/index.tsx | 2 ++ src/page/Meeting/index.tsx | 29 +++++++++++++++++++++-------- src/utils/package/signalr.ts | 32 ++++++++++++++++++++++++++------ src/utils/request/request.ts | 2 +- 7 files changed, 59 insertions(+), 20 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index e828f58..179adb5 100644 --- a/src/App.tsx +++ b/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, diff --git a/src/api/Login/index.ts b/src/api/Login/index.ts index 6bea0ce..6783156 100644 --- a/src/api/Login/index.ts +++ b/src/api/Login/index.ts @@ -15,5 +15,4 @@ export const PostRefresh = (refreshToken: string) => request({ url: `auth/refresh?refreshToken=${refreshToken}`, method: 'post', - }) - + }) \ No newline at end of file diff --git a/src/page/Home/index.tsx b/src/page/Home/index.tsx index 966ba23..767e8c8 100644 --- a/src/page/Home/index.tsx +++ b/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'), diff --git a/src/page/Login/index.tsx b/src/page/Login/index.tsx index 221aafb..8aed6dc 100644 --- a/src/page/Login/index.tsx +++ b/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(false); @@ -130,6 +131,7 @@ const Login: React.FC = () => { } catch { } + startSignalr() navigate('/home') } }) diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 5a585f1..ddb71fe 100644 --- a/src/page/Meeting/index.tsx +++ b/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; } }; // 聊天发送 diff --git a/src/utils/package/signalr.ts b/src/utils/package/signalr.ts index 8adf3e7..20e63a2 100644 --- a/src/utils/package/signalr.ts +++ b/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) => { diff --git a/src/utils/request/request.ts b/src/utils/request/request.ts index 67886b4..f622aa9 100644 --- a/src/utils/request/request.ts +++ b/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';