feat: ws代理

electron.vite.config.ts

@@ -27,6 +27,16 @@ export default defineConfig({
     }
   },
   renderer: {
+    server: {
+      cors: true,
+      proxy: {
+        '/websocket': {
+          target: 'ws://localhost:8899/',
+          changeOrigin: true,
+          ws: true
+        }
+      }
+    },
     root: '.',
     build: {
       rollupOptions: {

src/layouts/index.vue

@@ -8,6 +8,7 @@
       <div>
         <el-button @click="router.back" v-if="path !== '/index'">返回</el-button>
         <el-button @click="reload">刷新</el-button>
+        <span style="margin-left: 12px; color: #ffffff">ws连接状态：{{ wsStatus }}</span>
       </div>
     </el-header>
     <el-main>
@@ -21,6 +22,7 @@
 
 <script setup lang="tsx" name="Layout">
 import router from '@/router'
+import { wsStatus } from '@/utils/webSocket'
 const version = ref('v1.0.0')
 
 const handleClickMenu = (path: string) => {
@@ -30,7 +32,6 @@ const reload = () => {
   location.reload()
 }
 const path = computed(() => {
-  debugger
   return router.currentRoute.value.path
 })
 </script>

src/main.ts

@@ -9,10 +9,12 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import { createApp } from 'vue'
 import App from './App.vue'
 import { setupRouter } from '@/router'
-// import { setupAuthRoutes } from './router/before'
 import { createPinia } from 'pinia'
 import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
 import ContextMenu from '@imengyu/vue3-context-menu'
+
+import { initWebSocket } from '@/utils/webSocket'
+
 const pinia = createPinia()
 // 创建实例
 const setupAll = async () => {
@@ -22,8 +24,9 @@ const setupAll = async () => {
   }
   setupRouter(app)
   app.use(ContextMenu)
-  // setupAuthRoutes()
   app.use(pinia)
+  let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
+  initWebSocket(protocol + window.location.host + '/websocket')
   app.mount('#app')
 }
 

src/utils/webSocket.ts

@@ -79,7 +79,6 @@ export const initWebSocket = (url: string) => {
 
   // 在应用关闭时断开连接
   window.addEventListener('beforeunload', () => {
-    console.log('应用关闭，断开 WebSocket 连接')
     close()
   })