From 42e6c7b6003501580586423c35e89c446ac5a73a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BC=BA?= <1206709430@qq.com>
Date: Thu, 23 Nov 2023 18:55:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20websocket=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/application/websocketConfig.py     |  2 +-
 web/src/App.vue                            | 14 +++--
 web/src/i18n/lang/zh-cn.ts                 |  4 +-
 web/src/i18n/lang/zh-tw.ts                 |  2 +-
 web/src/layout/navBars/breadcrumb/user.vue | 69 +++++++++++++++++++++-
 web/src/layout/upgrade/index.vue           |  2 +-
 web/src/stores/interface/index.ts          |  1 +
 web/src/stores/userInfo.ts                 |  4 ++
 web/src/utils/websocket.ts                 | 20 +++++--
 9 files changed, 100 insertions(+), 18 deletions(-)

diff --git a/backend/application/websocketConfig.py b/backend/application/websocketConfig.py
index c36d97a..ab2cd64 100644
--- a/backend/application/websocketConfig.py
+++ b/backend/application/websocketConfig.py
@@ -73,7 +73,7 @@ class DvadminWebSocket(AsyncJsonWebsocketConsumer):
                 unread_count = await _get_message_unread(self.user_id)
                 if unread_count == 0:
                     # 发送连接成功
