临时保存

.env

@@ -5,8 +5,8 @@ VITE_APP_CDN_URL=https://4dkk.4dage.com/v4/www/
 # sdk文件地址
 VITE_APP_SDK_DIR=https://4dkk.4dage.com/v4/sdk/4.5.0
 # VITE_APP_SOCKET_URL=wss://ws.gemer.xyz
-VITE_APP_SOCKET_URL=wss://testeurws.4dkankan.com
-# VITE_APP_SOCKET_URL=wss://221.4.210.172:16666
+# VITE_APP_SOCKET_URL=wss://testeurws.4dkankan.com
+VITE_APP_SOCKET_URL=wss://127.0.0.1:8889
 # 静态资源目录
 VITE_APP_STATIC_DIR=viewer
 

.env.development

@@ -4,7 +4,7 @@ VITE_APP_RESOURCE_URL=https://4dkk.4dage.com/
 VITE_APP_CDN_URL=https://4dkk.4dage.com/v4/www/
 # sdk文件地址
 VITE_APP_SDK_DIR=https://4dkk.4dage.com/v4/sdk/4.5.0
-VITE_APP_SOCKET_URL=wss://testws.4dkankan.com
+VITE_APP_SOCKET_URL=ws://127.0.0.1:8889
 # VITE_APP_SOCKET_URL=wss://testeurws.4dkankan.com
 # VITE_APP_SOCKET_URL=wss://221.4.210.172:16666
 # 静态资源目录

.env.home.test

@@ -3,7 +3,7 @@ VITE_APP_RESOURCE_URL=https://4dkk.4dage.com/
 # 静态资源地址
 VITE_APP_CDN_URL=https://4dkk.4dage.com/v4/www/
 # sdk文件地址
-VITE_APP_SDK_DIR=https://4dkk.4dage.com/v4/sdk/4.5.0
+VITE_APP_SDK_DIR=https://4dkk.4dage.com/v4/sdk/4.6.0-alpha.3
 # VITE_APP_SOCKET_URL=wss://ws.gemer.xyz
 VITE_APP_SOCKET_URL=wss://testws.4dkankan.com
 # VITE_APP_SOCKET_URL=wss://221.4.210.172:16666
@@ -22,5 +22,5 @@ VITE_PUBLIC_DIR='/livestream/'
 VITE_ROOM_MEMBER=5
 VITE_SHOW_CONSOLE=1
 VITE_SHOW_DEBUGPANEL=1
-VITE_TEST_VERSION =202301072000
+VITE_TEST_VERSION =20230111
 VITE_ENABLE_VIDEO=0

src/components/chatRoom/chatroom.scss

@@ -385,6 +385,10 @@
           align-items: center;
           justify-content: space-between;
           padding: 0.19rem 0.44rem;
+          &.offline {
+            // cursor: not-allowed;
+            opacity: 0.5;
+          }
 
           .userMsg {
             display: flex;
@@ -607,7 +611,7 @@
 //   z-index: 10000;
 // }
 @media screen and (max-width: 768px) {
-  #PageRtcLive .controlBar .control_btn > div{
+  #PageRtcLive .controlBar .control_btn > div {
     margin-right: 0.16rem;
   }
-}
+}

src/components/chatRoom/controls/actions.ts

@@ -94,6 +94,10 @@ export function handleActions({
 
     case 'room-valid-time':
       handleRoomValidTime(data);
+    case 'rooms-status': // 新加房间全员动态
+      console.log('data', members);
+      const membersStatus = members as any as UserInfoType[];
+      handleRoomStatus(membersStatus);
     default:
       break;
   }
@@ -169,15 +173,15 @@ function handleUserJoin(members?: UserInfoType[], user?: UserInfoType) {
       socket.emit('sync-floor', { floorId: appStore.floorId });
       rtcStore.setHosterOnline(true);
     } else {
-      if (rtcStore.isLeader) {
-        const { socket } = useSocket();
-        console.log('进入，主持人禁音', user.UserId);
-        socket.emit('action', {
-          type: 'users-muted',
-          muted: true,
-          userId: user.UserId,
-        });
-      }
+      // if (rtcStore.isLeader) {
+      //   const { socket } = useSocket();
+      //   console.log('进入，主持人禁音', user.UserId);
+      //   socket.emit('action', {
+      //     type: 'users-muted',
+      //     muted: true,
+      //     userId: user.UserId,
+      //   });
+      // }
     }
     const data: ChatContentType = {
       role: user?.Role,
@@ -416,3 +420,8 @@ const handleRoomValidTime = (data: RoomValidTimeType) => {
     }
   }
 };
+
+const handleRoomStatus = (members: UserInfoType[]) => {
+  const rtcStore = useRtcStore();
+  members && rtcStore.setMemberList(members);
+};

src/components/chatRoom/controls/join.ts

@@ -79,11 +79,11 @@ export function handleJoin(data: any) {
         data: unref(currentScene),
       });
       console.log('进入，主持人禁音-1');
-      socket.emit('action', {
-        type: 'users-muted',
-        muted: true,
-        userId: user.UserId,
-      });
+      // socket.emit('action', {
+      //   type: 'users-muted',
+      //   muted: true,
+      //   userId: user.UserId,
+      // });
     }
   }, 1500);
 }

