From a8a334b3c326610be70dd762978e8bf1a8766adc Mon Sep 17 00:00:00 2001
From: 三个三 <2029364173@qq.com>
Date: 星期四, 02 十一月 2023 12:36:31 +0800
Subject: [PATCH] !50 add 新增 前端接入websocket接收消息 * add 新增 前端接入websocket接收消息
---
src/views/index.vue | 5
vite.config.ts | 1
src/lang/zh_CN.ts | 1
src/layout/components/Navbar.vue | 28 ++++
src/layout/components/notice/index.vue | 134 ++++++++++++++++++++++
src/store/modules/notice.ts | 42 +++++++
src/utils/websocket.ts | 132 ++++++++++++++++++++++
src/lang/en_US.ts | 1
8 files changed, 344 insertions(+), 0 deletions(-)
diff --git a/src/lang/en_US.ts b/src/lang/en_US.ts
index 59df4ba..034ea91 100644
--- a/src/lang/en_US.ts
+++ b/src/lang/en_US.ts
@@ -18,6 +18,7 @@
language: 'Language',
dashboard: 'Dashboard',
document: 'Document',
+ message: 'Message',
layoutSize: 'Layout Size',
selectTenant: 'Select Tenant',
layoutSetting: 'Layout Setting',
diff --git a/src/lang/zh_CN.ts b/src/lang/zh_CN.ts
index d778f7d..666a400 100644
--- a/src/lang/zh_CN.ts
+++ b/src/lang/zh_CN.ts
@@ -17,6 +17,7 @@
language: '璇█',
dashboard: '棣栭〉',
document: '椤圭洰鏂囨。',
+ message: '娑堟伅',
layoutSize: '甯冨眬澶у皬',
selectTenant: '閫夋嫨绉熸埛',
layoutSetting: '甯冨眬璁剧疆',
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 3c0e45d..7818fd4 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -27,6 +27,21 @@
<svg-icon class-name="search-icon" icon-class="search" />
</div>
</el-tooltip>
+ <!-- 娑堟伅 -->
+ <el-tooltip :content="$t('navbar.message')" effect="dark" placement="bottom">
+ <div>
+ <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
+ <template #reference>
+ <el-badge :value="newNotice > 0 ? newNotice : ''" :max="99">
+ <svg-icon icon-class="message" />
+ </el-badge>
+ </template>
+ <template #default>
+ <notice></notice>
+ </template>
+ </el-popover>
+ </div>
+ </el-tooltip>
<el-tooltip content="Github" effect="dark" placement="bottom">
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
</el-tooltip>
@@ -81,10 +96,14 @@
import { dynamicClear, dynamicTenant } from "@/api/system/tenant";
import { ComponentInternalInstance } from "vue";
import { TenantVO } from "@/api/types";
+import notice from './notice/index.vue';
+import useNoticeStore from '@/store/modules/notice';
const appStore = useAppStore();
const userStore = useUserStore();
const settingsStore = useSettingsStore();
+const noticeStore = storeToRefs(useNoticeStore());
+const newNotice = ref(<number>0);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -161,6 +180,11 @@
commandMap[command]();
}
}
+
+//鐢ㄦ繁搴︾洃鍚� 娑堟伅
+watch(() => noticeStore.state.value.notices, (newVal, oldVal) => {
+ newNotice.value = newVal.filter((item: any) => !item.read).length;
+}, { deep: true });
</script>
<style lang="scss" scoped>
@@ -169,6 +193,10 @@
height:30px;
}
+:deep(.el-badge__content.is-fixed){
+ top: 12px;
+}
+
.flex {
display: flex;
}
diff --git a/src/layout/components/notice/index.vue b/src/layout/components/notice/index.vue
new file mode 100644
index 0000000..ef4a6a9
--- /dev/null
+++ b/src/layout/components/notice/index.vue
@@ -0,0 +1,134 @@
+<template>
+ <div class="layout-navbars-breadcrumb-user-news" v-loading="state.loading">
+ <div class="head-box">
+ <div class="head-box-title">閫氱煡鍏憡</div>
+ <div class="head-box-btn" @click="readAll">鍏ㄩ儴宸茶</div>
+ </div>
+ <div class="content-box" v-loading="state.loading">
+ <template v-if="newsList.length > 0">
+ <div class="content-box-item" v-for="(v, k) in newsList" :key="k" @click="onNewsClick(k)">
+ <div class="item-conten">
+ <div>{{ v.message }}</div>
+ <div class="content-box-msg"></div>
+ <div class="content-box-time">{{ v.time }}</div>
+ </div>
+ <!-- 宸茶/鏈 -->
+ <span v-if="v.read" class="el-tag el-tag--success el-tag--mini read">宸茶</span>
+ <span v-else class="el-tag el-tag--danger el-tag--mini read">鏈</span>
+ </div>
+ </template>
+ <el-empty :description="'娑堟伅涓虹┖'" v-else></el-empty>
+ </div>
+ <div class="foot-box" @click="onGoToGiteeClick" v-if="newsList.length > 0">鍓嶅線gitee</div>
+ </div>
+</template>
+
+<script setup lang="ts" name="layoutBreadcrumbUserNews">
+import { ref } from "vue";
+import { storeToRefs } from 'pinia'
+import { nextTick, onMounted, reactive } from "vue";
+import useNoticeStore from '@/store/modules/notice';
+
+const noticeStore = storeToRefs(useNoticeStore());
+const {readAll} = useNoticeStore();
+
+// 瀹氫箟鍙橀噺鍐呭
+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;
+};
+
+
+//鐐瑰嚮娑堟伅锛屽啓鍏ュ凡璇�
+const onNewsClick = (item: any) => {
+ newsList.value[item].read = true;
+ //骞朵笖鍐欏叆pinia
+ noticeStore.state.value.notices = newsList.value;
+};
+
+// 鍓嶅線閫氱煡涓績鐐瑰嚮
+const onGoToGiteeClick = () => {
+ window.open("https://gitee.com/dromara/RuoYi-Vue-Plus/tree/5.X/");
+};
+
+onMounted(() => {
+ nextTick(() => {
+ getTableData();
+ });
+});
+</script>
+
+<style scoped lang="scss">
+.layout-navbars-breadcrumb-user-news {
+ .head-box {
+ display: flex;
+ border-bottom: 1px solid var(--el-border-color-lighter);
+ box-sizing: border-box;
+ color: var(--el-text-color-primary);
+ justify-content: space-between;
+ height: 35px;
+ align-items: center;
+ .head-box-btn {
+ color: var(--el-color-primary);
+ font-size: 13px;
+ cursor: pointer;
+ opacity: 0.8;
+ &:hover {
+ opacity: 1;
+ }
+ }
+ }
+ .content-box {
+ height: 300px;
+ overflow: auto;
+ font-size: 13px;
+ .content-box-item {
+ padding-top: 12px;
+ display: flex;
+ &:last-of-type {
+ padding-bottom: 12px;
+ }
+ .content-box-msg {
+ color: var(--el-text-color-secondary);
+ margin-top: 5px;
+ margin-bottom: 5px;
+ }
+ .content-box-time {
+ color: var(--el-text-color-secondary);
+ }
+ .item-conten {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+ }
+ }
+ .foot-box {
+ height: 35px;
+ color: var(--el-color-primary);
+ font-size: 13px;
+ cursor: pointer;
+ opacity: 0.8;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-top: 1px solid var(--el-border-color-lighter);
+ &:hover {
+ opacity: 1;
+ }
+ }
+ :deep(.el-empty__description p) {
+ font-size: 13px;
+ }
+}
+</style>
diff --git a/src/store/modules/notice.ts b/src/store/modules/notice.ts
new file mode 100644
index 0000000..f3f8e5a
--- /dev/null
+++ b/src/store/modules/notice.ts
@@ -0,0 +1,42 @@
+import { defineStore } from 'pinia';
+
+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) => {
+ item.read = true;
+ });
+ };
+
+ const clearNotice = () => {
+ state.notices = [];
+ };
+ return {
+ state,
+ addNotice,
+ removeNotice,
+ readAll,
+ clearNotice
+ };
+});
+
+export default useNoticeStore;
diff --git a/src/utils/websocket.ts b/src/utils/websocket.ts
new file mode 100644
index 0000000..90e86bf
--- /dev/null
+++ b/src/utils/websocket.ts
@@ -0,0 +1,132 @@
+/**
+ * @module initWebSocket 鍒濆鍖�
+ * @module websocketonopen 杩炴帴鎴愬姛
+ * @module websocketonerror 杩炴帴澶辫触
+ * @module websocketclose 鏂紑杩炴帴
+ * @module resetHeart 閲嶇疆蹇冭烦
+ * @module sendSocketHeart 蹇冭烦鍙戦��
+ * @module reconnect 閲嶈繛
+ * @module sendMsg 鍙戦�佹暟鎹�
+ * @module websocketonmessage 鎺ユ敹鏁版嵁
+ * @module test 娴嬭瘯鏀跺埌娑堟伅浼犻��
+ * @description socket 閫氫俊
+ * @param {any} url socket鍦板潃
+ * @param {any} websocket websocket 瀹炰緥
+ * @param {any} heartTime 蹇冭烦瀹氭椂鍣ㄥ疄渚�
+ * @param {number} socketHeart 蹇冭烦娆℃暟
+ * @param {number} HeartTimeOut 蹇冭烦瓒呮椂鏃堕棿
+ * @param {number} socketError 閿欒娆℃暟
+ */
+
+import { getToken } from '@/utils/auth';
+import useNoticeStore from '@/store/modules/notice';
+
+const { addNotice } = useNoticeStore();
+
+let socketUrl: any = ''; // socket鍦板潃
+let websocket: any = null; // websocket 瀹炰緥
+let heartTime: any = null; // 蹇冭烦瀹氭椂鍣ㄥ疄渚�
+let socketHeart = 0 as number; // 蹇冭烦娆℃暟
+const HeartTimeOut = 10000; // 蹇冭烦瓒呮椂鏃堕棿 10000 = 10s
+let socketError = 0 as number; // 閿欒娆℃暟
+
+// 鍒濆鍖杝ocket
+export const initWebSocket = (url: any) => {
+ socketUrl = url;
+ // 鍒濆鍖� websocket
+ websocket = new WebSocket(url + '?Authorization=Bearer ' + getToken() + '&clientid=' + import.meta.env.VITE_APP_CLIENT_ID);
+ websocketonopen();
+ websocketonmessage();
+ websocketonerror();
+ websocketclose();
+ sendSocketHeart();
+ return websocket;
+};
+
+// socket 杩炴帴鎴愬姛
+export const websocketonopen = () => {
+ websocket.onopen = function () {
+ console.log('杩炴帴 websocket 鎴愬姛');
+ resetHeart();
+ };
+};
+
+// socket 杩炴帴澶辫触
+export const websocketonerror = () => {
+ websocket.onerror = function (e: any) {
+ console.log('杩炴帴 websocket 澶辫触', e);
+ };
+};
+
+// socket 鏂紑閾炬帴
+export const websocketclose = () => {
+ websocket.onclose = function (e: any) {
+ console.log('鏂紑杩炴帴', e);
+ };
+};
+
+// socket 閲嶇疆蹇冭烦
+export const resetHeart = () => {
+ socketHeart = 0;
+ socketError = 0;
+ clearInterval(heartTime);
+ sendSocketHeart();
+};
+
+// socket蹇冭烦鍙戦��
+export const sendSocketHeart = () => {
+ heartTime = setInterval(() => {
+ // 濡傛灉杩炴帴姝ｅ父鍒欏彂閫佸績璺�
+ if (websocket.readyState == 1) {
+ // if (socketHeart <= 30) {
+ websocket.send(
+ JSON.stringify({
+ type: 'ping'
+ })
+ );
+ socketHeart = socketHeart + 1;
+ } else {
+ // 閲嶈繛
+ reconnect();
+ }
+ }, HeartTimeOut);
+};
+
+// socket閲嶈繛
+export const reconnect = () => {
+ if (socketError <= 2) {
+ clearInterval(heartTime);
+ initWebSocket(socketUrl);
+ socketError = socketError + 1;
+ // eslint-disable-next-line prettier/prettier
+ console.log('socket閲嶈繛', socketError);
+ } else {
+ // eslint-disable-next-line prettier/prettier
+ console.log('閲嶈瘯娆℃暟宸茬敤瀹�');
+ clearInterval(heartTime);
+ }
+};
+
+// socket 鍙戦�佹暟鎹�
+export const sendMsg = (data: any) => {
+ websocket.send(data);
+};
+
+// socket 鎺ユ敹鏁版嵁
+export const websocketonmessage = () => {
+ websocket.onmessage = function (e: any) {
+ const msg = JSON.parse(e.data) as any;
+ if (msg.type === 'heartbeat') {
+ resetHeart();
+ }
+ if (msg.type === 'ping') {
+ return;
+ }
+ addNotice({
+ message: msg,
+ read: false,
+ time: new Date().toLocaleString()
+ });
+ return msg;
+ };
+};
diff --git a/src/views/index.vue b/src/views/index.vue
index 438c1af..40c88a8 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -96,6 +96,11 @@
</template>
<script setup name="Index" lang="ts">
+import { initWebSocket } from '@/utils/websocket';
+
+onMounted(() => {
+ initWebSocket("ws://"+window.location.host+import.meta.env.VITE_APP_BASE_API+"/resource/websocket");
+});
const goTarget = (url:string) => {
window.open(url, '__blank')
diff --git a/vite.config.ts b/vite.config.ts
index cadaf62..788aace 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -28,6 +28,7 @@
[env.VITE_APP_BASE_API]: {
target: 'http://localhost:8080',
changeOrigin: true,
+ ws: true,
rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')
}
}
--
Gitblit v1.9.3