feat:更新协作信息

src/layout/components/AppMain.vue

@@ -19,7 +19,8 @@
 import iframeToggle from "./IframeToggle/index.vue";
 import useTagsViewStore from "@/stores/modules/tagsView.js";
 
-const tagsViewStore = useTagsViewStore();
+const tagsViewStore = useTagsViewStore(); 
+
 </script>
 
 <style lang="scss" scoped>

src/layout/components/InviteJoin/index.vue

@@ -0,0 +1,149 @@
+<template>
+    <el-dialog
+        v-model="inviteDialog"
+        title="远程协作"
+        width="400px"
+        :close-on-press-escape="false"
+        :close-on-click-modal="false"
+        :show-close="false"
+    > 
+
+        <div style="width: 100%; margin-bottom: 30px; font-size: 20px">
+            "
+            {{
+            socketInformation.room_name
+                ? socketInformation.room_name
+                : ''
+            }}
+            " 邀请您参加远程协作
+        </div>
+        <div style="text-align: center">
+            <el-button
+                size="large"
+                type="danger"
+                style="font-size: 16px"
+                @click="clickRefuseJoin"
+                >
+                拒 绝
+            </el-button>
+            <el-button
+                size="large"
+                type="primary"
+                style="font-size: 16px"
+                @click="clickJoin"
+                >
+                加 入
+            </el-button> 
+        </div>
+    </el-dialog>
+</template>
+  
+  <script setup>
+  import { ref ,onMounted} from 'vue'
+  import { getStatusApi } from '@/api/conferencingRoom.js'
+  import { ElMessage } from 'element-plus'
+  import { useRouter } from 'vue-router'
+  import { mqttClient } from "@/utils/mqtt.js"; 
+  import { useUserStore } from '@/stores/modules/user.js'
+
+  const router = useRouter()
+  const userStore = useUserStore()
+
+  const inviteDialog = ref(false) 
+  const socketInformation = ref(null)
+  
+
+  /** 拒绝加入 */
+const clickRefuseJoin = async () => {
+    //status  1: 同意加入, 5: 拒绝加入
+    try{ 
+        const res = await getStatusApi(socketInformation.value.room_uid,{status:5}) 
+        if(res.meta.code == 200){
+            ElMessage({
+                message: '已拒绝加入该协作',
+                type: 'error',
+            })
+            inviteDialog.value = false
+        }
+    } catch (error) {
+        console.log(error,'error')
+        inviteDialog.value = false
+    } finally { 
+        inviteDialog.value = false
+    }
+}
+
+const clickJoin = async () => { 
+  const res = await getStatusApi(socketInformation.value.room_uid,{status:1}) 
+    if(res.meta.code == 200){
+        ElMessage({
+            message: '成功加入该协作',
+            type: 'success',
+        })
+        inviteDialog.value = false
+        router.push({
+        path: '/conferencingRoom', 
+        query:{
+            type:2,//创建房间，加入房间 2
+            room_uid:socketInformation.value.room_uid
+        }
+    }) 
+    }
+  inviteDialog.value = false
+ 
+}
+
+/** 浏览器通知 */
+const showNotification = (data) => { 
+  if ('Notification' in window) {
+    Notification.requestPermission().then((permission) => {
+      if (permission === 'granted') {
+        const notification = new Notification('协作邀请', {
+        //   body: String(data.room_name) + '邀请您参加远程协作'
+        body: '远程协作有新的邀请'
+        //   icon: logo,
+        })
+        notification.onclick = () => { clickJoin() }
+      }
+    })
+  }
+}
+
+/** 处理加入房间和拒接房间 mqtt 消息 */
+const processingSocket = (message) => { 
+    const res = JSON.parse(message)  
+    console.log(res,'收到用户信息 邀请')  
+  if (!res?.status) { 
+    socketInformation.value = res  
+    inviteDialog.value = true
+    showNotification(socketInformation.value)
+  }else if(res.status == 5){
+    ElMessage({
+        message: `${res?.display_name}拒绝加入该协作`,
+        type: 'error',
+    })
+  }
+}
+
+defineExpose({
+    processingSocket,
+  });
+
+// onMounted(async () => {   
+//     await mqttClient.connect(`room${Math.random().toString(16).substr(2, 8)}`);
+//     const res = await userStore.getInfo()
+//     const topic = `xSynergy/ROOM/+/rooms/${res.uid}`;
+//     mqttClient.subscribe(topic, async (shapeData) => { 
+//         // console.log(shapeData.toString(),'shapeData发送邀请')
+//         processingSocket(shapeData.toString())
+//     }); 
+// })
+
+
+
+  </script>
+  
+  <style lang="scss" scoped>
+ 
+  </style>
+  

src/layout/components/index.js

@@ -2,4 +2,5 @@ export { default as AppMain } from './AppMain.vue'
 export { default as Navbar } from './Navbar.vue'
 export { default as Settings } from './Settings/index.vue'
 export { default as TagsView } from './TagsView/index.vue'
-export { default as ResetPwd } from './ResetPwd/index.vue'
+export { default as ResetPwd } from './ResetPwd/index.vue'
+export { default as InviteJoin } from './InviteJoin/index.vue'