src/components/chatRoom/index.vue

@@ -315,19 +315,19 @@
     });
   };
 
-  const sceneInit = (app,val) =>{
-      console.log('初始化同屏', unref(val[0]), unref(val[1]));
-      if (unref(val[0])) {
-        if (unref(isNativeLeader)) {
-          app.Connect.follow.start({ follow: false });
-        } else {
-          console.log('customer-follow');
-          app.Connect.follow.start({ follow: true });
-        }
-        app.Connect.follow.on('data', leaderSync);
-        app.Connect.paint.on('data', leaderPaint);
+  const sceneInit = (app, val) => {
+    console.log('初始化同屏', unref(val[0]), unref(val[1]));
+    if (unref(val[0])) {
+      if (unref(isNativeLeader)) {
+        app.Connect.follow.start({ follow: false });
+      } else {
+        console.log('customer-follow');
+        app.Connect.follow.start({ follow: true });
       }
-  }
+      app.Connect.follow.on('data', leaderSync);
+      app.Connect.paint.on('data', leaderPaint);
+    }
+  };
 
   onMounted(async () => {
     watch(
@@ -369,9 +369,9 @@
           // }
           const app = await useApp();
           if (app.Scene.loaded) {
-            sceneInit(app,val)
+            sceneInit(app, val);
           } else {
-            app.Scene.on('loaded',()=>sceneInit(app,val))
+            app.Scene.on('loaded', () => sceneInit(app, val));
           }
         } catch (error) {
           console.log('error', error);
@@ -516,7 +516,11 @@
 
   const handleCloseRoom = async () => {
     showCloseDialog.value = false;
-    const { closeSocket } = useSocket();
+    const { socket, closeSocket } = useSocket();
+    socket.emit('exit', {
+      roomId: rtcStore.roomId,
+      userId: rtcStore.userId,
+    });
     closeSocket();
   };
 

src/components/chatRoom/memberList.vue

@@ -8,7 +8,12 @@
           <i class="iconfont"></i>
         </div>
         <div class="memberList">
-          <div class="memberItem" v-for="(i, idx) in data" :key="idx">
+          <div
+            class="memberItem"
+            v-for="(i, idx) in data"
+            :key="idx"
+            :class="i.IsOnline ? 'online' : 'offline'"
+          >
             <div class="userMsg">
               <div class="avatar" :class="`${role}`">
                 <!-- 头像会存在一次到两次encodeURIComponent -->
@@ -25,7 +30,15 @@
               <div class="name">{{ i.Nickname }}</div>
             </div>
             <div class="button">
-              <!-- {{ i?.Role }} -->
+              <!-- T人 -->
+              <div
+                class="micBtn"
+                v-if="i?.Role !== 'leader'"
+                :class="i.IsWords ? 'ban_speak_on' : 'ban_speak_off'"
+                :wo="i.IsWords"
+                @click="isNativeLeader && userCanKick(i)"
+              ></div>
+
               <div
                 class="micBtn"
                 v-if="i?.Role !== 'leader'"
@@ -109,6 +122,14 @@
     });
   }
 
+  function userCanKick(member: UserInfoType) {
+    const { socket } = useSocket();
+    // member.IsWords = !member.IsWords;
+    socket.emit('action', {
+      type: 'users-kicked',
+      userId: member.UserId,
+    });
+  }
   function userCanSpeak(member: UserInfoType) {
     const { socket } = useSocket();
     member.IsMuted = !member.IsMuted;

src/components/chatRoom/roomControl.ts

@@ -2,20 +2,26 @@ import { useRtcStore } from '/@/store/modules/rtc';
 import consola from 'consola';
 import type { ConsolaLogObject } from 'consola';
 import { handleActions, handleSync, handleReceivePaint, handleJoin } from './controls';
-
+import type { SocketParams } from '/@/store/modules/rtc';
 // 所有socket业务事件集中点
 
 export function initSocketEvent(socket: SocketIOClient.Socket): void {
   if (socket) {
     socket.on('connect', () => {
       const rtcStore = useRtcStore();
-      const params = {
+      const params: SocketParams = {
         userId: rtcStore.userId,
         roomId: rtcStore.roomId,
         role: rtcStore.role || 'leader',
-        avatar: rtcStore.avatar,
+        avatar: rtcStore.avatar || '',
         nickname: rtcStore.nickname,
       };
+      if (rtcStore.role === 'leader') {
+        params.roomConfig = {
+          masterId: rtcStore.userId,
+          limit: 5,
+        };
+      }
       socket.emit('join', params);
     });
 

src/store/modules/rtc.ts

@@ -67,15 +67,29 @@ export interface UserInfoType {
   UserId: string;
   text?: string;
   order: number;
+  IsOnline?: boolean;
 }
 export type RoleType = 'leader' | 'customer';
+
+interface RoomConfigType {
+  limit: IntRange<5, 50>;
+  masterId: string;
+}
+
+type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N
+  ? Acc[number]
+  : Enumerate<N, [...Acc, Acc['length']]>;
+
+type IntRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;
+
 export interface SocketParams {
   userId: string;
   roomId: string;
   role: RoleType;
   avatar: string;
   nickname: string;
-  mode: string;
+  mode?: string;
+  roomConfig?: RoomConfigType;
 }
 
 interface BaseDialog {