feat: WEBSOCKET

.env.development

@@ -28,4 +28,4 @@ VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'
 VITE_PROXY = [["/api","http://localhost:9090"]]
 
 # websocket 开关
-VITE_APP_WEBSOCKET = false
+VITE_APP_WEBSOCKET = true

.env.production

@@ -36,4 +36,4 @@ VITE_API_URL = /api-pro
 VITE_PROXY = [["/api-pro","http://localhost:8080"]]
 
 # websocket 开关
-VITE_APP_WEBSOCKET = false
+VITE_APP_WEBSOCKET = true

src/api/index.ts

@@ -35,11 +35,11 @@ export let isReLogin = { show: false }
 export const globalHeaders = () => {
   return {
     Authorization: 'Bearer ' + getToken(),
-    clientid: import.meta.env.VITE_APP_CLIENT_ID
+    clientId: import.meta.env.VITE_APP_CLIENT_ID
   }
 }
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
-axios.defaults.headers['clientid'] = import.meta.env.VITE_APP_CLIENT_ID
+axios.defaults.headers['clientId'] = import.meta.env.VITE_APP_CLIENT_ID
 const axiosCanceler = new AxiosCanceler()
 
 class RequestHttp {

src/layouts/components/Header/ToolBarRight.vue

@@ -6,7 +6,7 @@
       <!-- <Language id="language" /> -->
       <SearchMenu id="searchMenu" />
       <ThemeSetting id="themeSetting" />
-      <!-- <Message id="message" /> -->
+      <Message id="message" />
       <Fullscreen id="fullscreen" />
     </div>
     <!-- <span class="username">{{ username }}</span> -->
@@ -20,7 +20,7 @@ import AssemblySize from './components/AssemblySize.vue'
 // import Language from './components/Language.vue'
 import SearchMenu from './components/SearchMenu.vue'
 import ThemeSetting from './components/ThemeSetting.vue'
-// import Message from './components/Message.vue'
+import Message from './components/Message.vue'
 import Fullscreen from './components/Fullscreen.vue'
 import Avatar from './components/Avatar.vue'
 import SwitchDark from '@/components/SwitchDark/index.vue'

src/layouts/components/Header/components/Message.vue

@@ -64,7 +64,39 @@
 </template>
 
 <script setup lang="ts">
+import useNoticeStore from '@/stores/modules/notice'
+const noticeStore = storeToRefs(useNoticeStore())
 const activeName = ref('first')
+const newNotice = ref(0)
+console.log('newNotice', newNotice)
+// 定义变量内容
+const state = reactive({
+  loading: false
+})
+const newsList = ref([]) as any
+
+/**
+ * 初始化数据
+ * @returns
+ */
+const getTableData = async () => {
+  state.loading = true
+  newsList.value = noticeStore.state.value.notices
+  state.loading = false
+}
+console.log('newsList', newsList)
+
+onMounted(() => {
+  nextTick(() => {
+    getTableData()
+  })
+})
+//用深度监听 消息
+watch(
+  () => noticeStore.state.value.notices,
+  newVal => (newNotice.value = newVal.filter((item: any) => !item.read).length),
+  { deep: true }
+)
 </script>
 
 <style scoped lang="scss">

src/layouts/index.vue

@@ -12,7 +12,11 @@ import LayoutVertical from './LayoutVertical/index.vue'
 import LayoutClassic from './LayoutClassic/index.vue'
 import LayoutTransverse from './LayoutTransverse/index.vue'
 import LayoutColumns from './LayoutColumns/index.vue'
-
+import { initWebSocket } from '@/utils/websocket'
+onMounted(() => {
+  let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
+  initWebSocket(protocol + window.location.host + import.meta.env.VITE_API_URL + '/resource/websocket')
+})
 const LayoutComponents: Record<LayoutType, Component> = {
   vertical: LayoutVertical,
   classic: LayoutClassic,

src/stores/modules/notice.ts

@@ -0,0 +1,40 @@
+interface NoticeItem {
+  title?: string
+  read: boolean
+  message: any
+  time: string
+}
+
+export const useNoticeStore = defineStore('notice', () => {
+  const state = reactive({
+    notices: [] as NoticeItem[]
+  })
+
+  const addNotice = (notice: NoticeItem) => {
+    state.notices.push(notice)
+  }
+
+  const removeNotice = (notice: NoticeItem) => {
+    state.notices.splice(state.notices.indexOf(notice), 1)
+  }
+
+  //实现全部已读
+  const readAll = () => {
+    state.notices.forEach((item: any) => {
+      item.read = true
+    })
+  }
+
+  const clearNotice = () => {
+    state.notices = []
+  }
+  return {
+    state,
+    addNotice,
+    removeNotice,
+    readAll,
+    clearNotice
+  }
+})
+
+export default useNoticeStore

src/utils/websocket.ts

@@ -20,7 +20,7 @@
 
 import { getToken } from '@/utils/token'
 import { ElNotification } from 'element-plus'
-
+import useNoticeStore from '@/stores/modules/notice'
 let socketUrl: any = '' // socket地址
 let websocket: any = null // websocket 实例
 let heartTime: any = null // 心跳定时器实例
@@ -35,7 +35,7 @@ export const initWebSocket = (url: any) => {
   }
   socketUrl = url
   // 初始化 websocket
-  websocket = new WebSocket(url + '?Authorization=Bearer ' + getToken() + '&clientid=' + import.meta.env.VITE_APP_CLIENT_ID)
+  websocket = new WebSocket(url + '?Authorization=Bearer ' + getToken() + '&clientId=' + import.meta.env.VITE_APP_CLIENT_ID)
   websocketOnopen()
   websocketOnmessage()
   websocketOnerror()
@@ -122,11 +122,11 @@ export const websocketOnmessage = () => {
     if (e.data.indexOf('ping') > 0) {
       return
     }
-    // useNoticeStore().addNotice({
-    //   message: e.data,
-    //   read: false,
-    //   time: new Date().toLocaleString()
-    // })
+    useNoticeStore().addNotice({
+      message: e.data,
+      read: false,
+      time: new Date().toLocaleString()
+    })
     ElNotification({
       title: '消息',
       message: e.data,