fix 修复 websocket 非index页面刷新无法重连问题

疯狂的狮子Li

2023-12-23 597f2b4461eb38626cfcfc243ca0eefaf076069c

fix 修复 websocket 非index页面刷新无法重连问题

 src/layout/index.vue

@@ -27,6 +27,14 @@
import useAppStore from '@/store/modules/app';
import useSettingsStore from '@/store/modules/settings';

import { initWebSocket } from '@/utils/websocket';
import useNoticeStore from '@/store/modules/notice';

onMounted(() => {
  let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
  initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + '/resource/websocket', useNoticeStore());
});

const settingsStore = useSettingsStore();
const theme = computed(() => settingsStore.theme);
const sidebar = computed(() => useAppStore().sidebar);

 src/utils/websocket.ts

@@ -19,10 +19,7 @@
 */

import { getToken } from '@/utils/auth';
import useNoticeStore from '@/store/modules/notice';
import { ElNotification } from 'element-plus';

const { addNotice } = useNoticeStore();

let socketUrl: any = ''; // socket地址
let websocket: any = null; // websocket 实例
@@ -30,12 +27,14 @@
let socketHeart = 0 as number; // 心跳次数
const HeartTimeOut = 10000; // 心跳超时时间 10000 = 10s
let socketError = 0 as number; // 错误次数
let noticeStore: any = null;

// 初始化socket
export const initWebSocket = (url: any) => {
export const initWebSocket = (url: any, store: any) => {
  if (import.meta.env.VITE_APP_WEBSOCKET === 'false') {
    return;
  }
  noticeStore = store;
  socketUrl = url;
  // 初始化 websocket
  websocket = new WebSocket(url + '?Authorization=Bearer ' + getToken() + '&clientid=' + import.meta.env.VITE_APP_CLIENT_ID);
@@ -100,7 +99,7 @@
export const reconnect = () => {
  if (socketError <= 2) {
    clearInterval(heartTime);
    initWebSocket(socketUrl);
    initWebSocket(socketUrl, noticeStore);
    socketError = socketError + 1;
    // eslint-disable-next-line prettier/prettier
    console.log('socket重连', socketError);
@@ -125,7 +124,7 @@
    if (e.data.indexOf('ping') > 0) {
      return;
    }
    addNotice({
    noticeStore.addNotice({
      message: e.data,
      read: false,
      time: new Date().toLocaleString()

 src/views/index.vue

@@ -96,13 +96,6 @@
</template>

<script setup name="Index" lang="ts">
import { initWebSocket } from '@/utils/websocket';

onMounted(() => {
  let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
  initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + '/resource/websocket');
});

const goTarget = (url: string) => {
  window.open(url, '__blank');
};