Merge pull request #325 from alibaba/ws-port-integrate

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

docs-src/cn/src_doc.md

@@ -79,8 +79,7 @@ const options = {
   rule: require('myRuleModule'),
   webInterface: {
     enable: true,
-    webPort: 8002,
+    webPort: 8002
-    wsPort: 8003,
   },
   throttle: 10000,
   forceProxyHttps: false,

docs-src/en/src_doc.md

@@ -78,8 +78,7 @@ const options = {
   rule: require('myRuleModule'),
   webInterface: {
     enable: true,
-    webPort: 8002,
+    webPort: 8002
-    wsPort: 8003,
   },
   throttle: 10000,
   forceProxyHttps: false,

lib/webInterface.js

@@ -14,7 +14,6 @@ const express = require('express'),
   wsServer = require('./wsServer'),
   juicer = require('juicer'),
   ip = require('ip'),
-  co = require('co'),
   compress = require('compression');
 
 const packageJson = require('../package.json');
@@ -33,7 +32,6 @@ class webInterface extends events.EventEmitter {
    *
    * @param {object} config
    * @param {number} config.webPort
-   * @param {number} config.wsPort
    * @param {object} recorder
    *
    * @memberOf webInterface
@@ -48,20 +46,17 @@ class webInterface extends events.EventEmitter {
     self.recorder = recorder;
     self.config = config || {};
 
-    self.app = null;
+    self.app = this.getServer();
     self.server = null;
     self.wsServer = null;
   }
 
-  start() {
+  /**
+   * get the express server
+   */
+  getServer() {
     const self = this;
     const recorder = self.recorder;    
-    let wsPort;
-
-    return co(function *() {
-      // determine ws port
-      wsPort = self.config.wsPort ? self.config.wsPort : yield util.getFreePort();
-    }).then(() => {
     const ipAddress = ip.address(),
       // userRule = proxyInstance.proxyRule,
       webBasePath = 'web';
@@ -270,7 +265,6 @@ class webInterface extends events.EventEmitter {
         ruleSummary: ruleSummary || '',
         ipAddress: util.getAllIpAddress(),
         port: '', //proxyInstance.proxyPort, // TODO
-          wsPort,
         appVersion: packageJson.version
       });
     });
@@ -293,51 +287,11 @@ class webInterface extends events.EventEmitter {
       }
     });
 
-      // should not be available in in-build version
-      // app.post('/api/toggleInterceptHttps', (req, res) => {
-      //   const rootExists = certMgr.isRootCAFileExists();
-      //   if (!rootExists) {
-      //     certMgr.generateRootCA(() => {
-      //       proxyInstance.setIntercept(req.body.flag);
-      //       // Also inform the web if RootCa exists
-      //       res.json({
-      //         status: 'success',
-      //         rootExists
-      //       });
-      //     });
-      //   } else {
-      //     proxyInstance.setIntercept(req.body.flag);
-      //     res.json({
-      //       status: 'success',
-      //       rootExists
-      //     });
-      //   }
-      // });
-
-      // app.post('/api/toggleGlobalProxy', (req, res) => {
-      //   const flag = req.body.flag;
-      //   let result = {};
-      //   result = flag ? proxyInstance.enableGlobalProxy() : proxyInstance.disableGlobalProxy();
-
-      //   if (result.status) {
-      //     res.json({
-      //       status: 'failed',
-      //       errorMsg: result.stdout
-      //     });
-      //   } else {
-      //     res.json({
-      //       status: 'success',
-      //       isWindows: /^win/.test(process.platform)
-      //     });
-      //   }
-      // });
-
     app.use((req, res, next) => {
       const indexTpl = fs.readFileSync(path.join(staticDir, '/index.html'), { encoding: 'utf8' }),
         opt = {
           rule: ruleSummary || '',
           customMenu: customMenu || [],
-            wsPort,
           ipAddress: ipAddress || '127.0.0.1'
         };
 
@@ -348,28 +302,25 @@ class webInterface extends events.EventEmitter {
         next();
       }
     });
-
     app.use(express.static(staticDir));
+    return app;
+  }
 
-      //plugin from rule file
+  start() {
-      const server = app.listen(self.webPort);
+    const self = this;
-
+    return new Promise((resolve, reject) => {
-      self.app = app;
+      self.server = self.app.listen(self.webPort);
-      self.server = server;
-    }).then(() => {
-      // start ws server
       self.wsServer = new wsServer({
-        port: wsPort
+        server: self.server
-      }, recorder);
+      }, self.recorder);
-
+      self.wsServer.start();
-      return self.wsServer.start();
+      resolve();
-    });
+    })
   }
 
   close() {
     this.server && this.server.close();
     this.wsServer && this.wsServer.closeAll();
-
     this.server = null;
     this.wsServer = null;
     this.proxyInstance = null;

lib/wsServer.js

@@ -46,14 +46,14 @@ function resToMsg(msg, recorder, cb) {
   }
 }
 
