feat(组件): 增加同屏带看与画笔功能移植

src/components/chatRoom/chat.vue

@@ -4,9 +4,10 @@
       <div class="chat-item" v-for="(i, index) in chatList" :key="index">
         <div class="chat-msg">
           <!-- {{ user_info }} -->
-          <span :class="{ my: i.UserId == user_info.UserId }" class="chat-name">
-            {{ i.Nickname }} &nbsp;</span
-          >
+          <!-- <span :class="{ my: i.UserId == user_info.UserId }" class="chat-name">
+            {{ i.Nickname }} &nbsp;
+          </span> -->
+          <span class="chat-name"> {{ i.Nickname }} &nbsp; </span>
           <span class="chat-content"> {{ i.text }}</span>
         </div>
       </div>
@@ -15,16 +16,20 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, } from "vue";
+// import { propTypes } from "/@/utils/propTypes";
 
-const props = defineProps({
+import { ChatContentType } from "/@/store/modules/rtc";
+
+// import { defineProps } from "vue";
+defineProps({
   user_info: {
-    type: Object,
-    default: {},
+    // type: Object,
+    type: Object as PropType<ChatContentType>,
+    default: () => {},
   },
   chatList: {
-    type: Array,
-    default: [],
+    type: Array as PropType<ChatContentType[]>,
+    default: () => [],
   },
 });
 </script>

src/components/chatRoom/controls/actions.ts

@@ -0,0 +1,55 @@
+import { useRtcStore } from "/@/store/modules/rtc";
+import type { ChatContentType } from "/@/store/modules/rtc";
+
+interface ActionDataType {
+    type: string;
+    data: any
+}
+
+export function handleActions(data: ActionDataType) {
+    switch (data.type) {
+        case 'user-init':
+            break;
+        case 'danmumsg':
+            handleDanMumSg(data.data)
+            break;
+
+        case "changeScene":
+            break;
+
+        case 'user-join':
+            break;
+        case "user-leave":
+            break;
+
+        case "users-words":
+            break;
+        case "leader-dismiss":
+            break;
+
+        case 'tagclick':
+            break;
+        case 'tagclose':
+            break;
+        case 'tag-image-index':
+            break;
+
+        case 'ask-currentscene':
+            break;
+
+        case 'changeScene':
+            break;
+        default:
+            break;
+    }
+
+}
+
+// 处理弹幕
+function handleDanMumSg(data: ChatContentType) {
+    const rtcStore = useRtcStore();
+    if (data.role == "leader") {
+        data.Nickname = "主持人";
+    }
+    rtcStore.addToChatList(data)
+}

src/components/chatRoom/controls/index.ts

@@ -0,0 +1,3 @@
+export * from './actions'
+export * from './sync'
+export * from './paint'

src/components/chatRoom/controls/paint.ts

@@ -0,0 +1,12 @@
+import { getApp } from "/@/hooks/userApp";
+import { useRtcStore } from "/@/store/modules/rtc";
+
+// 畫筆
+export function handlePaint(data: any) {
+    const app = getApp();
+    const rtcStore = useRtcStore();
+    if (!rtcStore.isLeader) {
+        app.Connect.paint.receive(data);
+    }
+
+}

src/components/chatRoom/controls/sync.ts

@@ -0,0 +1,12 @@
+import { getApp } from "/@/hooks/userApp";
+import { useRtcStore } from "/@/store/modules/rtc";
+
+// 同屏帶看
+export function handleSync(data: any) {
+    const app = getApp();
+    const rtcStore = useRtcStore();
+    if (!rtcStore.isLeader) {
+        app.Connect.follow.receive(data);
+    }
+
+}

src/components/chatRoom/index.vue

@@ -1,6 +1,9 @@
 <template>
   <!-- 主区域 start  -->
   <div id="PageRtcLive">
+    <chat v-show="true" :chatList="chatList"></chat>
+
+    <!-- 控制条 start -->
     <div class="controlBar" v-if="!showInput">
       <div class="saySomething" @click="onFocus">
         <!-- <i class="speakIcon"
@@ -29,7 +32,7 @@
         <div class="exit"></div>
       </div>
     </div>
-
+    <!-- 控制条 start -->
     <!-- 主区域 end  -->
     <!-- 输入框 start-->
     <div class="layer" v-if="showInput" @click.stop="closeText">
@@ -59,15 +62,19 @@
 import { computed, nextTick, onMounted, ref } from "vue";
 import { getApp } from "/@/hooks/userApp";
 import { initSocketEvent } from "./roomControl";
-import { createSocket } from "/@/hooks/userRoom";
+import { createSocket } from "/@/hooks/userSocket";
 import browser from "/@/utils/browser";
 import { useRtcStore } from "/@/store/modules/rtc";
 import type { SocketParams, RoleType } from "/@/store/modules/rtc";
+import chat from "./chat.vue";
+import consola from "consola";
+
 const rtcStore = useRtcStore();
 const isNativeLeader = computed(() => rtcStore.role == "leader");
 const showInput = ref(false);
 const text = ref<string>("");
-
+const chatList = computed(() => rtcStore.chatList);
+const userInfo = computed(() => rtcStore.chatList);
 //设置socket 参数
 const initParams: SocketParams = {
   userId:
@@ -83,7 +90,10 @@ const initParams: SocketParams = {
   nickname: browser.getURLParam("name"),
   mode: browser.getURLParam("mode"),
 };
-
+consola.info({
+  message: initParams,
+  tag: "socket参数",
+});
 rtcStore.setSocketParams(initParams);
 
 const socket = createSocket();
@@ -110,11 +120,15 @@ function sendText(): void {
     UserId: rtcStore.userId,
     text: text.value,
   };
+  consola.info({
+    message: data,
+    tag: "发送信息",
+  });
   socket.emit("action", {
     type: "danmumsg",
     data,
   });
-  rtcStore.addChat(data);
+  rtcStore.addToChatList(data);
   document.getElementById("input_msg")?.blur();
   closeText();
 }

src/components/chatRoom/roomControl.ts

@@ -1,5 +1,7 @@
 import { useRtcStore } from "/@/store/modules/rtc";
-
+import consola from 'consola'
+import type { ConsolaLogObject } from 'consola'
+import { handleActions, handleSync, handlePaint } from './controls'
 
 // 所有socket业务事件集中点
 
@@ -16,8 +18,24 @@ export function initSocketEvent(socket: SocketIOClient.Socket): void {
             };
             socket.emit('join', params)
         })
