feat(组件): 增加socket等UI

.cz-config.js

@@ -0,0 +1,37 @@
+module.exports = {
+  types: [
+    { value: 'feat', name: 'feat 🍄:    新增新的特性' },
+    { value: 'fix', name: 'fix 🐛:    修复 BUG' },
+    { value: 'docs', name: 'docs 📄:    修改文档、注释' },
+    {
+      value: 'refactor',
+      name: 'refactor 🎸:    代码重构，注意和特性、修复区分开',
+    },
+    { value: 'chore', name: 'chore 🧹:   构建过程或辅助工具的变动' },
+    { value: 'perf', name: 'perf ⚡:    提升性能' },
+    { value: 'test', name: 'test 👀:    添加一个测试' },
+    { value: 'tool', name: 'tool 🚗:    开发工具变动(构建、脚手架工具等)' },
+    { value: 'style', name: 'style ✂:    对代码格式的修改不影响逻辑' },
+    { value: 'revert', name: 'revert 🌝:     版本回滚' },
+    { value: 'update', name: 'update ⬆:    第三方库升级 ' },
+  ],
+
+  scopes: [{ name: '组件' }, { name: '样式' }, { name: '文档更改' }, { name: '其它变更' }],
+  allowTicketNumber: false,
+  isTicketNumberRequired: false,
+  ticketNumberPrefix: 'TICKET-',
+  ticketNumberRegExp: 'd{1,5}',
+  messages: {
+    type: '选择一种你的提交类型:',
+    scope: '选择一个scope (可选):',
+    customScope: 'Denote the SCOPE of this change:',
+    subject: '简要说明:\n',
+    body: '详细说明，使用"|"换行(可选)：\n',
+    breaking: '非兼容性说明 (可选):\n',
+    footer: '关联关闭的issue，例如：#31, #34(可选):\n',
+    confirmCommit: '确定提交?',
+  },
+  allowCustomScopes: true,
+  allowBreakingChanges: ['新增', '修复'],
+  subjectLimit: 100,
+};

.env

@@ -9,4 +9,4 @@ VITE_APP_SOCKET_URL=wss://ws.4dkankan.com
 # 静态资源目录
 VITE_APP_STATIC_DIR=viewer
 # 接口请求地址
-VITE_APP_APIS_URL=https://v4-uat.4dkankan.com/
+VITE_APP_APIS_URL=https://test.4dkankan.com/

package.json

@@ -2,11 +2,11 @@
   "name": "socket-international",
   "private": true,
   "version": "0.0.0",
-  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "commit": "git add . && git cz"
   },
   "dependencies": {
     "axios": "^1.1.3",
@@ -28,6 +28,13 @@
     "vite-plugin-html-env": "^1.2.7",
     "vite-plugin-windicss": "^1.8.8",
     "vue-tsc": "^1.0.9",
-    "windicss": "^3.5.6"
+    "windicss": "^3.5.6",
+    "commitizen": "^4.2.5",
+    "cz-customizable": "^7.0.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "cz-customizable"
+    }
   }
 }

src/App.vue

@@ -10,8 +10,7 @@ import type { FloorsType } from "/@/store/modules/scene";
 import { useAppStore } from "./store/modules/app";
 import Guideline from "/@/components/basic/guide.vue";
 import ChatRoom from "/@/components/chatRoom/index.vue";
-import { createSocket } from "./hooks/userRoom";
-
+import browser from "/@/utils/browser";
 
 const sceneStore = useSceneStore();
 const appStore = useAppStore();