-                    await self.send_json(set_message('system', 'SYSTEM', '连接成功'))
+                    await self.send_json(set_message('system', 'SYSTEM', '您已上线'))
                 else:
                     await self.send_json(
                         set_message('system', 'SYSTEM', "请查看您的未读消息~",
diff --git a/web/src/App.vue b/web/src/App.vue
index ec824fa..caa36ca 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -59,12 +59,6 @@ onBeforeMount(() => {
 	setIntroduction.cssCdn();
 	// 设置批量第三方 js
 	setIntroduction.jsCdn();
-	//websockt 模块
-	try {
-		//websocket.init(wsReceive)
-	} catch (e) {
-		console.log('websocket错误');
-	}
 });
 // 页面加载时
 onMounted(() => {
@@ -93,6 +87,14 @@ watch(
 	() => route.path,
 	() => {
 		other.useTitle();
+    if (!websocket.websocket) {
+      //websockt 模块
+      try {
+        websocket.init(wsReceive)
+      } catch (e) {
+        console.log('websocket错误');
+      }
+    }
 	},
 	{
 		deep: true,
diff --git a/web/src/i18n/lang/zh-cn.ts b/web/src/i18n/lang/zh-cn.ts
index 6fc6ef3..6289a39 100644
--- a/web/src/i18n/lang/zh-cn.ts
+++ b/web/src/i18n/lang/zh-cn.ts
@@ -40,6 +40,8 @@ export default {
         title4: '消息',
         title5: '开全屏',
         title6: '关全屏',
+        retry: '重试上线',
+        onlinePrompt: '当前离线状态，是否重试上线？',
         dropdownLarge: '大型',
         dropdownDefault: '默认',
         dropdownSmall: '小型',
@@ -75,7 +77,7 @@ export default {
     },
     noAccess: {
         accessTitle: '您未被授权，没有操作权限~',
-        accessMsg: '联系方式：加QQ群探讨 665452019',
+        accessMsg: '请联系管理员',
         accessBtn: '重新授权',
     },
     layout: {
diff --git a/web/src/i18n/lang/zh-tw.ts b/web/src/i18n/lang/zh-tw.ts
index 35e406f..ea00164 100644
--- a/web/src/i18n/lang/zh-tw.ts
+++ b/web/src/i18n/lang/zh-tw.ts
@@ -123,7 +123,7 @@ export default {
 	},
 	noAccess: {
 		accessTitle: '您未被授權，沒有操作許可權~',
-		accessMsg: '聯繫方式：加QQ群探討665452019',
+		accessMsg: '請聯系管理員',
 		accessBtn: '重新授權',
 	},
 	layout: {
diff --git a/web/src/layout/navBars/breadcrumb/user.vue b/web/src/layout/navBars/breadcrumb/user.vue
index f4cf706..620a076 100644
--- a/web/src/layout/navBars/breadcrumb/user.vue
+++ b/web/src/layout/navBars/breadcrumb/user.vue
@@ -57,9 +57,33 @@
 				:class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"
 			></i>
 		</div>
+    <div>
+      <span v-if="!isSocketOpen">
+        <el-popconfirm
+          width="250"
+          ref="onlinePopoverRef"
+          :confirm-button-text="$t('message.user.retry')"
+          :icon="InfoFilled"
+          trigger="hover"
+          icon-color="#626AEF"
+          :title="$t('message.user.onlinePrompt')"
+          @confirm="onlineConfirmEvent"
+        >
+          <template #reference>
+            <el-badge is-dot class="item" :class="{'online-status': isSocketOpen,'online-down':!isSocketOpen}">
+              <img :src="userInfos.avatar || headerImage" class="layout-navbars-breadcrumb-user-link-photo mr5" />
+            </el-badge>
+          </template>
+        </el-popconfirm>
+      </span>
+    </div>
 		<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
 			<span class="layout-navbars-breadcrumb-user-link">
-				<img :src="userInfos.avatar || headerImage" class="layout-navbars-breadcrumb-user-link-photo mr5" />
+        <span v-if="isSocketOpen">
+          <el-badge is-dot class="item" :class="{'online-status': isSocketOpen,'online-down':!isSocketOpen}">
+            <img :src="userInfos.avatar || headerImage" class="layout-navbars-breadcrumb-user-link-photo mr5" />
+          </el-badge>
+        </span>
 				{{ userInfos.username === '' ? 'common' : userInfos.username }}
 				<el-icon class="el-icon--right">
 					<ele-ArrowDown />
@@ -79,7 +103,7 @@
 </template>
 
 <script setup lang="ts" name="layoutBreadcrumbUser">
-import { defineAsyncComponent, ref, computed, reactive, onMounted } from 'vue';
+import { defineAsyncComponent, ref, computed, reactive, onMounted, unref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import screenfull from 'screenfull';
@@ -91,6 +115,8 @@ import other from '/@/utils/other';
 import mittBus from '/@/utils/mitt';
 import { Session, Local } from '/@/utils/storage';
 import headerImage from '/@/assets/img/headerImage.png';
+import websocket from '/@/utils/websocket';
+import { InfoFilled } from '@element-plus/icons-vue'
 // 引入组件
 const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/userNews.vue'));
 const Search = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/search.vue'));
@@ -118,6 +144,21 @@ const layoutUserFlexNum = computed(() => {
 	else num = '';
 	return num;
 });
+
+// 定义变量内容
+const { isSocketOpen } = storeToRefs(useUserInfo());
+
+// websocket状态
+const onlinePopoverRef = ref()
+const onlineConfirmEvent = () => {
+  if (!isSocketOpen.value) {
+      websocket.is_reonnect = true
+      websocket.reconnect_current = 1
+      websocket.reconnect()
+  }
+  // 手动隐藏弹出
+  unref(onlinePopoverRef).popperRef?.delayHide?.()
+}
 // 全屏点击时
 const onScreenfullClick = () => {
 	if (!screenfull.isEnabled) {
@@ -256,5 +297,29 @@ const messageCenter = messageCenterStore();
 	:deep(.el-badge__content.is-fixed) {
 		top: 12px;
 	}
+  .online-status{
+    cursor: pointer;
+    :deep .el-badge__content.is-fixed {
+      top: 30px;
+      font-size: 14px;
+      left: 5px;
+      height: 12px;
+      width: 12px;
+      padding: 0;
+      background-color: #18bc9c;
+    }
+  }
+  .online-down{
+    cursor: pointer;
+    :deep .el-badge__content.is-fixed {
+      top: 30px;
+      font-size: 14px;
+      left: 5px;
+      height: 12px;
+      width: 12px;
+      padding: 0;
+      background-color: #979b9c;
+    }
+  }
 }
 </style>
diff --git a/web/src/layout/upgrade/index.vue b/web/src/layout/upgrade/index.vue
index e361012..89654ca 100644
--- a/web/src/layout/upgrade/index.vue
+++ b/web/src/layout/upgrade/index.vue
@@ -17,7 +17,7 @@
 			<div class="upgrade-content">
 				{{ getThemeConfig.globalTitle }} {{ $t('message.upgrade.msg') }}
 				<div class="mt5">
-					<el-link type="primary" class="font12" href="https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md" target="_black">
+					<el-link type="primary" class="font12" href=https://gitee.com/huge-dream/django-vue3-admin/blob/master/CHANGELOG.md" target="_black">
 						CHANGELOG.md
 					</el-link>
 				</div>
diff --git a/web/src/stores/interface/index.ts b/web/src/stores/interface/index.ts
index 98d016b..6d2c775 100644
--- a/web/src/stores/interface/index.ts
+++ b/web/src/stores/interface/index.ts
@@ -19,6 +19,7 @@ export interface UserInfosState {
 }
 export interface UserInfosStates {
 	userInfos: UserInfosState;
+	isSocketOpen: boolean
 }
 
 // 路由缓存列表
diff --git a/web/src/stores/userInfo.ts b/web/src/stores/userInfo.ts
index 4bef2a9..9be64a8 100644
--- a/web/src/stores/userInfo.ts
+++ b/web/src/stores/userInfo.ts
@@ -26,6 +26,7 @@ export const useUserInfo = defineStore('userInfo', {
 				},
 			],
 		},
+		isSocketOpen: false
 	}),
 	actions: {
 		async updateUserInfos() {
@@ -57,6 +58,9 @@ export const useUserInfo = defineStore('userInfo', {
 				Session.set('userInfo', this.userInfos);
 			}
 		},
+		async setWebSocketState(socketState: boolean) {
+			this.isSocketOpen = socketState;
+		},
 		async getApiUserInfo() {
 			return request({
 				url: '/api/system/user/user_info/',
diff --git a/web/src/utils/websocket.ts b/web/src/utils/websocket.ts
index 987273e..2fabadb 100644
--- a/web/src/utils/websocket.ts
+++ b/web/src/utils/websocket.ts
@@ -3,7 +3,7 @@ import {Session} from "/@/utils/storage";
 import {getWsBaseURL} from "/@/utils/baseUrl";
 // @ts-ignore
 import socket from '@/types/api/socket'
-
+import {useUserInfo} from "/@/stores/userInfo";
 const websocket: socket = {
     websocket: null,
     connectURL: getWsBaseURL(),
@@ -42,6 +42,7 @@ const websocket: socket = {
         }
         websocket.websocket.onclose = (e: any) => {
             websocket.socket_open = false
+            useUserInfo().setWebSocketState(websocket.socket_open);
             // 需要重新连接
             if (websocket.is_reonnect) {
                 websocket.reconnect_timer = setTimeout(() => {
@@ -49,6 +50,8 @@ const websocket: socket = {
                     if (websocket.reconnect_current > websocket.reconnect_count) {
                         clearTimeout(websocket.reconnect_timer)
                         websocket.is_reonnect = false
+                        websocket.socket_open = false
+                        useUserInfo().setWebSocketState(websocket.socket_open);
                         return
                     }
                     // 记录重连次数
@@ -60,6 +63,7 @@ const websocket: socket = {
         // 连接成功
         websocket.websocket.onopen = function () {
             websocket.socket_open = true
+            useUserInfo().setWebSocketState(websocket.socket_open);
             websocket.is_reonnect = true
             // 开启心跳
             websocket.heartbeat()
@@ -85,17 +89,21 @@ const websocket: socket = {
             callback && callback()
         } else {
             clearInterval(websocket.hearbeat_timer)
-            message({
-                type: 'warning',
-                message: 'socket链接已断开',
-                duration: 1000,
-            })
+            // message({
+            //     type: 'warning',
+            //     message: 'socket链接已断开',
+            //     duration: 1000,
+            // })
+            websocket.socket_open = false
+            useUserInfo().setWebSocketState(websocket.socket_open);
         }
     },
     close: () => {
         websocket.is_reonnect = false
         websocket.websocket.close()
         websocket.websocket = null;
+        websocket.socket_open = false
+        useUserInfo().setWebSocketState(websocket.socket_open);
     },
     /**
      * 重新连接