create the wsServer based on webserver, no need for a seperate wsPort

web/src/action/globalStatusAction.js

@@ -11,7 +11,6 @@ export const FETCH_MAPPED_CONFIG = 'FETCH_MAPPED_CONFIG';
 export const UPDATE_LOCAL_MAPPED_CONFIG = 'UPDATE_LOCAL_MAPPED_CONFIG';
 export const UPDATE_REMOTE_MAPPED_CONFIG = 'UPDATE_REMOTE_MAPPED_CONFIG';
 export const UPDATE_ACTIVE_RECORD_ITEM = 'UPDATE_ACTIVE_RECORD_ITEM';
-export const UPDATE_GLOBAL_WSPORT = 'UPDATE_GLOBAL_WSPORT';
 
 export const TOGGLE_REMOTE_INTERCEPT_HTTPS = 'TOGGLE_REMOTE_INTERCEPT_HTTPS';
 export const UPDATE_LOCAL_INTERCEPT_HTTPS_FLAG = 'UPDATE_LOCAL_INTERCEPT_HTTPS_FLAG';
@@ -202,13 +201,6 @@ export function updateIsRootCAExists(exists) {
   };
 }
 
-export function updateGlobalWsPort(wsPort) {
-  return {
-    type: UPDATE_GLOBAL_WSPORT,
-    data: wsPort
-  }
-}
-
 export function updateFechingRecordStatus(isFetching) {
   return {
     type: UPDATE_FETCHING_RECORD_STATUS,

web/src/common/WsUtil.js

@@ -6,14 +6,14 @@ import { message } from 'antd';
 
 /**
 * Initiate a ws connection.
-* The default pay `do-not-proxy` means the ws do not need to be proxied.
-* This is very important for AnyProxy its' own server, such as WEB UI, and the
-* websocket detail panel, to prevent a recursive proxy.
+* The default path `do-not-proxy` means the ws do not need to be proxied.
+* This is very important for AnyProxy‘s own server, such as WEB UI, 
+* and the websocket detail panel in it, to prevent a recursive proxy.
 * @param {wsPort} wsPort the port of websocket
 * @param {key} path the path of the ws url
 *
 */
-export function initWs(wsPort = 8003, path = 'do-not-proxy') {
+export function initWs(wsPort = location.port, path = 'do-not-proxy') {
   if(!WebSocket){
     throw (new Error('WebSocket is not supportted on this browser'));
   }

web/src/component/header-menu.jsx

@@ -19,7 +19,6 @@ import {
   toggleRemoteGlobalProxyFlag,
   updateShouldClearRecord,
   updateIsRootCAExists,
-  updateGlobalWsPort,
   showFilter,
   updateLocalAppVersion
 } from 'action/globalStatusAction';
@@ -141,14 +140,12 @@ class HeaderMenu extends React.Component {
           ruleSummary: response.ruleSummary,
           rootCADirPath: response.rootCADirPath,
           ipAddress: response.ipAddress,
-          port: response.port,
-          wsPort: response.wsPort
+          port: response.port
         });
         this.props.dispatch(updateLocalInterceptHttpsFlag(response.currentInterceptFlag));
         this.props.dispatch(updateLocalGlobalProxyFlag(response.currentGlobalProxyFlag));
         this.props.dispatch(updateLocalAppVersion(response.appVersion));
         this.props.dispatch(updateIsRootCAExists(response.rootCAExists));
-        this.props.dispatch(updateGlobalWsPort(response.wsPort));
       })
       .catch((error) => {
         console.error(error);

web/src/component/record-detail.jsx

@@ -66,7 +66,7 @@ class RecordDetail extends React.Component {
 
   getWsMessageDiv(recordDetail) {
     const { globalStatus } = this.props;
-    return <RecordWsMessageDetail recordDetail={recordDetail} wsPort={globalStatus.wsPort} />;
+    return <RecordWsMessageDetail recordDetail={recordDetail} />;
   }
 
   getRecordContentDiv(recordDetail = {}, fetchingRecord) {

web/src/component/record-ws-message-detail.jsx

@@ -49,8 +49,7 @@ class RecordWsMessageDetail extends React.Component {
   }
 
   static propTypes = {
-    recordDetail: PropTypes.object,
-    wsPort: PropTypes.number
+    recordDetail: PropTypes.object
   }
 
   toggleRefresh () {
@@ -112,13 +111,11 @@ class RecordWsMessageDetail extends React.Component {
   }
 
   componentDidMount () {
-    const { wsPort, recordDetail } = this.props;
-    if (!wsPort) {
-      return;
-    }
+    const { recordDetail } = this.props;
+
     this.refreshPage();
 
-    this.wsClient = initWs(wsPort);
+    this.wsClient = initWs();
     this.wsClient.addEventListener('message', this.onMessageHandler);
   }
 

web/src/component/ws-listener.jsx

@@ -140,12 +140,11 @@ class WsListener extends React.Component {
   }
 
   initWs() {
-    const { wsPort } = this.props.globalStatus;
-    if (!wsPort || this.state.wsInited) {
+    if (this.state.wsInited) {
       return;
     }
     this.state.wsInited = true;
-    const wsClient = initWs(wsPort);
+    const wsClient = initWs();
     wsClient.onmessage = this.onWsMessage;
   }
 

web/src/reducer/globalStatusReducer.js

@@ -18,7 +18,6 @@ const defaultStatus = {
   showNewRecordTip: false,
   isRootCAFileExists: false,
   fetchingRecord: false,
-  wsPort: null,
   mappedConfig:[] // configured map config
 };
 
@@ -45,7 +44,6 @@ import {
   UPDATE_APP_VERSION,
   UPDATE_IS_ROOTCA_EXISTS,
   UPDATE_SHOW_NEW_RECORD_TIP,
-  UPDATE_GLOBAL_WSPORT,
   UPDATE_FETCHING_RECORD_STATUS
 } from 'action/globalStatusAction';
 
@@ -209,12 +207,6 @@ function requestListReducer(state = defaultStatus, action) {
       return newState;
     }
 
-    case UPDATE_GLOBAL_WSPORT: {
-      const newState = Object.assign({}, state);
-      newState.wsPort = action.data;
-      return newState;
-    }
-
     case UPDATE_FETCHING_RECORD_STATUS: {
       const newState = Object.assign({}, state);
       newState.fetchingRecord = action.data;