@@ -41,10 +40,9 @@ watchEffect(() => {
 onMounted(async () => {
   const app = await createApp({
     dom: scene$.value as HTMLElement,
-    num: "KK-t-gpAaKxXhE9",
+    num: browser.getURLParam("m") || "KK-t-gpAaKxXhE9",
     mobile: true,
   });
-  createSocket();
   // SDK初始化
   app.use("MinMap", { theme: { camera_fillStyle: "#ED5D18" } });
   app.use("Tag");

src/components/chatRoom/index.vue

@@ -16,21 +16,22 @@
         <div class="brushes"></div>
 
         <div class="invitation"></div>
-        <div></div>
+        <div v-if="isNativeLeader" class="members" @click="openMember"></div>
         <template>
           <div class="mic_on"></div>
           <div class="mic_no"></div>
+          leader
         </template>
 
-        <div style="font-size: 0.65rem">
+        <!-- <div style="font-size: 0.65rem">
           <Icon type="scene" />
-        </div>
+        </div> -->
         <div class="exit"></div>
       </div>
     </div>
 
     <!-- 主区域 end  -->
-
+    <!-- 输入框 start-->
     <div class="layer" v-if="showInput" @click.stop="closeText">
       <div class="inputBox" @click.stop>
         <div class="msgBox">
@@ -50,25 +51,80 @@
         </div>
       </div>
     </div>
+    <!-- 输入框 end-->
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
+import { computed, nextTick, onMounted, ref } from "vue";
 import { getApp } from "/@/hooks/userApp";
-
+import { initSocketEvent } from "./roomControl";
+import { createSocket } from "/@/hooks/userRoom";
+import browser from "/@/utils/browser";
+import { useRtcStore } from "/@/store/modules/rtc";
+import type { SocketParams, RoleType } from "/@/store/modules/rtc";
+const rtcStore = useRtcStore();
+const isNativeLeader = computed(() => rtcStore.role == "leader");
 const showInput = ref(false);
 const text = ref<string>("");
+
+//设置socket 参数
+const initParams: SocketParams = {
+  userId:
+    browser.getURLParam("vruserId") ||
+    `user_${browser.getURLParam("role")}${Math.floor(
+      Math.random() * 100000000
+    )}`,
+  roomId:
+    browser.getURLParam("roomId") ||
+    `room_${Math.floor(Math.random() * 100000000)}`,
+  role: (browser.getURLParam("role") as RoleType) || "leader",
+  avatar: browser.getURLParam("avatar"),
+  nickname: browser.getURLParam("name"),
+  mode: browser.getURLParam("mode"),
+};
+
+rtcStore.setSocketParams(initParams);
+
+const socket = createSocket();
+initSocketEvent(socket);
+
 onMounted(() => {
   const app = getApp();
 });
 
 /* method */
-function closeText() {}
-function sendText() {}
+function closeText(): void {
+  showInput.value = false;
+  text.value = "";
+}
+
+function sendText(): void {
+  if (text.value == "") {
+    return;
+  }
+  let data = {
+    role: rtcStore.role,
+    mode: rtcStore.mode,
+    Nickname: rtcStore.nickname,
+    UserId: rtcStore.userId,
+    text: text.value,
+  };
+  socket.emit("action", {
+    type: "danmumsg",
+    data,
+  });
+  rtcStore.addChat(data);
+  document.getElementById("input_msg")?.blur();
+  closeText();
+}
 function onFocus(): void {
   showInput.value = true;
+  nextTick(() => {
+    document.getElementById("input_msg")?.focus();
+  });
 }
+function openMember(): void {}
 </script>
 
 <style scoped lang="scss">

src/components/chatRoom/roomControl.ts

@@ -0,0 +1,25 @@
+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)
+        })
+        socket.on('onAny', (event: any) => {
+            console.error('connectEvent', event)
+        })
+    } else {
+        throw new Error('socket没有初始化！')
+    }
+}

src/hooks/userRoom.ts

@@ -1,16 +1,19 @@
 import { useRtcStore } from "/@/store/modules/rtc";
 
 const io = (window as any).io as SocketIOClientStatic
