持久化

.env

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

package.json

@@ -14,6 +14,7 @@
     "consola": "^2.15.3",
     "lodash-es": "^4.17.21",
     "pinia": "^2.0.23",
+    "pinia-plugin-persistedstate": "^2.3.0",
     "trtc-js-sdk": "^4.14.6",
     "uuid": "^9.0.0",
     "vue": "^3.2.41",

pnpm-lock.yaml

@@ -11,6 +11,7 @@ specifiers:
   cz-customizable: ^7.0.0
   lodash-es: ^4.17.21
   pinia: ^2.0.23
+  pinia-plugin-persistedstate: ^2.3.0
   sass: ^1.55.0
   trtc-js-sdk: ^4.14.6
   typescript: ^4.8.4
@@ -31,6 +32,7 @@ dependencies:
   consola: 2.15.3
   lodash-es: 4.17.21
   pinia: 2.0.23_l7r24p6nevbtlimqmqcwa3ouhu
+  pinia-plugin-persistedstate: 2.3.0_pinia@2.0.23
   trtc-js-sdk: 4.14.6
   uuid: 9.0.0
   vue: 3.2.41
@@ -1933,6 +1935,17 @@ packages:
     engines: {node: '>=8.6'}
     dev: true
 
+  /pinia-plugin-persistedstate/2.3.0_pinia@2.0.23:
+    resolution: {integrity: sha512-K7vzt68Z3lbMDjb23Ki2vgHVBP2QFvjl7WNwzIwqY/DAkhSt8mi/z6bN/cXTst7fJjXWF0lC9NyxFKHfxWehuw==}
+    peerDependencies:
+      pinia: ^2.0.0
+    peerDependenciesMeta:
+      pinia:
+        optional: true
+    dependencies:
+      pinia: 2.0.23_l7r24p6nevbtlimqmqcwa3ouhu
+    dev: false
+
   /pinia/2.0.23_l7r24p6nevbtlimqmqcwa3ouhu:
     resolution: {integrity: sha512-N15hFf4o5STrxpNrib1IEb1GOArvPYf1zPvQVRGOO1G1d74Ak0J0lVyalX/SmrzdT4Q0nlEFjbURsmBmIGUR5Q==}
     peerDependencies:

src/App.vue