+
+
+        socket.on('action', (data: any) => {
+            const actionLog: ConsolaLogObject = {
+                message: data,
+                tag: `action-${data.type || ''}`,
+                level: 3
+            }
+            consola.info(actionLog)
+            handleActions(data)
+        })
+        // 同屏帶看
+        socket.on('sync', handleSync)
+        // 畫筆
+        socket.on('paint', handlePaint)
+
         socket.on('onAny', (event: any) => {
-            console.error('connectEvent', event)
+            console.error('onAny:-->', event)
         })
     } else {
         throw new Error('socket没有初始化！')

src/components/chatRoom/roomEvent.ts

@@ -0,0 +1,22 @@
+import { useRtcStore } from "/@/store/modules/rtc";
+
+
+// 所有socket业务事件集中点
+
+export function initSocketEvent(socket: SocketIOClient.Socket): void {
+    if (socket) {
+        socket.on('connect', () => {
+            const rtcStore = useRtcStore();
+            let params = {
+                userId: rtcStore.userId,
+                roomId: rtcStore.roomId,
+                role: rtcStore.role || "leader",
+                avatar: rtcStore.avatar,
+                nickname: rtcStore.nickname,
+            };
+            socket.emit('join', params)
+        })
+    } else {
+        throw new Error('socket没有初始化！')
+    }
+}

src/store/modules/rtc.ts

@@ -29,7 +29,7 @@ interface DeviceListParams {
     microphoneItems: MediaDeviceInfo[],
 }
 
-interface ChatContentType {
+export interface ChatContentType {
     role: RoleType,
     mode: string,
     Nickname: Nullable<string>,
@@ -37,6 +37,10 @@ interface ChatContentType {
     text: string,
 }
 
+export interface UserInfoType {
+    UserId: string,
+    text: string,
+}
 export type RoleType = 'leader' | 'customer'
 export interface SocketParams {
     userId: string
@@ -128,8 +132,8 @@ export const useRtcStore = defineStore({
         setIsPublished(payload: boolean) {
             this.isPublished = payload
         },
-
-        addChat(content: ChatContentType) {
+    
+        addToChatList(content: ChatContentType) {
             this.chatList.push(content)
         }
     }