|
|
@@ -17,6 +17,8 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import {ElMessage} from 'element-plus'
|
|
|
+ import {ROOTPATH2} from '../../comment/httpUrl.js'
|
|
|
import headers from '../components/header/header.vue'
|
|
|
import sidebars from '../components/sidebar/sidebar.vue'
|
|
|
import copyright from '../components/copyright/copyright.vue'
|
|
|
@@ -33,17 +35,66 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ ws: null,
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
if (localStorage.getItem('token')) {
|
|
|
this.getUserInfo();
|
|
|
}
|
|
|
-
|
|
|
+ const userId = localStorage.getItem('userId');
|
|
|
+ // 连接websocket
|
|
|
+ this.connectSocket(userId);
|
|
|
+
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
|
|
+ console.log('♻️ 组件销毁前关闭 WebSocket');
|
|
|
+ this.ws.close();
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+ connectSocket(userId) {
|
|
|
+ if (!userId) return;
|
|
|
+ // 若已有连接则关闭
|
|
|
+ if (this.ws) {
|
|
|
+ this.ws.close();
|
|
|
+ }
|
|
|
+ this.ws = new WebSocket(ROOTPATH2 + '' + userId)
|
|
|
+ // 连接成功
|
|
|
+ this.ws.onopen = () => {
|
|
|
+ console.log('WebSocket 已连接:', ROOTPATH2 + '' + userId);
|
|
|
+ };
|
|
|
+ // 收到消息
|
|
|
+ this.ws.onmessage = (event) => {
|
|
|
+ console.log(event)
|
|
|
+ if (event.data === 'HeartBeat') return;
|
|
|
+ let msg;
|
|
|
+ try {
|
|
|
+ msg = JSON.parse(event.data);
|
|
|
+ } catch (e) {
|
|
|
+ console.warn('非JSON消息:', event.data);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (msg.type === 'kickOut') {
|
|
|
+ ElMessage({
|
|
|
+ message: msg.content || '您的账号已在其他设备登录',
|
|
|
+ type: 'warning',
|
|
|
+ duration: 1500,
|
|
|
+ offset: this.screenHeight / 2
|
|
|
+ })
|
|
|
+ localStorage.removeItem('token');
|
|
|
+ localStorage.removeItem('userId');
|
|
|
+ localStorage.removeItem('userType');
|
|
|
+ localStorage.removeItem('companyId');
|
|
|
+ // 调用重置状态的函数
|
|
|
+ this.$store.dispatch('SET_DATA');
|
|
|
+ this.$router.push({
|
|
|
+ name: 'login'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
//获取用户信息
|
|
|
getUserInfo() {
|
|
|
this.$Request.get('/app/user/selectUserById').then(res => {
|