+let socket: SocketIOClient.Socket
 
 export function createSocket() {
     const rtcStore = useRtcStore()
     console.log('rtcStore', rtcStore)
     const address = import.meta.env.VITE_APP_SOCKET_URL
-    const socket = io(address, {
+    socket = io(address, {
         path: "/ws-sync",
         transports: ["websocket"],
     });
-    console.log('socket', socket)
-    // rtcStore.setSocket(socket)
+    rtcStore.setSocket(socket)
     return socket
-}
+}
+export function useSocket(): SocketIOClient.Socket {
+    return socket
+}

src/store/modules/rtc.ts

@@ -1,11 +1,11 @@
 import { defineStore } from 'pinia';
 interface RtcState {
-    socket: Nullable<SocketIOClientStatic>,
+    socket: Nullable<SocketIOClient.Socket>,
     showDaoGou: boolean,
     sdkAppId: string,
     userId: string,
     roomId: string,
-    role: string,
+    role: 'leader' | 'customer'
     secretKey: string
     userSig: string
     audioDeviceId: string,
@@ -19,7 +19,9 @@ interface RtcState {
     remoteStreams: any[],
     invitedRemoteStreams: any[],
     avatar: Nullable<string>,
-
+    nickname: Nullable<string>,
+    mode: string,
+    chatList: ChatContentType[]
 }
 
 interface DeviceListParams {
@@ -27,6 +29,24 @@ interface DeviceListParams {
     microphoneItems: MediaDeviceInfo[],
 }
 
+interface ChatContentType {
+    role: RoleType,
+    mode: string,
+    Nickname: Nullable<string>,
+    UserId: string,
+    text: string,
+}
+
+export type RoleType = 'leader' | 'customer'
+export interface SocketParams {
+    userId: string
+    roomId: string
+    role: RoleType
+    avatar: string
+    nickname: string
+    mode: string
+}
+
 
 export const useRtcStore = defineStore({
     id: 'rtc',
@@ -34,9 +54,10 @@ export const useRtcStore = defineStore({
         socket: null,
         showDaoGou: false,
         sdkAppId: "1400685498",
+        nickname: '',
         userId: '',
         roomId: '',
-        role: '',
+        role: 'customer',
         secretKey: '7500f8938c46c5d3c64621ae7826905eec9723bf218fbcf121242e056a4ee14f',
         userSig: 'eJwtzcsOgjAQBdB-6RaDU2jLI3EhsrHRBdGNK2Po0IyvNAWJxvjvEmA5597c*bLj7hD26FnOohDYYrzJ4LOjhkZ*tejPd7wY9EJwnsV8brXmdnGODMu5AEggExBNSUcPHFQpnkopIJkU34784ApECjBvkB1e8MLJfWyLOAis06Wut4b0tVdL77RVTb35dGXby6o6rVfs9wdhLDRy',
         audioDeviceId: '',
@@ -50,7 +71,8 @@ export const useRtcStore = defineStore({
         remoteStreams: [],
         invitedRemoteStreams: [],
         avatar: null,
-
+        mode: '',
+        chatList: []
     }),
     getters: {
         isLeader(): boolean {
@@ -58,11 +80,18 @@ export const useRtcStore = defineStore({
         }
     },
     actions: {
+        setSocketParams(params: SocketParams): void {
+            this.avatar = params.avatar
+            this.roomId = params.roomId
+            this.userId = params.userId
+            this.nickname = params.nickname
+            this.role = params.role
+        },
         setAvatar(payload: string) {
             this.avatar = payload
             localStorage.setItem('leaderAvatar', payload || '')
         },
-        setSocket(payload: SocketIOClientStatic) {
+        setSocket(payload: SocketIOClient.Socket) {
             this.socket = payload
         },
         setShowDaoGou(payload: boolean) {
@@ -76,7 +105,7 @@ export const useRtcStore = defineStore({
         setRoomId(payload: string) {
             this.roomId = payload
         },
-        setRole(payload: string) {
+        setRole(payload: RoleType) {
             this.role = payload
         },
 
@@ -99,6 +128,10 @@ export const useRtcStore = defineStore({
         setIsPublished(payload: boolean) {
             this.isPublished = payload
         },
+
+        addChat(content: ChatContentType) {
+            this.chatList.push(content)
+        }
     }
 
 })