@@ -53,6 +53,7 @@ onMounted(async () => {
   app.use("MinMap", { theme: { camera_fillStyle: "#ED5D18" } });
   app.use("Tag");
   app.use("TourPlayer");
+
   app.use("TagView", {
     render(data) {
       if (data.media["image"] && data.media["image"].length) {

src/components/chatRoom/controls/actions.ts

@@ -41,7 +41,7 @@ export function handleActions({ data, type, members, open, user, userId, words }
             break
 
         case "users-words":
-            handleUserSetWords(userId, words,members)
+            handleUserSetWords(userId, words, members)
             break;
         case "leader-dismiss":
             break;
@@ -64,7 +64,7 @@ export function handleActions({ data, type, members, open, user, userId, words }
             break;
     }
     if (members?.length) {
-        console.log('发烧的',members)
+        console.log('发烧的', members)
     }
 
 }
@@ -124,7 +124,7 @@ function handleUserJoin(members?: UserInfoType[], user?: UserInfoType) {
     if (user) {
         let name = user.Nickname;
         if (user.Role === 'leader') {
-            const socket = useSocket()
+            const { socket } = useSocket()
             name = "主持人";
             Dialog.toast({ content: `主持人进入房间` });
             socket.emit("action", { type: "user-init" });
@@ -179,16 +179,13 @@ const handleTagImageIndex = (data) => {
 
 }
 
-const handleUserSetWords = (UserId?: string, words?: boolean,  members?:UserInfoType[]) => {
+const handleUserSetWords = (UserId?: string, words?: boolean, members?: UserInfoType[]) => {
     const rtcStore = useRtcStore();
     console.log('handleUserSetWords', UserId, words)
+    UserId && rtcStore.updateMemberDatabyId(UserId, {
+        IsWords: words
+    })
     if (UserId == rtcStore.userId) {
-   
-        members && rtcStore.setMemberList(members)
-
-        // rtcStore.updateMemberDatabyId(UserId, {
-        //     IsWords: words
-        // })
         Dialog.toast({
             content: !words
                 ? `主持人设置了禁言`

src/components/chatRoom/controls/join.ts

@@ -1,4 +1,5 @@
 import consolaGlobalInstance from "consola";
+import Dialog from "/@/components/basic/dialog";
 import { getApp } from "/@/hooks/userApp";
 import { useRoom } from "/@/hooks/useRoom";
 import { useSocket } from "/@/hooks/userSocket";
@@ -8,15 +9,36 @@ const { enterRoom } = useRoom()
 // 自已join的方法
 export function handleJoin(data: any) {
     const app = getApp();
-    const socket = useSocket()
+    const  {socket }= useSocket()
+    const members = data?.members as any as UserInfoType[]
+    const user = data?.user as any as UserInfoType
     enterRoom();
+
     const rtcStore = useRtcStore();
     rtcStore.setIsJoined(true)
     consolaGlobalInstance.info({
         message: data,
         tag: "socket:enter"
     })
-    const members = data?.members as any as UserInfoType[]
+    // if (user) {
+    //     console.log('sortList 1 ', rtcStore.userId)
+    //     console.log('sortList 2', rtcStore.memberList)
+    //     const userExsit = rtcStore.checkUserInMemberList(rtcStore.userId)
+    //     console.log('sortList3 ', userExsit)
+    //     console.log('sortList4', user.Id !== userExsit?.Id)
+    //     if (userExsit) {
+    //         Dialog.confirm({
+    //             showCloseIcon: false,
+    //             okText: '我知道了',
+    //             content: "<span style='font-size: 16px; line-height: 1.5;'>您已有登录端在登录，请不要重复登录<span/>",
+    //             title: '隱私條款：',
+    //             single: true,
+    //             func: (state) => {
+    //             },
+    //         });
+    //     }
+    // }
+
     members && rtcStore.setMemberList(members)
     if (!rtcStore.isLeader) {
         setTimeout(() => {

src/components/chatRoom/memberList.vue

@@ -26,7 +26,7 @@
               <div class="name">{{ i.Nickname }}</div>
             </div>
             <div class="button">
-              {{ i?.Role }}
+              <!-- {{ i?.Role }} -->
               <div
                 class="micBtn"
                 v-if="i?.Role !== 'leader'"
@@ -63,6 +63,7 @@ const rtcStore = useRtcStore();
 
 const role = computed(() => rtcStore.role);
 const isNativeLeader = computed(() => rtcStore.isLeader);
+
 // const animateActive = ref(false);
 const props = defineProps({
   show: propTypes.bool.def(false),

src/hooks/userSocket.ts

@@ -6,6 +6,13 @@ import { useRtcStore } from "/@/store/modules/rtc";
 const io = (window as any).io as SocketIOClientStatic
 let socket: SocketIOClient.Socket
 
+interface ReturnUseSocketType {
+    createSocket: Fn,
+    closeSocket: Fn,
+    socket: SocketIOClient.Socket
+
+}
+
 export function createSocket() {
     const rtcStore = useRtcStore()
     // console.log('rtcStore', rtcStore)
@@ -31,6 +38,10 @@ async function closeSocket() {
     })
 }
 
-export function useSocket(): SocketIOClient.Socket {
-    return socket
+export function useSocket(): ReturnUseSocketType {
+    return {
+        socket,
+        closeSocket,
+        createSocket
+    }
 }

src/store/index.ts

@@ -1,7 +1,8 @@
 import type { App } from 'vue';
 import { createPinia } from 'pinia';
-
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 const store = createPinia();
+store.use(piniaPluginPersistedstate)
 
 export function setupStore(app: App<Element>) {
   app.use(store);

src/store/modules/rtc.ts

@@ -3,9 +3,10 @@ import consola from 'consola'
 import { genTestUserSig } from '/@/utils/generateTestUserSig'
 import type { RemoteStream } from "trtc-js-sdk";
 import sortBy from 'lodash-es/sortBy'
-import { object } from 'vue-types';
+
 interface RtcState {
     socket: Nullable<SocketIOClient.Socket>,
+    socketId: string,
     showDaoGou: boolean,
     sdkAppId: string,
     userId: string,
@@ -75,6 +76,7 @@ export const useRtcStore = defineStore({
     id: 'rtc',
     state: (): RtcState => ({
         socket: null,
+        socketId: '',
         showDaoGou: false,
         sdkAppId: "1400685498",
         nickname: '',
@@ -99,7 +101,14 @@ export const useRtcStore = defineStore({
         memberList: [],
         audioMuted: true
     }),
+    persist: {
+        storage: localStorage,
+        paths: ['memberList'],
+      },
     getters: {
+        checkUserInMemberList() {
+            return (userId: string) => this.memberList.find(item => item.UserId === userId)
+        },
         isLeader(): boolean {
             return this.role === 'leader'
         },
@@ -119,7 +128,7 @@ export const useRtcStore = defineStore({
                 return this.remoteStreams.some(item => item.getUserId() === userId)
             }
         }
-    },
+    },    
     actions: {
         setSocketParams(params: SocketParams): void {
             this.avatar = params.avatar
@@ -190,7 +199,7 @@ export const useRtcStore = defineStore({
                     if (current.Role === 'leader') {
                         current.order = 0
                     }
-                    if (current.Role === this.userId) {
+                    if (current.UserId === this.userId) {
                         current.order = 1
                     }