fea: Add HTTPS support

replace.sh

@@ -1,9 +1,14 @@
 nohup google-chrome --remote-debugging-address=0.0.0.0 --remote-debugging-port=9222 --no-sandbox --disable-dev-shm-usage --headless --disable-gpu  >/dev/null 2>&1 &
 sed -i "s/SONIC_SERVER_HOST/${SONIC_SERVER_HOST}/g" /usr/share/nginx/html/assets/*.js
 sed -i "s/SONIC_SERVER_PORT/${SONIC_SERVER_PORT}/g" /usr/share/nginx/html/assets/*.js
-sed -i "s/SONIC_SERVER_HTTPS/${SONIC_SERVER_HTTPS}/g" /usr/share/nginx/html/assets/*.js
 NGINXCONF=/etc/nginx/nginx.conf
 if [ "${SONIC_SERVER_HTTPS}" = "true" ]; then
     NGINXCONF=/etc/nginx/nginx-https.conf
+    WSORIGINAL="ws:\/\/\${e}:\${t}\/websockets"
+    WSREPLACED="wss:\/\/${SONIC_SERVER_HOST}:${SONIC_SERVER_PORT}\/server\/websockets\/hub\/\${e}\/\${t}"
+    PROTORIGINAL="\`http:\/\/\`"
+    PROTREPLACED="\`https:\/\/\`"
+    sed -i "s/$PROTORIGINAL/$PROTREPLACED/g" /usr/share/nginx/html/assets/*.js
+    sed -i "s/$WSORIGINAL/$WSREPLACED/g" /usr/share/nginx/html/assets/*.js
 fi
 /usr/sbin/nginx -c $NGINXCONF -g 'daemon off;'

src/config/sysdefines.js

@@ -0,0 +1,12 @@
+export default class SysDefines {
+
+    getWebProtocol() {
+        // Replace to return "https://" for HTTPS Support
+        return `http://`;
+    }
+
+    getWebsocketUrl(host, port) {
+        // Replace to return "wss://SONIC_SERVER_HOST:SONIC_SERVER_PORT/server/websockets/hub/${host}/${port}" for HTTPS Support
+        return `ws://${host}:${port}/websockets`;
+    }
+}

src/http/axios.js

@@ -20,7 +20,9 @@ import qs from 'qs';
 import { ElMessage } from 'element-plus';
 import { i18n, $tc } from '@/locales/setupI18n';
 import { router } from '../router/index.js';
+import SysDefines from '@/config/sysdefines';
 
+let sysDef = new SysDefines();
 let baseURL = '';
 if (process.env.NODE_ENV === 'development') {
   baseURL = 'http://localhost:3000/server/api';
@@ -30,9 +32,10 @@ if (process.env.NODE_ENV === 'production') {
 }
 const $http = axios.create();
 baseURL = baseURL.replace(':80/', '/');
+baseURL = baseURL.replace('http://', sysDef.getWebProtocol());
 $http.defaults.baseURL = baseURL;
 // $http.defaults.timeout = 20000;
-$http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+// $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 $http.defaults.withCredentials = true;
 $http.defaults.paramsSerializer = (params) =>
   qs.stringify(params, { arrayFormat: 'brackets' });

src/views/RemoteEmulator/AndroidRemote.vue

@@ -72,7 +72,7 @@ import {
 } from '@element-plus/icons';
 
 import { useI18n } from 'vue-i18n';
-
+import SysDefines from '@/config/sysdefines';
 import AudioProcessor from '@/lib/audio-processor';
 import wifiLogo from '@/assets/img/wifi.png';
 import RenderDeviceName from '../../components/RenderDeviceName.vue';
@@ -496,17 +496,20 @@ const setImgData = () => {
   };
   isShowImg.value = true;
 };
+
+const sysDef = new SysDefines();
 const openSocket = (host, port, key, udId) => {
   if ('WebSocket' in window) {
+    baseUrl = sysDef.getWebsocketUrl(host, port);
     //
     websocket = new WebSocket(
-      `ws://${host}:${port}/websockets/android/${key}/${udId}/${localStorage.getItem(
+      `${baseUrl}/android/${key}/${udId}/${localStorage.getItem(
         'SonicToken'
       )}`
     );
     //
     __Scrcpy = new Scrcpy({
-      socketURL: `ws://${host}:${port}/websockets/android/screen/${key}/${udId}/${localStorage.getItem(
+      socketURL: `${baseUrl}/android/screen/${key}/${udId}/${localStorage.getItem(
         'SonicToken'
       )}`,
       node: 'scrcpy-video',
@@ -517,7 +520,7 @@ const openSocket = (host, port, key, udId) => {
     changeScreenMode(screenMode.value, 1);
     //
     terminalWebsocket = new WebSocket(
-      `ws://${host}:${port}/websockets/android/terminal/${key}/${udId}/${localStorage.getItem(
+      `${baseUrl}/android/terminal/${key}/${udId}/${localStorage.getItem(
         'SonicToken'
       )}`
     );
@@ -1650,9 +1653,10 @@ const getDeviceById = (id) => {
 let audioPlayer = null;
 const isConnectAudio = ref(false);
 const initAudioPlayer = () => {
+  baseUrl = sysDef.getWebsocketUrl(agent.value.host, agent.value.port);
   audioPlayer = new AudioProcessor({
     node: 'audio-player',
-    wsUrl: `ws://${agent.value.host}:${agent.value.port}/websockets/audio/${agent.value.secretKey}/${device.value.udId}`,
+    wsUrl: `${baseUrl}/audio/${agent.value.secretKey}/${device.value.udId}`,
     onReady() {
       isConnectAudio.value = true;
     },

src/views/RemoteEmulator/IOSRemote.vue

@@ -69,6 +69,7 @@ import {
   InfoFilled,
 } from '@element-plus/icons';
 import { useI18n } from 'vue-i18n';
+import SysDefines from '@/config/sysdefines';
 import PackageList from '@/components/PackageList.vue';
 import RenderDeviceName from '../../components/RenderDeviceName.vue';
 import PocoPane from '../../components/PocoPane.vue';
@@ -490,20 +491,22 @@ const setImgData = (data) => {
   };
   isShowImg.value = true;
 };
+const sysDef = new SysDefines();
 const openSocket = (host, port, key, udId) => {
   if ('WebSocket' in window) {
+    baseUrl = sysDef.getWebsocketUrl(host, port);
     websocket = new WebSocket(
-      `ws://${host}:${port}/websockets/ios/${key}/${udId}/${localStorage.getItem(
+      `${baseUrl}/ios/${key}/${udId}/${localStorage.getItem(
         'SonicToken'
       )}`
     );
     terminalWebsocket = new WebSocket(
-      `ws://${host}:${port}/websockets/ios/terminal/${key}/${udId}/${localStorage.getItem(
+      `${baseUrl}/ios/terminal/${key}/${udId}/${localStorage.getItem(
         'SonicToken'
       )}`
     );
     screenWebsocket = new WebSocket(
-      `ws://${host}:${port}/websockets/ios/screen/${key}/${udId}/${localStorage.getItem(
+      `${baseUrl}/ios/screen/${key}/${udId}/${localStorage.getItem(
         'SonicToken'
       )}`
     );