fix: 优化

script/config/webpack.common.ts

@@ -8,6 +8,7 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
 import ComponentsPlugin from 'unplugin-vue-components/webpack';
 import { VueLoaderPlugin } from 'vue-loader';
+// eslint-disable-next-line import/named
 import { Configuration, DefinePlugin } from 'webpack';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import { merge } from 'webpack-merge';

src/hooks/use-pull.ts

@@ -9,6 +9,7 @@ import {
   DanmuMsgTypeEnum,
   LiveLineEnum,
   LiveRenderEnum,
+  WsMessageContentTypeEnum,
   WsMessageMsgIsFileEnum,
 } from '@/interface';
 import { useAppStore } from '@/store/app';
@@ -41,15 +42,8 @@ export function usePull(roomId: string) {
   const isRemoteDesk = ref(false);
   const videoElArr = ref<HTMLVideoElement[]>([]);
   const remoteVideo = ref<HTMLElement[]>([]);
-  const {
-    mySocketId,
-    initWs,
-    isBilibili,
-    roomLiving,
-    anchorInfo,
-    liveUserList,
-    damuList,
-  } = useWebsocket();
+  const { mySocketId, initWs, roomLiving, anchorInfo, liveUserList, damuList } =
+    useWebsocket();
   const { flvVideoEl, flvIsPlaying, startFlvPlay, destroyFlv } = useFlvPlay();
   const { hlsVideoEl, hlsIsPlaying, startHlsPlay, destroyHls } = useHlsPlay();
   const stopDrawingArr = ref<any[]>([]);
@@ -442,43 +436,63 @@ export function usePull(roomId: string) {
     const key = event.key.toLowerCase();
     if (key === 'enter') {
       event.preventDefault();
-      danmuMsgType.value = DanmuMsgTypeEnum.danmu;
-      sendDanmu();
+      sendDanmuTxt(danmuStr.value);
     }
   }
 
-  function sendDanmu() {
+  function sendDanmuTxt(txt: string) {
     if (!loginTip()) {
       return;
     }
     if (!commentAuthTip()) {
       return;
     }
-    if (!danmuStr.value.trim().length) {
+    if (!txt.trim().length) {
       window.$message.warning('请输入弹幕内容！');
       return;
     }
     const instance = networkStore.wsMap.get(roomId);
     if (!instance) return;
+    const messageData: WsMessageType['data'] = {
+      content: txt,
+      content_type: WsMessageContentTypeEnum.txt,
+      msg_type: DanmuMsgTypeEnum.danmu,
+      live_room_id: Number(roomId),
+      isBilibili: false,
+    };
+    instance.send({
+      requestId: getRandomString(8),
+      msgType: WsMsgTypeEnum.message,
+      data: messageData,
+    });
+  }
+
+  function sendDanmuImg(url: string) {
+    if (!loginTip()) {
+      return;
+    }
+    if (!commentAuthTip()) {
+      return;
+    }
+    if (!url.trim().length) {
+      window.$message.warning('图片不能为空！');
+      return;
+    }
+    const instance = networkStore.wsMap.get(roomId);
+    if (!instance) return;
     const requestId = getRandomString(8);
-    console.log(isBilibili.value, isBilibili, 'isBilibili');
     const messageData: WsMessageType['data'] = {
-      socket_id: '',
-      msg: danmuStr.value,
-      msgType: danmuMsgType.value,
+      content: url,
+      content_type: WsMessageContentTypeEnum.img,
+      msg_type: DanmuMsgTypeEnum.danmu,
       live_room_id: Number(roomId),
-      msgIsFile: msgIsFile.value,
-      send_msg_time: +new Date(),
-      user_agent: navigator.userAgent,
-      isBilibili: isBilibili.value,
+      isBilibili: false,
     };
     instance.send({
       requestId,
       msgType: WsMsgTypeEnum.message,
       data: messageData,
     });
-
-    danmuStr.value = '';
   }
 
   return {
@@ -490,7 +504,8 @@ export function usePull(roomId: string) {
     closeWs,
     closeRtc,
     keydownDanmu,
-    sendDanmu,
+    sendDanmuTxt,
+    sendDanmuImg,
     showPlayBtn,
     danmuMsgType,
     isPlaying,

src/hooks/use-push.ts

@@ -6,7 +6,11 @@ import {
   fetchCreateUserLiveRoom,
   fetchUserHasLiveRoom,
 } from '@/api/userLiveRoom';
-import { DanmuMsgTypeEnum, WsMessageMsgIsFileEnum } from '@/interface';
+import {
+  DanmuMsgTypeEnum,
+  WsMessageContentTypeEnum,
+  WsMessageMsgIsFileEnum,
+} from '@/interface';
 import { useAppStore } from '@/store/app';
 import { useNetworkStore } from '@/store/network';
 import { useUserStore } from '@/store/user';
@@ -331,21 +335,18 @@ export function usePush() {
       return;
     }
     const instance = networkStore.wsMap.get(roomId.value);
-    if (!instance) {
-      window.$message.error('还没开播，不能发送弹幕！');
-      return;
-    }
-    instance.send<WsMessageType['data']>({
+    // if (!instance) {
+    //   window.$message.error('还没开播，不能发送弹幕！');
+    //   return;
+    // }
+    instance?.send<WsMessageType['data']>({
       requestId: getRandomString(8),
       msgType: WsMsgTypeEnum.message,
       data: {
-        socket_id: '',
-        msg: danmuStr.value,
-        msgType: DanmuMsgTypeEnum.danmu,
+        content: danmuStr.value,
+        content_type: WsMessageContentTypeEnum.txt,
+        msg_type: DanmuMsgTypeEnum.danmu,
         live_room_id: Number(roomId.value),
-        msgIsFile: msgIsFile.value,
-        send_msg_time: +new Date(),
-        user_agent: navigator.userAgent,
         isBilibili: false,
       },
     });

src/hooks/use-websocket.ts

@@ -15,7 +15,7 @@ import { useWebRtcTencentcloudCss } from '@/hooks/webrtc/tencentcloudCss';
 import {
   DanmuMsgTypeEnum,
   ILiveUser,
-  WsMessageMsgIsFileEnum,
+  WsMessageContentTypeEnum,
 } from '@/interface';
 import router, { routerName } from '@/router';
 import { useAppStore } from '@/store/app';
@@ -24,7 +24,6 @@ import { useUserStore } from '@/store/user';
 import { LiveRoomTypeEnum } from '@/types/ILiveRoom';
 import { IUser } from '@/types/IUser';
 import {
-  IDanmu,
   WSGetRoomAllUserType,
   WSLivePkKeyType,
   WsAnswerType,
@@ -107,7 +106,7 @@ export const useWebsocket = () => {
   const currentVideoContentHint = ref(videoContentHint.value[3].value);
   const currentAudioContentHint = ref(audioContentHint.value[0].value);
   const timerObj = ref({});
-  const damuList = ref<IDanmu[]>([]);
+  const damuList = ref<WsMessageType[]>([]);
 
   onUnmounted(() => {
     clearInterval(loopHeartbeatTimer.value);
@@ -618,18 +617,7 @@ export const useWebsocket = () => {
     // 收到用户发送消息
     ws.socketIo.on(WsMsgTypeEnum.message, (data: WsMessageType) => {
       prettierReceiveWsMsg(WsMsgTypeEnum.message, data);
-      damuList.value.push({
-        user_agent: data.data.user_agent,
-        live_room_id: data.data.live_room_id,
-        request_id: data.request_id,
-        socket_id: data.socket_id,
-        msgType: data.data.msgType,
-        msg: data.data.msg,
-        userInfo: data.user_info,
-        msgIsFile: data.data.msgIsFile,
-        send_msg_time: data.data.send_msg_time,
-        isBilibili: data.data.isBilibili,
-      });
+      damuList.value.push(data);
     });
 
     // 收到disableSpeaking
@@ -804,16 +792,18 @@ export const useWebsocket = () => {
     // 其他用户加入房间
     ws.socketIo.on(WsMsgTypeEnum.otherJoin, (data: WsOtherJoinType['data']) => {
       prettierReceiveWsMsg(WsMsgTypeEnum.otherJoin, data);
-      const requestId = getRandomString(8);
-      const danmu: IDanmu = {
-        live_room_id: data.live_room.id!,
-        request_id: requestId,
-        msgType: DanmuMsgTypeEnum.otherJoin,
-        socket_id: data.join_socket_id,
-        userInfo: data.join_user_info,
-        msgIsFile: WsMessageMsgIsFileEnum.no,
-        msg: '',
-        send_msg_time: +new Date(),
+      const danmu: WsMessageType = {
+        request_id: '',
+        socket_id: '',
+        time: +new Date(),
+        user_agent: navigator.userAgent,
+        data: {
+          live_room_id: data.live_room.id!,
+          msg_id: -1,
+          content: '',
+          content_type: WsMessageContentTypeEnum.txt,
+          msg_type: DanmuMsgTypeEnum.otherJoin,
+        },
       };
       damuList.value.push(danmu);
       if (route.name === routerName.push) {
@@ -942,13 +932,17 @@ export const useWebsocket = () => {
       }
       networkStore.removeRtc(data.socket_id);
       damuList.value.push({
-        live_room_id: Number(roomId.value),
-        socket_id: data.socket_id,
-        msgType: DanmuMsgTypeEnum.userLeaved,
-        msgIsFile: WsMessageMsgIsFileEnum.no,
-        userInfo: data.user_info,
-        msg: '',
-        send_msg_time: +new Date(),
+        request_id: '',
+        socket_id: '',
+        time: +new Date(),
+        user_agent: navigator.userAgent,
+        data: {
+          live_room_id: Number(roomId.value),
+          msg_id: -1,
+          content: '',
+          content_type: WsMessageContentTypeEnum.txt,
+          msg_type: DanmuMsgTypeEnum.userLeaved,
+        },
       });
     });
   }

src/interface.ts

@@ -159,6 +159,12 @@ export enum WsMessageMsgIsFileEnum {
   no,
 }
 
+export enum WsMessageContentTypeEnum {
+  txt,
+  img,
+  video,
+}
+
 export enum WsMessageMsgIsShowEnum {
   yes,
   no,
@@ -173,18 +179,19 @@ export interface IWsMessage {
   id?: number;
   username?: string;
   origin_username?: string;
+  content_type?: WsMessageContentTypeEnum;
   content?: string;
   origin_content?: string;
   redbag_send_id?: number;
   live_room_id?: number;
   user_id?: number;
   ip?: string;
-  msg_is_file?: WsMessageMsgIsFileEnum;
   msg_type?: DanmuMsgTypeEnum;
   user_agent?: string;
   send_msg_time?: number;
   is_show?: WsMessageMsgIsShowEnum;
   is_verify?: WsMessageMsgIsVerifyEnum;
+  remark?: string;
 
   user?: IUser;
   redbag_send?: IRedbagSend;

src/types/websocket.ts

@@ -1,7 +1,7 @@
 import {
   DanmuMsgTypeEnum,
   ILiveUser,
-  WsMessageMsgIsFileEnum,
+  WsMessageContentTypeEnum,
 } from '@/interface';
 import { ILiveRoom, LiveRoomTypeEnum } from '@/types/ILiveRoom';
 import { IUser } from '@/types/IUser';
@@ -89,10 +89,11 @@ export interface IWsFormat<T> {
   socket_id: string;
   /** 用户信息 */
   user_info?: IUser;
-  /** 用户id */
-  user_id?: number;
   /** 用户token */
   user_token?: string;
+  /** 消息时间戳 */
+  time: number;
+  user_agent: string;
   data: T;
 }
 
@@ -159,20 +160,17 @@ export type WsRemoteDeskBehaviorType = IWsFormat<{
 }>;
 
 export interface IDanmu {
-  msgType: DanmuMsgTypeEnum;
-  msgIsFile: WsMessageMsgIsFileEnum;
-  msg: string;
-  username?: string;
-  user_agent?: string;
-  send_msg_time: number;
+  /** 消息类型 */
+  msg_type: DanmuMsgTypeEnum;
+  /** 消息内容类型 */
+  content_type?: WsMessageContentTypeEnum;
+  /** 消息内容 */
+  content: string;
   live_room_id: number;
   redbag_send_id?: number;
+  /** 消息id */
   msg_id?: number;
   isBilibili?: boolean;
-
-  socket_id: string;
-  request_id?: string;
-  userInfo?: IUser;
 }
 
 /** ws消息 */

src/utils/index.ts

@@ -1,7 +1,15 @@
 // TIP: ctrl+cmd+t,生成函数注释
-import { computeBox, getRangeRandom } from 'billd-utils';
+import { computeBox, getRangeRandom, judgeType } from 'billd-utils';
 import sparkMD5 from 'spark-md5';
 
+/**
+ * ios日期兼容
+ * 2022-01-19 15:28:00 转成 2022/01/19 15:28:00
+ */
+export function iosTimestamp(time: string) {
+  return time.replace(/-/g, '/');
+}
+
 export function handleStrEllipsis(str: string, maxlen: number) {
   const res = str || '';
   const len = maxlen || 3;
@@ -121,11 +129,15 @@ export function formatMoney(money?: number) {
   return (money / 100).toFixed(2);
 }
 
-export const formatTimeHour = (timestamp: number) => {
+export const formatTimeHour = (time: number | string | Date) => {
   function addZero(num: number) {
     return num < 10 ? `0${num}` : num;
   }
-  const date = new Date(timestamp);
+  let time2 = time;
+  if (judgeType(time) === 'string') {
+    time2 = iosTimestamp(time as string);
+  }
+  const date = new Date(time2);
 
   // 获取小时
   const hours = date.getHours();

src/utils/network/webSocket.ts

@@ -73,8 +73,9 @@ export class WebSocketClass {
       request_id: requestId,
       socket_id: this.socketIo.id,
       user_info: userStore.userInfo,
-      user_id: userStore.userInfo?.id || undefined,
       user_token: userStore.token || undefined,
+      user_agent: navigator.userAgent,
+      time: +new Date(),
       data: data || {},
     };
     // const binary = stringToArrayBuffer(JSON.stringify(sendData));

src/views/h5/room/index.vue

@@ -81,16 +81,14 @@
                 :key="index"
                 class="item"
               >
-                <template v-if="item.msgType === DanmuMsgTypeEnum.danmu">
-                  <span class="time">
-                    [{{ formatTimeHour(item.send_msg_time) }}]
-                  </span>
+                <template v-if="item.data.msg_type === DanmuMsgTypeEnum.danmu">
+                  <span class="time"> [{{ formatTimeHour(item.time) }}] </span>
                   <span class="name">
-                    <span v-if="item.userInfo">
-                      <span>{{ item.userInfo.username }}</span>
+                    <span v-if="item.user_info">
+                      <span>{{ item.user_info.username }}</span>
                       <span>
                         [{{
-                          item.userInfo.roles?.map((v) => v.role_name).join()
+                          item.user_info.roles?.map((v) => v.role_name).join()
                         }}]
                       </span>
                     </span>
@@ -102,47 +100,49 @@
                   </span>
                   <span
                     class="msg"
-                    v-if="item.msgIsFile === WsMessageMsgIsFileEnum.no"
+                    v-if="
+                      item.data.content_type === WsMessageContentTypeEnum.txt
+                    "
                   >
-                    {{ item.msg }}
+                    {{ item.data.content }}
                   </span>
                   <div
                     class="msg img"
                     v-else
                   >
                     <img
-                      v-lazy="item.msg"
+                      v-lazy="item.data.content"
                       alt=""
                       @load="handleScrollTop"
                     />
                   </div>
                 </template>
                 <template
-                  v-else-if="item.msgType === DanmuMsgTypeEnum.otherJoin"
+                  v-else-if="item.data.msg_type === DanmuMsgTypeEnum.otherJoin"
                 >
                   <span class="name system">系统通知：</span>
                   <span class="msg">
-                    {{ item.userInfo?.username || item.socket_id }}进入直播！
+                    {{ item.user_info?.username || item.socket_id }}进入直播！
                   </span>
                 </template>
                 <template
-                  v-else-if="item.msgType === DanmuMsgTypeEnum.userLeaved"
+                  v-else-if="item.data.msg_type === DanmuMsgTypeEnum.userLeaved"
                 >
                   <span class="name system">系统通知：</span>
                   <span class="msg">
-                    {{ item.userInfo?.username || item.socket_id }}离开直播！
+                    {{ item.user_info?.username || item.socket_id }}离开直播！
                   </span>
                 </template>
-                <template v-else-if="item.msgType === DanmuMsgTypeEnum.reward">
-                  <span class="time">
-                    [{{ formatTimeHour(item.send_msg_time) }}]
-                  </span>
+                <template
+                  v-else-if="item.data.msg_type === DanmuMsgTypeEnum.reward"
+                >
+                  <span class="time"> [{{ formatTimeHour(item.time) }}] </span>
                   <span class="name">
-                    <span v-if="item.userInfo">
-                      <span>{{ item.userInfo.username }}</span>
+                    <span v-if="item.user_info">
+                      <span>{{ item.user_info.username }}</span>
                       <span>
                         [{{
-                          item.userInfo.roles?.map((v) => v.role_name).join()
+                          item.user_info.roles?.map((v) => v.role_name).join()
                         }}]
                       </span>
                     </span>
@@ -152,7 +152,7 @@
                     </span>
                     <span>：</span>
                   </span>
-                  <span class="msg"> 打赏了：{{ item.msg }} </span>
+                  <span class="msg"> 打赏了：{{ item.data.content }} </span>
                 </template>
               </div>
             </div>
@@ -287,7 +287,7 @@
         type="info"
         size="small"
         :color="THEME_COLOR"
-        @click="sendDanmu"
+        @click="handleSendDanmu"
       >
         发送
       </n-button>
@@ -310,7 +310,7 @@ import { useFullScreen, usePictureInPicture } from '@/hooks/use-play';
 import { usePull } from '@/hooks/use-pull';
 import {
   DanmuMsgTypeEnum,
-  WsMessageMsgIsFileEnum,
+  WsMessageContentTypeEnum,
   WsMessageMsgIsShowEnum,
   WsMessageMsgIsVerifyEnum,
 } from '@/interface';
@@ -341,7 +341,7 @@ const {
   handlePlay,
   initPull,
   keydownDanmu,
-  sendDanmu,
+  sendDanmuTxt,
   closeRtc,
   closeWs,
   liveUserList,
@@ -383,6 +383,10 @@ onMounted(() => {
   handleHistoryMsg();
 });
 
+function handleSendDanmu() {
+  sendDanmuTxt(danmuStr.value);
+}
+
 function handleLogout() {
   userStore.logout();
   setTimeout(() => {
@@ -404,17 +408,19 @@ async function handleHistoryMsg() {
     if (res.code === 200) {
       res.data.rows.forEach((v) => {
         damuList.value.unshift({
-          ...v,
-          live_room_id: v.live_room_id!,
-          msg_id: v.id!,
+          request_id: '',
           socket_id: '',
-          msgType: v.msg_type!,
-          msgIsFile: v.msg_is_file!,
-          userInfo: v.user,
-          msg: v.content!,
-          username: v.username!,
-          send_msg_time: Number(v.send_msg_time),
-          redbag_send_id: v.redbag_send_id,
+          time: v.send_msg_time!,
+          user_agent: v.user_agent!,
+          user_info: v.user,
+          data: {
+            live_room_id: v.live_room_id!,
+            msg_id: v.id!,
+            content: v.content!,
+            content_type: v.content_type!,
+            msg_type: v.msg_type!,
+            redbag_send_id: v.redbag_send_id,
+          },
         });
       });
       if (
@@ -422,12 +428,17 @@ async function handleHistoryMsg() {
         appStore.liveRoomInfo?.system_msg !== ''
       ) {
         damuList.value.push({
-          live_room_id: Number(roomId.value),
+          request_id: '',
           socket_id: '',
-          msgType: DanmuMsgTypeEnum.system,
-          msgIsFile: WsMessageMsgIsFileEnum.no,
-          msg: appStore.liveRoomInfo.system_msg,
-          send_msg_time: Number(+new Date()),
+          time: +new Date(),
+          user_agent: navigator.userAgent,
+          data: {
+            live_room_id: Number(roomId.value),
+            msg_id: -1,
+            content: appStore.liveRoomInfo?.system_msg,
+            content_type: WsMessageContentTypeEnum.txt,
+            msg_type: DanmuMsgTypeEnum.system,
+          },
         });
       }
     }
@@ -549,10 +560,6 @@ function startPull() {
         margin-left: 10px;
       }
     }
-    .right {
-      .btn {
-      }
-    }
   }
   .video-wrap {
     position: relative;

src/views/pull/index.vue

@@ -262,46 +262,46 @@
           :key="index"
           class="item"
         >
-          <template v-if="item.msgType === DanmuMsgTypeEnum.reward">
+          <template v-if="item.data.msg_type === DanmuMsgTypeEnum.reward">
             <div class="reward">
-              <span>[{{ formatTimeHour(item.send_msg_time) }}]</span>
+              <span>[{{ formatTimeHour(item.time) }}]</span>
               <span>
-                {{ item.userInfo?.username }} 打赏了{{ item.msg }}！
+                {{ item.user_info?.username }} 打赏了{{ item.data.content }}！
               </span>
             </div>
           </template>
-          <template v-if="item.msgType === DanmuMsgTypeEnum.danmu">
-            <span class="time">[{{ formatTimeHour(item.send_msg_time) }}]</span>
+          <template v-if="item.data.msg_type === DanmuMsgTypeEnum.danmu">
+            <span class="time">[{{ formatTimeHour(item.time) }}]</span>
             <span class="name">
               <span
                 v-if="
-                  item.userInfo && userStore.userInfo?.id === item.userInfo.id
+                  item.user_info && userStore.userInfo?.id === item.user_info.id
                 "
               >
-                <span>{{ item.userInfo.username }}</span>
+                <span>{{ item.user_info.username }}</span>
                 <span>
-                  [{{ item.userInfo.roles?.map((v) => v.role_name).join() }}]
+                  [{{ item.user_info.roles?.map((v) => v.role_name).join() }}]
                 </span>
               </span>
               <Dropdown
                 trigger="click"
                 positon="left"
-                v-else-if="item.userInfo"
+                v-else-if="item.user_info"
               >
                 <template #btn>
-                  <span>{{ item.userInfo.username }}</span>
+                  <span>{{ item.user_info.username }}</span>
                   <span>
-                    [{{ item.userInfo.roles?.map((v) => v.role_name).join() }}]
+                    [{{ item.user_info.roles?.map((v) => v.role_name).join() }}]
                   </span>
                 </template>
                 <template #list>
                   <div class="list">
-                    <div class="item">{{ item.userInfo.username }}</div>
+                    <div class="item">{{ item.user_info.username }}</div>
                     <div
                       class="item operator"
                       @click="
                         handleDisableSpeakingUser({
-                          userId: item.userInfo.id,
+                          userId: item.user_info.id,
                           socketId: item.socket_id,
                         })
                       "
@@ -312,7 +312,7 @@
                       class="item operator"
                       @click="
                         handleRestoreSpeakingUser({
-                          userId: item.userInfo.id,
+                          userId: item.user_info.id,
                           socketId: item.socket_id,
                         })
                       "
@@ -336,31 +336,35 @@
             <span>：</span>
             <span
               class="msg"
-              v-if="item.msgIsFile === WsMessageMsgIsFileEnum.no"
+              v-if="item.data.content_type === WsMessageContentTypeEnum.txt"
             >
-              {{ item.msg }}
+              {{ item.data.content }}
             </span>
             <div
               class="msg img"
               v-else
             >
               <img
-                :src="item.msg"
+                :src="item.data.content"
                 alt=""
                 @load="handleScrollTop"
               />
             </div>
           </template>
-          <template v-else-if="item.msgType === DanmuMsgTypeEnum.otherJoin">
+          <template
+            v-else-if="item.data.msg_type === DanmuMsgTypeEnum.otherJoin"
+          >
             <span class="name system">系统通知：</span>
             <span class="msg">
-              {{ item.userInfo?.username || item.socket_id }}进入直播！
+              {{ item.user_info?.username || item.socket_id }}进入直播！
             </span>
           </template>
-          <template v-else-if="item.msgType === DanmuMsgTypeEnum.userLeaved">
+          <template
+            v-else-if="item.data.msg_type === DanmuMsgTypeEnum.userLeaved"
+          >
             <span class="name system">系统通知：</span>
             <span class="msg">
-              {{ item.userInfo?.username || item.socket_id }}离开直播！
+              {{ item.user_info?.username || item.socket_id }}离开直播！
             </span>
           </template>
         </div>
@@ -480,6 +484,7 @@ import {
   IGoods,
   LiveLineEnum,
   LiveRenderEnum,
+  WsMessageContentTypeEnum,
   WsMessageMsgIsFileEnum,
   WsMessageMsgIsShowEnum,
   WsMessageMsgIsVerifyEnum,
@@ -528,7 +533,8 @@ const {
   closeWs,
   closeRtc,
   keydownDanmu,
-  sendDanmu,
+  sendDanmuTxt,
+  sendDanmuImg,
   handlePlay,
   videoWrapRef,
   danmuMsgType,
@@ -681,8 +687,7 @@ function handleSendGetLiveUser(liveRoomId: number) {
 }
 
 function handleSendDanmu() {
-  danmuMsgType.value = DanmuMsgTypeEnum.danmu;
-  sendDanmu();
+  sendDanmuTxt(danmuStr.value);
 }
 
 async function getGiftGroupList() {
@@ -728,17 +733,19 @@ async function handleHistoryMsg() {
     if (res.code === 200) {
       res.data.rows.forEach((v) => {
         damuList.value.unshift({
-          ...v,
-          live_room_id: v.live_room_id!,
-          msg_id: v.id!,
+          request_id: '',
           socket_id: '',
-          msgType: v.msg_type!,
-          msgIsFile: v.msg_is_file!,
-          userInfo: v.user,
-          msg: v.content!,
-          username: v.username!,
-          send_msg_time: Number(v.send_msg_time),
-          redbag_send_id: v.redbag_send_id,
+          time: v.send_msg_time!,
+          user_agent: v.user_agent!,
+          user_info: v.user,
+          data: {
+            live_room_id: v.live_room_id!,
+            msg_id: v.id!,
+            content: v.content!,
+            content_type: v.content_type!,
+            msg_type: v.msg_type!,
+            redbag_send_id: v.redbag_send_id,
+          },
         });
       });
       if (
@@ -746,12 +753,17 @@ async function handleHistoryMsg() {
         appStore.liveRoomInfo?.system_msg !== ''
       ) {
         damuList.value.push({
-          live_room_id: Number(roomId.value),
+          request_id: '',
           socket_id: '',
-          msgType: DanmuMsgTypeEnum.system,
-          msgIsFile: WsMessageMsgIsFileEnum.no,
-          msg: appStore.liveRoomInfo.system_msg,
-          send_msg_time: Number(+new Date()),
+          time: +new Date(),
+          user_agent: navigator.userAgent,
+          data: {
+            live_room_id: Number(roomId.value),
+            msg_id: -1,
+            content: appStore.liveRoomInfo.system_msg,
+            content_type: WsMessageContentTypeEnum.txt,
+            msg_type: DanmuMsgTypeEnum.system,
+          },
         });
       }
     }
@@ -896,9 +908,7 @@ async function uploadChange() {
         file: fileList[0],
       });
       if (res?.resultUrl) {
-        danmuMsgType.value = DanmuMsgTypeEnum.danmu;
-        danmuStr.value = res.resultUrl || '错误图片';
-        sendDanmu();
+        sendDanmuImg(res.resultUrl || '错误图片');
       }
     } catch (error) {
       console.log(error);
@@ -925,8 +935,7 @@ async function handlePay(item: IGoods) {
   if (res.code === 200) {
     window.$message.success('打赏成功！');
     danmuMsgType.value = DanmuMsgTypeEnum.reward;
-    danmuStr.value = item.name || '';
-    sendDanmu();
+    sendDanmuTxt(item.name || '');
   }
   userStore.updateMyWallet();
   getGiftGroupList();
@@ -1136,8 +1145,6 @@ function handleScrollTop() {
           .bottom {
             display: flex;
             font-size: 14px;
-            .desc {
-            }
             .area {
               margin: 0 10px;
               color: #9499a0;

src/views/push/index.vue

@@ -313,14 +313,12 @@
               :key="index"
               class="item"
             >
-              <template v-if="item.msgType === DanmuMsgTypeEnum.danmu">
-                <span class="time">
-                  [{{ formatTimeHour(item.send_msg_time) }}]
-                </span>
+              <template v-if="item.data.msg_type === DanmuMsgTypeEnum.danmu">
+                <span class="time"> [{{ formatTimeHour(item.time) }}] </span>
                 <span class="name">
-                  <span v-if="item.userInfo">
-                    {{ item.userInfo.username }}[{{
-                      item.userInfo.roles?.map((v) => v.role_name).join()
+                  <span v-if="item.user_info">
+                    {{ item.user_info.username }}[{{
+                      item.user_info.roles?.map((v) => v.role_name).join()
                     }}]
                   </span>
                   <span v-else>{{ item.socket_id }}[游客]</span>
@@ -328,34 +326,36 @@
                 <span>：</span>
                 <span
                   class="msg"
-                  v-if="item.msgIsFile === WsMessageMsgIsFileEnum.no"
+                  v-if="item.data.content_type === WsMessageContentTypeEnum.txt"
                 >
-                  {{ item.msg }}
+                  {{ item.data.content }}
                 </span>
                 <div
                   class="msg img"
                   v-else
                 >
                   <img
-                    v-lazy="item.msg"
+                    v-lazy="item.data.content"
                     alt=""
                     @load="handleScrollTop"
                   />
                 </div>
               </template>
-              <template v-else-if="item.msgType === DanmuMsgTypeEnum.otherJoin">
+              <template
+                v-else-if="item.data.msg_type === DanmuMsgTypeEnum.otherJoin"
+              >
                 <span class="name system">系统通知：</span>
                 <span class="msg">
-                  <span>{{ item.userInfo?.username || item.socket_id }}</span>
+                  <span>{{ item.user_info?.username || item.socket_id }}</span>
                   <span>进入直播！</span>
                 </span>
               </template>
               <template
-                v-else-if="item.msgType === DanmuMsgTypeEnum.userLeaved"
+                v-else-if="item.data.msg_type === DanmuMsgTypeEnum.userLeaved"
               >
                 <span class="name system">系统通知：</span>
                 <span class="msg">
-                  <span>{{ item.userInfo?.username || item.socket_id }}</span>
+                  <span>{{ item.user_info?.username || item.socket_id }}</span>
                   <span>离开直播！</span>
                 </span>
               </template>
@@ -483,6 +483,7 @@ import { useQiniuJsUpload } from '@/hooks/use-upload';
 import {
   DanmuMsgTypeEnum,
   MediaTypeEnum,
+  WsMessageContentTypeEnum,
   WsMessageMsgIsFileEnum,
   WsMessageMsgIsShowEnum,
   WsMessageMsgIsVerifyEnum,
@@ -1141,17 +1142,19 @@ async function handleHistoryMsg() {
     if (res.code === 200) {
       res.data.rows.forEach((v) => {
         damuList.value.unshift({
-          ...v,
-          live_room_id: v.live_room_id!,
-          msg_id: v.id!,
+          request_id: '',
           socket_id: '',
-          msgType: v.msg_type!,
-          msgIsFile: v.msg_is_file!,
-          userInfo: v.user,
-          msg: v.content!,
-          username: v.username!,
-          send_msg_time: Number(v.send_msg_time),
-          redbag_send_id: v.redbag_send_id,
+          time: v.send_msg_time!,
+          user_agent: v.user_agent!,
+          user_info: v.user,
+          data: {
+            live_room_id: v.live_room_id!,
+            msg_id: v.id!,
+            content: v.content!,
+            content_type: v.content_type!,
+            msg_type: v.msg_type!,
+            redbag_send_id: v.redbag_send_id,
+          },
         });
       });
       if (
@@ -1159,12 +1162,17 @@ async function handleHistoryMsg() {
         appStore.liveRoomInfo?.system_msg !== ''
       ) {
         damuList.value.push({
-          live_room_id: Number(roomId.value),
+          request_id: '',
           socket_id: '',
-          msgType: DanmuMsgTypeEnum.system,
-          msgIsFile: WsMessageMsgIsFileEnum.no,
-          msg: appStore.liveRoomInfo.system_msg,
-          send_msg_time: Number(+new Date()),
+          time: +new Date(),
+          user_agent: navigator.userAgent,
+          data: {
+            live_room_id: Number(roomId.value),
+            msg_id: -1,
+            content: appStore.liveRoomInfo?.system_msg,
+            content_type: WsMessageContentTypeEnum.txt,
+            msg_type: DanmuMsgTypeEnum.system,
+          },
         });
       }
     }

src/views/rank/index.vue

@@ -17,7 +17,11 @@
     >
       <div class="top">
         <div
-          v-for="(item, index) in [rankList[1], rankList[0], rankList[2]]"
+          v-for="(item, index) in [
+            rankList[1],
+            rankList[0],
+            rankList[2],
+          ].filter((v) => v !== undefined)"
           :key="currRankType + '-' + index"
           :class="{ item: 1, [`rank-${item.rank}`]: 1 }"
         >