shuisheng 2 лет назад
Родитель
Сommit
2b1907dbb4
4 измененных файлов с 53 добавлено и 48 удалено
  1. 15 25
      src/hooks/use-srs-ws.ts
  2. 2 1
      src/interface-ws.ts
  3. 9 3
      src/interface.ts
  4. 27 19
      src/views/pull/index.vue

+ 15 - 25
src/hooks/use-srs-ws.ts

@@ -322,14 +322,9 @@ export const useSrsWs = () => {
     ws.socketIo.on(
       WsMsgTypeEnum.liveUser,
       (data: WSGetRoomAllUserType['data']) => {
+        console.log('当前所有在线用户当前所有在线用户', data.liveUser.length);
         prettierReceiveWsMsg(WsMsgTypeEnum.liveUser, data);
-        const res = data.liveUser.map((item) => {
-          return {
-            id: item.id,
-            // userInfo: item.id,
-          };
-        });
-        liveUserList.value = res;
+        liveUserList.value = data.liveUser;
       }
     );
 
@@ -351,11 +346,7 @@ export const useSrsWs = () => {
       WsMsgTypeEnum.disableSpeaking,
       (data: WsDisableSpeakingType['data']) => {
         prettierReceiveWsMsg(WsMsgTypeEnum.disableSpeaking, data);
-        if (
-          (data.user_id === userStore.userInfo?.id &&
-            data.disable_expired_at) ||
-          data.is_disable_speaking
-        ) {
+        if (data.is_disable_speaking) {
           window.$message.error('你已被禁言!');
           appStore.disableSpeaking.set(data.live_room_id, {
             exp: data.disable_expired_at,
@@ -385,7 +376,6 @@ export const useSrsWs = () => {
           );
         }
         if (data.user_id !== userStore.userInfo?.id && data.disable_ok) {
-          console.log('disable_ok', data);
           window.$message.success('禁言成功!');
         }
         if (
@@ -408,10 +398,10 @@ export const useSrsWs = () => {
     // 用户加入房间完成
     ws.socketIo.on(WsMsgTypeEnum.joined, (data: WsJoinType['data']) => {
       prettierReceiveWsMsg(WsMsgTypeEnum.joined, data);
-      liveUserList.value.push({
-        id: data.socket_id,
-        userInfo: data.user_info,
-      });
+      // liveUserList.value.push({
+      //   id: data.socket_id,
+      //   userInfo: data.user_info,
+      // });
       appStore.setLiveRoomInfo(data.live_room);
       anchorInfo.value = data.anchor_info;
       ws.send<WsGetLiveUserType['data']>({
@@ -426,10 +416,10 @@ export const useSrsWs = () => {
     // 其他用户加入房间
     ws.socketIo.on(WsMsgTypeEnum.otherJoin, (data: WsOtherJoinType['data']) => {
       prettierReceiveWsMsg(WsMsgTypeEnum.otherJoin, data);
-      liveUserList.value.push({
-        id: data.join_socket_id,
-        userInfo: data.join_user_info,
-      });
+      // liveUserList.value.push({
+      //   id: data.join_socket_id,
+      //   userInfo: data.join_user_info,
+      // });
       const requestId = getRandomString(8);
       const danmu: IDanmu = {
         request_id: requestId,
@@ -507,10 +497,10 @@ export const useSrsWs = () => {
         .get(`${roomId.value}___${data.socket_id as string}`)
         ?.close();
       networkStore.removeRtc(`${roomId.value}___${data.socket_id as string}`);
-      const res = liveUserList.value.filter(
-        (item) => item.id !== data.socket_id
-      );
-      liveUserList.value = res;
+      // const res = liveUserList.value.filter(
+      //   (item) => item.id !== data.socket_id
+      // );
+      // liveUserList.value = res;
       damuList.value.push({
         socket_id: data.socket_id,
         msgType: DanmuMsgTypeEnum.userLeaved,

+ 2 - 1
src/interface-ws.ts

@@ -1,6 +1,7 @@
 import {
   DanmuMsgTypeEnum,
   ILiveRoom,
+  ILiveUser,
   IUser,
   LiveRoomTypeEnum,
 } from './interface';
@@ -82,7 +83,7 @@ export type WsUpdateJoinInfoType = IWsFormat<{
 
 /** 获取在线用户 */
 export type WSGetRoomAllUserType = IWsFormat<{
-  liveUser: { id: any; rooms: any[] }[];
+  liveUser: ILiveUser[];
 }>;
 
 /** 获取在线用户 */

+ 9 - 3
src/interface.ts

@@ -488,9 +488,15 @@ export interface IUpdateJoinInfo {
 }
 
 export interface ILiveUser {
-  id: string;
-  rooms?: string[];
-  userInfo?: IUser;
+  // id: string;
+  // rooms?: string[];
+  // userInfo?: IUser;
+  created_at: string;
+  value: {
+    socketId: string;
+    joinRoomId: number;
+    userInfo?: IUser;
+  };
 }
 
 export interface IDanmu {

+ 27 - 19
src/views/pull/index.vue

@@ -138,33 +138,33 @@
       </div>
       <div class="user-list">
         <div
-          v-for="(item, index) in liveUserList.filter(
-            (item) => item.id !== mySocketId
-          )"
+          v-for="(item, index) in liveUserList"
           :key="index"
           class="item"
         >
-          <div class="info">
+          <div
+            class="info"
+            v-if="item.value.userInfo"
+            @click="jumpProfile(item.value.userInfo.id!)"
+          >
             <div
               class="avatar"
-              :style="{ backgroundImage: `url(${item.userInfo?.avatar})` }"
+              :style="{
+                backgroundImage: `url(${item.value.userInfo.avatar})`,
+              }"
             ></div>
             <div class="username">
-              {{ item.userInfo?.username || item.id }}
+              {{ item.value.userInfo.username }}
             </div>
           </div>
-        </div>
-        <div
-          v-if="userStore.userInfo"
-          class="item"
-        >
-          <div class="info">
-            <img
-              :src="userStore.userInfo.avatar"
-              class="avatar"
-              alt=""
-            />
-            <div class="username">{{ userStore.userInfo.username }}</div>
+          <div
+            class="info"
+            v-else
+          >
+            <div class="avatar"></div>
+            <div class="username">
+              {{ item.value.socketId }}
+            </div>
           </div>
         </div>
       </div>
@@ -324,7 +324,7 @@
 </template>
 
 <script lang="ts" setup>
-import { getRandomString } from 'billd-utils';
+import { getRandomString, openToTarget } from 'billd-utils';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
@@ -472,6 +472,14 @@ function handleRestoreSpeakingUser({ socketId, userId }) {
   }
 }
 
+function jumpProfile(userId: number) {
+  const url = router.resolve({
+    name: routerName.profile,
+    params: { userId },
+  });
+  openToTarget(url.href);
+}
+
 function handleKickUser() {
   console.log('handleKickUser');
 }