From adadd234cf75d329b2f0bf02dcefd14f13be0b66 Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Fri, 9 Aug 2024 17:27:02 +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 | 7 +- src/api/Meeting/index.ts | 36 +++++---- src/page/Meeting/index.tsx | 139 ++++++++++++++++++++--------------- src/utils/package/signalr.ts | 64 ++++++++++++---- 4 files changed, 157 insertions(+), 89 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 41022d6..ff0e0e5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,13 +9,14 @@ import Meeting from '@/page/Meeting/index' import NotFound from '@/page/NotFound/index' import { storage } from '@/utils' import { message, Spin } from "antd"; -import { onInvitation, onInvoke, onReconnected, onStart, startSignalr } from "@/utils/package/signalr"; +import { onInvitation, onReconnected, onStart, startSignalr } from "@/utils/package/signalr"; import JoinMeetingModal from "@/components/JoinMeetingModal"; import UpdateModal from "@/components/UpdateModal"; import * as CryptoJS from 'crypto-js'; import { PostLogin } from "@/api/Login"; import agora from "@/utils/package/agora"; import QuitTips from "@/components/QuitTips"; +import { GetLeave } from "@/api/Meeting"; const fs = require('fs').promises; const { exec } = require('child_process'); const App: React.FC = () => { @@ -132,8 +133,8 @@ const App: React.FC = () => { window.electron.quitAndInstall(async (_e: any) => { if (location.hash.indexOf('/meeting') === 1) { const data = JSON.parse(localStorage.stateInfo); - await onInvoke('levelChannel', { - roomNum: data.channelId + await GetLeave({ + roomNum: data.channelId, }) await agora.leaveChannel() } diff --git a/src/api/Meeting/index.ts b/src/api/Meeting/index.ts index 342c907..d3854e9 100644 --- a/src/api/Meeting/index.ts +++ b/src/api/Meeting/index.ts @@ -40,19 +40,19 @@ export const GetRoomUser = (roomNum: string) => }) -export const PostOpenMicr = (data: any) => { - let url = ''; - if (typeof data.isAll === 'boolean') { - url = `/room/oper-micr?roomNum=${data.roomNum}&enableMicr=${data.enableMicr}&uid=${data.uid}&isAll=${data.isAll}`; - } else { - url = `/room/oper-micr?roomNum=${data.roomNum}&enableMicr=${data.enableMicr}&uid=${data.uid}`; - } +export const PostMuteAll = (data: any) => { return request({ - url, + url: `/room/mute-all?roomNum=${data.roomNum}&enableMicr=${data.enableMicr}`, method: 'get', }) } +export const PostOpenMicr = (data: any) => { + return request({ + url: `/room/oper-micr?roomNum=${data.roomNum}&enableMicr=${data.enableMicr}&uid=${data.uid}`, + method: 'get', + }) +} export const PostOpenCamera = (data: any) => request({ @@ -61,18 +61,16 @@ export const PostOpenCamera = (data: any) => data }) -export const PostRoomManager = (roomId: string, data: any) => +export const PostRoomManager = (roomId: string, roomNum: string) => request({ - url: `/room/manager?roomId=${roomId}`, + url: `/room/manager?roomId=${roomId}&roomNum=${roomNum}`, method: 'post', - data }) -export const DeleteRoomManager = (roomId: string, data: any) => +export const DeleteRoomManager = (roomId: string, roomNum: string) => request({ - url: `/room/manager?roomId=${roomId}`, + url: `/room/manager?roomId=${roomId}&roomNum=${roomNum}`, method: 'delete', - data }) export const GetRoomKickout = (roomNum: string, kickUid: string) => @@ -103,4 +101,14 @@ export const PostShowUser = (roomNum: string, uid: string) => request({ url: `/room/show-user?roomNum=${roomNum}&uid=${uid}`, method: 'post' + }) +export const GetJoin = (data: any) => + request({ + url: `/room/join?roomNum=${data.roomNum}&enableMicr=${data.enableMicr}&enableCamera=${data.enableCamera}`, + method: 'get' + }) +export const GetLeave = (data: any) => + request({ + url: `/room/leave?roomNum=${data.roomNum}`, + method: 'get' }) \ No newline at end of file diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 3cc22fd..85be2ec 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -8,7 +8,7 @@ import { SearchOutlined } from '@ant-design/icons'; import { useLocation, useNavigate } from 'react-router-dom'; import { thumbImageBufferToBase64 } from '@/utils/package/base64' import { storage } from '@/utils'; -import { GetRoomUser, PostOpenMicr, PostOpenCamera, PostRoomManager, DeleteRoomManager, GetRoomKickout, GetShowUser, PostShowUser } from '@/api/Meeting'; +import { GetRoomUser, PostOpenMicr, PostOpenCamera, PostRoomManager, DeleteRoomManager, GetRoomKickout, GetShowUser, PostShowUser, GetJoin, GetLeave, PostMuteAll } from '@/api/Meeting'; import ImageUrl from '@/utils/package/ImageUrl' import agora from '@/utils/package/agora' import { onInvoke, onSignalr, offSignalr, onStart } from '@/utils/package/signalr'; @@ -139,12 +139,7 @@ const Meeting: React.FC = () => { agora.registerEventHandler({ onJoinChannelSuccess: async (info: any, _elapsed: any) => { if (String(info.localUid).length !== 9) { - await onInvoke('joinChannel', { - roomNum: info.channelId, - enableMicr: true, - enableCamera: true - }) - await getRoomUser() + await getJoin() setTimeout(async () => { await agora.setupLocalVideo({ uid: Number(info.localUid), @@ -160,7 +155,6 @@ const Meeting: React.FC = () => { if (String(remoteUid).length === 9) { setIsShare(remoteUid) } else { - await getRoomUser() setTimeout(async () => { await agora.setupRemoteVideoJoin({ uid: Number(remoteUid), @@ -185,9 +179,6 @@ const Meeting: React.FC = () => { } return res }) - setTimeout(() => { - getRoomUser() - }, 1000); } }) agora.startCameraCapture() @@ -254,6 +245,7 @@ const Meeting: React.FC = () => { useEffect(() => { onSignalr(async (item: any) => { switch (item.key) { + // 聊天 case 'ReceiveMessage': let meetingUserChatDom = document.getElementById('meetingUserChat') as HTMLElement; if (!meetingUserChatDom) { @@ -263,17 +255,7 @@ const Meeting: React.FC = () => { } setChatList((newChatList: any) => [...newChatList, item]) break; - case 'RefreshUserList': - getRoomUser((list: any) => { - setCurrentVideoId(res => { - let currentVideoUserItem = list.find((item: any) => item.uid === res || item.screenShareId === res) - if (currentVideoUserItem) { - setCurrentLookUserAccount(currentVideoUserItem) - } - return res - }) - }) - break; + // 扩展操作 case 'Operation': // 1:全员退出会议 // 2:设置取消管理员 @@ -285,7 +267,7 @@ const Meeting: React.FC = () => { break; case 2: case 3: - getRoomUser() + break; case 4: setIsShare((res: any) => { @@ -299,15 +281,42 @@ const Meeting: React.FC = () => { break; } break; + // 全员离开房间 case 'ForceExitRoom': leaveChannel() break; + // 更新视图模式 case 'RefreshView': setMeetingMode(item.type) break; + // 全员看他 case 'ShowUser': getShowUser() break; + // 用户加入频道回调 + case 'UserJoined': + console.log(item, '用户加入频道回调'); + break; + // 用户退出频道回调 + case 'UserLeave': + console.log(item, '用户退出频道回调'); + break; + // 所有用户开闭麦 + case 'OperAllMicr': + console.log(item, '所有用户开闭麦'); + break; + // 用户关闭开启麦克风 + case 'OperMicr': + setAllUserListData(item.user) + break; + // 用户开启关闭摄像头 + case 'OperCamera': + setAllUserListData(item.user) + break; + // 管理员用户信息刷新 + case 'ManagerRefresh': + console.log(item, '管理员用户信息刷新'); + break; } }) return () => { @@ -348,18 +357,25 @@ const Meeting: React.FC = () => { }; }, [recorder]) + // 替换数据 + const setAllUserListData = (user: any): void => { + setAllUserList((res: any) => { + let item = res.find((row: any) => row.uid === user.uid) + if (item) { + for (const key in user) { + item[key] = user[key]; + } + } + return res + }) + } // 网络 const handleNetworkChange = (): void => { if (navigator.onLine) { message.success('网络已恢复。') setTimeout(async () => { await onStart(async () => { - await onInvoke('joinChannel', { - roomNum: state.channelId, - enableMicr: true, - enableCamera: true - }) - await getRoomUser() + await getJoin() }) }, 1000) } else { @@ -567,9 +583,7 @@ const Meeting: React.FC = () => { const leaveChannel = async (bool?: boolean): Promise => { await stopRecorderMedia() if (!bool) { - await onInvoke('levelChannel', { - roomNum: state.channelId - }) + await getLeave() } agora.leaveChannel() navigate('/home/index') @@ -627,23 +641,14 @@ const Meeting: React.FC = () => { if (res[0].code === 200 && res[1].code === 200) { res[0].data.forEach((item: any) => { item.isShow = true; - item.uid = item.id; }) setRoomUserList(res[0].data) res[1].data.items.forEach((item: any) => { item.uid = item.id; - const itemUser = res[0].data.find((row: any) => row.id === item.id) - if (itemUser) { - item.isRoom = true; - for (const itemUserKey in itemUser) { - for (const key in item) { - if (itemUserKey === key) { - item[key] = itemUser[itemUserKey]; - } - } - } - } else { - item.isRoom = false; + const itemUser = res[0].data.find((row: any) => row.uid === item.id) + item.isRoom = itemUser ? true : false; + for (const itemUserKey in itemUser) { + item[itemUserKey] = itemUser[itemUserKey]; } }); setAllUserList(res[1].data.items); @@ -661,12 +666,7 @@ const Meeting: React.FC = () => { case 'reconnect': if (e.value == true) { storage.setItem('reconnect', false) - await onInvoke('joinChannel', { - roomNum: state.channelId, - enableMicr: true, - enableCamera: true - }) - await getRoomUser() + await getJoin() } break; } @@ -690,12 +690,18 @@ const Meeting: React.FC = () => { } // 开关麦克风 const postOpenMicr = async (enableMicr: boolean, uid: string, isAll?: boolean): Promise => { - await PostOpenMicr({ - roomNum: state.channelId, - uid, - enableMicr, - isAll, - }) + if (isAll) { + await PostMuteAll({ + roomNum: state.channelId, + enableMicr + }) + } else { + await PostOpenMicr({ + roomNum: state.channelId, + uid, + enableMicr + }) + } } // 开关视频 const postOpenCamera = async (enableCamera: boolean, uid: string): Promise => { @@ -755,6 +761,21 @@ const Meeting: React.FC = () => { } return '' } + // 加入房间 + const getJoin = async (): Promise => { + await GetJoin({ + roomNum: state.channelId, + enableMicr: true, + enableCamera: true + }) + await getRoomUser() + } + // 离开房间 + const getLeave = async (): Promise => { + await GetLeave({ + roomNum: state.channelId, + }) + } return ( <> @@ -950,7 +971,7 @@ const Meeting: React.FC = () => { style={{ marginBottom: '10px', width: '80%' }} size={'small'} onClick={() => { - PostRoomManager(state.roomId, [item.id]).then(res => { + PostRoomManager(state.roomId, state.roomNum).then(res => { if (res.code === 200) { onInvoke('sendOper', { roomNum: state.channelId, @@ -965,7 +986,7 @@ const Meeting: React.FC = () => { style={{ marginBottom: '10px', width: '80%' }} size={'small'} onClick={() => { - DeleteRoomManager(state.roomId, [item.id]).then(res => { + DeleteRoomManager(state.roomId, state.roomNum).then(res => { if (res.code === 200) { onInvoke('sendOper', { roomNum: state.channelId, diff --git a/src/utils/package/signalr.ts b/src/utils/package/signalr.ts index a8fc798..149c037 100644 --- a/src/utils/package/signalr.ts +++ b/src/utils/package/signalr.ts @@ -30,7 +30,7 @@ export const onStart = async (callBack?: Function) => { } export const onReconnected = async (callBack: Function) => { if (connection) { - connection.onreconnected(async (newConnectionId: any) => { + connection.onreconnected(async (_newConnectionId: any) => { callBack() }); } @@ -54,11 +54,6 @@ export const onSignalr = (callBack: Function) => { uid, message, userName }) }); - connection.on("RefreshUserList", () => { - callBack({ - key: 'RefreshUserList' - }) - }); // 扩展操作 connection.on("Operation", (type: number) => { callBack({ @@ -85,25 +80,68 @@ export const onSignalr = (callBack: Function) => { type }) }); + // 用户加入频道回调 + connection.on("UserJoined", (user: any) => { + callBack({ + key: 'UserJoined', + user, + }) + }); + // 用户退出频道回调 + connection.on("UserLeave", (uid: string,) => { + callBack({ + key: 'UserLeave', + uid, + }) + }); + // 所有用户开闭麦 + connection.on("OperAllMicr", (enableMicr: boolean) => { + callBack({ + key: 'OperAllMicr', + enableMicr + }) + }); + // 用户关闭开启麦克风 + connection.on("OperMicr", (user: any) => { + callBack({ + key: 'OperMicr', + user + }) + }); + // 用户开启关闭摄像头 + connection.on("OperCamera", (user: any) => { + callBack({ + key: 'OperCamera', + user + }) + }); + // 管理员用户信息刷新 + connection.on("ManagerRefresh", (user: any) => { + callBack({ + key: 'ManagerRefresh', + user + }) + }); } } export const offSignalr = () => { if (connection) { connection.off('ReceiveMessage'); - connection.off('RefreshUserList'); connection.off('Operation'); connection.off('ForceExitRoom'); connection.off('ShowUser'); + connection.off('RefreshView'); + + connection.off('UserJoined'); + connection.off('UserLeave'); + connection.off('OperAllMicr'); + connection.off('OperMicr'); + connection.off('OperCamera'); + connection.off('ManagerRefresh'); } } export const onInvoke = async (str: string, data: any) => { switch (str) { - case 'joinChannel': - await connection.invoke(str, data.roomNum, data.enableMicr, data.enableCamera) - break; - case 'levelChannel': - await connection.invoke(str, data.roomNum) - break; case 'sendChannelMsg': await connection.invoke(str, data.roomNum, data.msg) break;