优化

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', {
+                await GetLeave({
-                    roomNum: data.channelId
+                    roomNum: data.channelId,
                 })
                 await agora.leaveChannel()
             }

src/api/Meeting/index.ts

@@ -40,19 +40,19 @@ export const GetRoomUser = (roomNum: string) =>
   })
 
 
-export const PostOpenMicr = (data: any) => {
+export const PostMuteAll = (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}`;
-  }
   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'
   })

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', {
+          await getJoin()
-            roomNum: info.channelId,
-            enableMicr: true,
-            enableCamera: true
-          })
-          await getRoomUser()
           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', {
+          await getJoin()
-            roomNum: state.channelId,
-            enableMicr: true,
-            enableCamera: true
-          })
-          await getRoomUser()
         })
       }, 1000)
     } else {
@@ -567,9 +583,7 @@ const Meeting: React.FC = () => {
   const leaveChannel = async (bool?: boolean): Promise<void> => {
     await stopRecorderMedia()
     if (!bool) {
-      await onInvoke('levelChannel', {
+      await getLeave()
-        roomNum: state.channelId
-      })
     }
     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)
+          const itemUser = res[0].data.find((row: any) => row.uid === item.id)
-          if (itemUser) {
+          item.isRoom = itemUser ? true : false;
-            item.isRoom = true;
+          for (const itemUserKey in itemUser) {
-            for (const itemUserKey in itemUser) {
+            item[itemUserKey] = itemUser[itemUserKey];
-              for (const key in item) {
-                if (itemUserKey === key) {
-                  item[key] = itemUser[itemUserKey];
-                }
-              }
-            }
-          } else {
-            item.isRoom = false;
           }
         });
         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', {
+          await getJoin()
-            roomNum: state.channelId,
-            enableMicr: true,
-            enableCamera: true
-          })
-          await getRoomUser()
         }
         break;
     }
@@ -690,12 +690,18 @@ const Meeting: React.FC = () => {
   }
   // 开关麦克风
   const postOpenMicr = async (enableMicr: boolean, uid: string, isAll?: boolean): Promise<void> => {
-    await PostOpenMicr({
+    if (isAll) {
-      roomNum: state.channelId,
+      await PostMuteAll({
-      uid,
+        roomNum: state.channelId,
-      enableMicr,
+        enableMicr
-      isAll,
+      })
-    })
+    } else {
+      await PostOpenMicr({
+        roomNum: state.channelId,
+        uid,
+        enableMicr
+      })
+    }
   }
   // 开关视频
   const postOpenCamera = async (enableCamera: boolean, uid: string): Promise<void> => {
@@ -755,6 +761,21 @@ const Meeting: React.FC = () => {
     }
     return ''
   }
+  // 加入房间
+  const getJoin = async (): Promise<void> => {
+    await GetJoin({
+      roomNum: state.channelId,
+      enableMicr: true,
+      enableCamera: true
+    })
+    await getRoomUser()
+  }
+  // 离开房间
+  const getLeave = async (): Promise<void> => {
+    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,

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;