fix websocket connection issue in electron

client/src/app/app.js

-import {app, BrowserWindow, Menu, shell} from 'electron';
-import main from "@electron/remote/main";
+import {app, BrowserWindow, ipcMain, Menu, shell} from 'electron';
 
 import {DEBUG} from './utils/consts';
 import {IS_MAC_OSX} from './utils/env';
@@ -8,6 +7,7 @@ import Config, {updateConfig} from './utils/config';
 import Lang, {initLang} from './core/lang';
 import {startUIService} from "./core/ui";
 import {startZtfServer, killZtfServer} from "./core/ztf";
+// import {main} from "@electron/remote";
 
 export default class ZtfApp {
     constructor() {
@@ -42,6 +42,7 @@ export default class ZtfApp {
         process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
 
         const remoteMain = require('@electron/remote/main')
+        logInfo(remoteMain)
         remoteMain.initialize()
 
         const mainWin = new BrowserWindow({
@@ -62,6 +63,26 @@ export default class ZtfApp {
         const url = await startUIService()
         await mainWin.loadURL(url);
 
+        // const { ipcMain } = require('electron')
+        // ipcMain.on('renderer-msg', (event, arg) => {
+        //     logInfo('msg from renderer: ' + arg)
+        //     switch (arg) {
+        //         case 'fullScreen':
+        //             const mainWin = this._windows.get('main');
+        //             mainWin.setFullScreen(!mainWin.isFullScreen());
+        //             break;
+        //         case 'help':
+        //             shell.openExternal('https://ztf.im');
+        //             break;
+        //         case 'exit':
+        //             app.quit()
+        //             break;
+        //         default:
+        //     }
+        //
+        // // event.reply('main-msg', '好的');
+        // })
+
         // if (DEBUG) {
             mainWin.webContents.openDevTools({mode: 'bottom'});
         // }

client/src/app/core/ui.js

@@ -38,8 +38,8 @@ export function startUIService() {
                     _uiService = null;
                     reject(serverError);
                 } else {
-                    logInfo(`>> ui server started successfully on http://localhost:${port}.`);
-                    resolve(`http://localhost:${port}`);
+                    logInfo(`>> ui server started successfully on http://127.0.0.1:${port}.`);
+                    resolve(`http://127.0.0.1:${port}`);
                 }
             });
             server.on('close', () => {

ui/package.json

@@ -11,11 +11,13 @@
     "svgo": "svgo -f src/assets/iconsvg --config=src/assets/iconsvg/svgo.yml"
   },
   "dependencies": {
+    "@electron/remote": "^2.0.8",
     "@toast-ui/editor": "^2.5.3",
     "ant-design-vue": "^2.2.8",
     "axios": "^0.21.4",
     "core-js": "^3.18.0",
     "echarts": "^4.9.0",
+    "electron": "^18.0.3",
     "localforage": "^1.10.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",

ui/src/layouts/IndexLayout/components/TopSettings.vue

@@ -95,12 +95,12 @@ export default defineComponent({
       console.log('fullScreen')
       fullScreenDef.value = !fullScreenDef.value
 
-      const remote = window.require('@electron/remote')
-      const mainWin = remote.getCurrentWindow();
-      mainWin.setFullScreen(!mainWin.isFullScreen());
+      const {BrowserWindow} = window.require("@electron/remote")
+      BrowserWindow.setFullScreen(!BrowserWindow.isFullScreen());
     }
     const help = (): void => {
       console.log('help')
+
       const shell = window.require('@electron/remote').shell
       shell.openExternal('https://ztf.im');
     }

ui/src/locales/en-US.ts

@@ -7,7 +7,7 @@ export default {
 
     'settings': 'Settings',
     'exit': 'Exit',
-    'fullScreen': 'Full Screen',
+    'fullScreen': 'Toggle Fullscreen',
     'help': 'Help',
 
     'index': 'Index',

ui/src/locales/zh-CN.ts

@@ -7,7 +7,7 @@ export default {
 
     'settings': '设置',
     'exit': '退出',
-    'fullScreen': '全屏',
+    'fullScreen': '切换全屏',
     'help': '帮助',
 
     'index': '索引',

ui/src/services/websocket.ts

 import * as neffos from 'neffos.js';
-import { getCurrentInstance } from 'vue';
 import {NSConn} from "neffos.js";
-import {ComponentInternalInstance, ComponentPublicInstance} from "@vue/runtime-core";
+import {ComponentPublicInstance} from "@vue/runtime-core";
 
 const WebSocketPath = 'api/v1/ws';
-export const WebSocketBaseDev = 'ws://127.0.0.1:8085/';
-export type WsObject = {
-  conn?: any;
-};
+
 export type WsEvent = {
   room: string;
   code: string;
@@ -90,27 +86,11 @@ export function getWebSocketApi (): string {
   const isProd = process.env.NODE_ENV === 'production'
 
   const loc = window.location
-  console.log(loc)
-  console.log(loc.hostname)
-
-  let wsUri = ''
-  if (!isProd) {
-    wsUri = WebSocketBaseDev
-  } else {
-    const loc = window.location
-
-    if (loc.hostname === 'localhost') { // run in electron or dev machine
-      wsUri = WebSocketBaseDev
-    } else {
-      if (loc.protocol === 'https:') {
-        wsUri = 'wss:'
-      } else {
-        wsUri = 'ws:'
-      }
-      wsUri += '//' + loc.host
-      wsUri += loc.pathname
-    }
-  }
+  console.log(`${isProd}, ${loc.toString()}`)
+
+  const wsUri = process.env.VUE_APP_APIHOST.replace('http', 'ws')
+  const url = wsUri + WebSocketPath
+  console.log(`websocket url = ${url}`)
 
-  return wsUri + WebSocketPath
+  return url
 }

ui/src/views/script/component/execLog.vue

 <template>
   <div id="exec-log-main">
-    <div v-if="currProduct.id && wsStatus === 'success'" class="ws-status" :class="wsStatus">
+    <div v-if="wsStatus === 'success'" class="ws-status" :class="wsStatus">
       <CheckOutlined />
       <span class="text">{{t('ws_conn_success')}}</span>
       <span @click="hideWsStatus" class="icon-close"><CloseCircleOutlined /></span>
     </div>
 
-    <div v-if="currProduct.id && wsStatus === 'fail'" class="ws-status" :class="wsStatus">
+    <div v-if="wsStatus === 'fail'" class="ws-status" :class="wsStatus">
       <CloseOutlined />
       <span class="text">{{t('ws_conn_success')}}</span>
       <span @click="hideWsStatus" class="icon-close"><CloseCircleOutlined /></span>
@@ -116,7 +116,7 @@ export default defineComponent({
     const {proxy} = getCurrentInstance() as any;
     WebSocket.init(proxy)
 
-    let wsStatus = ref('success')
+    let wsStatus = ref('')
 
     if (init) {
       proxy.$sub(WsEventName, (data) => {