-//config.port
+//config.server
 
 class wsServer {
   constructor(config, recorder) {
     if (!recorder) {
       throw new Error('proxy recorder is required');
-    } else if (!config || !config.port) {
+    } else if (!config || !config.server) {
-      throw new Error('config.port is required');
+      throw new Error('config.server is required');
     }
 
     const self = this;
@@ -68,11 +68,11 @@ class wsServer {
     return new Promise((resolve, reject) => {
       //web socket interface
       const wss = new WebSocketServer({
-        port: config.port,
+        server: config.server,
         clientTracking: true,
-      }, resolve);
+      });
+      resolve();
       
-      logUtil.printLog(`WebSoket setup at port ${config.port} `, logUtil.T_DEBUG);
       // the queue of the messages to be delivered
       let messageQueue = [];
       // the flat to indicate wheter to broadcast the record

module_sample/normal_use.js

@@ -6,8 +6,7 @@ const options = {
   rule: null,
   webInterface: {
     enable: true,
-    webPort: 8002,
+    webPort: 8002
-    wsPort: 8003,
   },
   throttle: 10000,
   forceProxyHttps: true,

proxy.js

@@ -310,7 +310,6 @@ class ProxyServer extends ProxyCore {
    * @param {object} [config.webInterface] - config of the web interface
    * @param {boolean} [config.webInterface.enable=false] - if web interface is enabled
    * @param {number} [config.webInterface.webPort=8002] - http port of the web interface
-   * @param {number} [config.webInterface.wsPort] - web socket port of the web interface
    */
   constructor(config) {
     // prepare a recorder

test/spec_lib/proxyServerModule.js

@@ -16,8 +16,7 @@ describe('AnyProxy.proxyServer basic test', () => {
       rule: null,
       webInterface: {
         enable: true,
-        webPort: 8002,
+        webPort: 8002
-        wsPort: 8003,
       },
       throttle: 10000,
       forceProxyHttps: false,

test/util/ProxyServerUtil.js

@@ -11,7 +11,6 @@ const DEFAULT_OPTIONS = {
   webInterface: {
     enable: true,
     webPort: 8002,  // optional, port for web interface
-    wsPort: 8003,  // optional, internal port for web socket
   },
   wsIntercept: true,
   throttle: 10000,    // optional, speed limit in kb/s

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.
+* The default path `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
+* This is very important for AnyProxy‘s own server, such as WEB UI, 
-* websocket detail panel, to prevent a recursive proxy.
+* 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,
+          port: response.port
-          wsPort: response.wsPort
         });
         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,
+    recordDetail: PropTypes.object
-    wsPort: PropTypes.number
   }
 
   toggleRefresh () {
@@ -112,13 +111,11 @@ class RecordWsMessageDetail extends React.Component {
   }
 
   componentDidMount () {
-    const { wsPort, recordDetail } = this.props;
+    const { recordDetail } = this.props;
-    if (!wsPort) {
+
-      return;
-    }
     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 (this.state.wsInited) {
-    if (!wsPort || 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;