optimize webServer, move it to /lib

lib/recorder.js

@@ -106,21 +106,22 @@ function Recorder(option){
 
             if(!bodyContent){
                 cb(null,result);
+            }else{
+                var record      = doc[0],
+                    resHeader   = record['resHeader'] || {};
+                try{
+                    var charsetMatch = JSON.stringify(resHeader).match(/charset="?([a-zA-Z0-9\-]+)"?/);
+                    if(charsetMatch && charsetMatch.length > 1){
+                        var currentCharset = charsetMatch[1].toLowerCase();
+                        if(currentCharset != "utf-8" && iconv.encodingExists(currentCharset)){
+                            bodyContent = iconv.decode(bodyContent, currentCharset);
+                        }
+                    }
+                }catch(e){}
+
+                cb(null,bodyContent.toString());
             }
 
-            var record      = doc[0],
-                resHeader   = record['resHeader'] || {};
-            try{
-                var charsetMatch = JSON.stringify(resHeader).match(/charset="?([a-zA-Z0-9\-]+)"?/);
-                if(charsetMatch && charsetMatch.length > 1){
-                    var currentCharset = charsetMatch[1].toLowerCase();
-                    if(currentCharset != "utf-8" && iconv.encodingExists(currentCharset)){
-                        bodyContent = iconv.decode(bodyContent, currentCharset);
-                    }
-                }
-            }catch(e){}
-
-            cb(null,bodyContent.toString());
         });
     }
 

lib/rule_default.js

@@ -61,17 +61,6 @@ module.exports = {
     //fetch entire traffic data
     fetchTrafficData: function(id,info){},
 
-    //[internal]
-    customMenu:[
-        {
-            name    :"test",
-            handler :function(){}
-        },{
-            name    :"second-test",
-            handler :function(){}
-        }
-    ],
-
     setInterceptFlag:function(flag){
         interceptFlag = flag && isRootCAFileExists;
     }

lib/webInterface.js

@@ -1,26 +1,27 @@
-// var process = require("child_process")
 var express         = require("express"),
     url             = require('url'),
     fs              = require("fs"),
-    util            = require("./lib/util"),
+    path            = require("path"),
-    certMgr         = require("./lib/certMgr"),
     events          = require("events"),
     inherits        = require("util").inherits,
-    ent             = require("ent"),
     qrCode          = require('qrcode-npm'),
-    logUtil         = require("./lib/log");
+    util            = require("./util"),
+    certMgr         = require("./certMgr"),
+    logUtil         = require("./log");
 
-function proxyWebServer(port,webSocketPort,proxyConfigPort,ruleSummary,ipAddress,menuListStr){
+
+function webInterface(config){
+    var port = config.port,
+        wsPort        = config.wsPort,
+        ruleSummary   = config.ruleSummary,
+        ipAddress     = config.ip;
 
     var self         = this,
         myAbsAddress = "http://" + ipAddress + ":" + port +"/",
-        crtFilePath  = certMgr.getRootCAFilePath();
+        crtFilePath  = certMgr.getRootCAFilePath(),
+        staticDir    = path.join(__dirname,'../web');
 
-    if(arguments.length < 3){
-    	throw new Error("please assign ports");
-    }
 
-    //web interface
     var app = express();
     app.use(function(req, res, next) {
         res.setHeader("note", "THIS IS A REQUEST FROM ANYPROXY WEB INTERFACE");
@@ -79,46 +80,28 @@ function proxyWebServer(port,webSocketPort,proxyConfigPort,ruleSummary,ipAddress
         res.end(resDom);
     });
 
-    app.use(function(req,res,next){
+    var indexTpl  = fs.readFileSync(path.join(staticDir,"/index.html"),{encoding:"utf8"}),
-        var indexHTML       = fs.readFileSync(__dirname + "/web/index.html",{encoding:"utf8"});
+        indexHTML = util.simpleRender(indexTpl, {
+            rule            : ruleSummary || "",
+            wsPort          : wsPort,
+            ipAddress       : ipAddress || "127.0.0.1"
+        });
         
+    app.use(function(req,res,next){
         if(req.url == "/"){
             res.setHeader("Content-Type", "text/html");
-            res.end(util.simpleRender(indexHTML, {
+            res.end(indexHTML);
-                rule            : ruleSummary || "",
-                webSocketPort   : webSocketPort,
-                proxyConfigPort : proxyConfigPort,
-                ipAddress       : ipAddress || "127.0.0.1",
-                menu            : menuListStr
-            }));
         }else{
             next();
         }
     });
 
-    app.use(express.static(__dirname + '/web'));
+    app.use(express.static(staticDir));
     app.listen(port);
 
     self.app  = app;
 }
 
-inherits(proxyWebServer, events.EventEmitter);
+inherits(webInterface, events.EventEmitter);
 
-var	param  = process.argv.slice(2),
+module.exports = webInterface;
-    server = new proxyWebServer(param[0],param[1],param[2],param[3],param[4],param[5]),
-	cbMap  = {}, // id body cb
-    lastestHeartbeat = new Date().getTime();
-
-
-//watch dog
-process.on("message",function(data){
-    if(data.type == "watch"){
-        lastestHeartbeat = new Date().getTime();
-    }
-});
-
-setInterval(function(){
-    if(new Date().getTime() - lastestHeartbeat  > 10 * 1000){
-        process.exit();
-    }
-},7000);

lib/wsServer.js

@@ -0,0 +1,88 @@
+//websocket server manager
+
+var  WebSocketServer = require('ws').Server,
+     logUtil         = require("./log");
+
+function resToMsg(msg,cb){
+    var result = {},
+        jsonData;
+
+    try{
+        jsonData = JSON.parse(msg);
+    }catch(e){
+        result = {
+            type : "error",
+            error: "failed to parse your request : " + e.toString()
+        };
+        cb && cb(result);
+        return;
+    }
+
+    if(jsonData.reqRef){
+        result.reqRef = jsonData.reqRef;
+    }
+
+    if(jsonData.type == "reqBody" && jsonData.id){
+        GLOBAL.recorder.getBodyUTF8(jsonData.id, function(err, data){
+            if(err){
+                result = {
+                    type : "body",
+                    content : {
+                        id    : null,
+                        body  : null,
+                        error : err.toString()
+                    }
+                };    
+            }else{
+                result = {
+                    type : "body",
+                    content : {
+                        id   : jsonData.id,
+                        body : data
+                    }
+                };
+            }
+            cb && cb(result);
+        });
+    }else{ // more req handler here
+        return null;
+    }
+}
+
+//config.port
+function wsServer(config){
+	//web socket interface
+	var wss = new WebSocketServer({port: config.port});
+	wss.broadcast = function(data) {
+	    if(typeof data == "object"){
+	        data = JSON.stringify(data);
+	    }
+
+	    for(var i in this.clients){
+	        try{
+	            this.clients[i].send(data);
+	        }catch(e){
+	            logUtil.printLog("websocket failed to send data, " + e, logUtil.T_ERR);
+	        }
+	    }
+	};
+
+	wss.on("connection",function(ws){
+	    ws.on("message",function(msg){
+	        resToMsg(msg,function(res){
+	            res && ws.send(JSON.stringify(res));
+	        });
+	    });
+	});
+
+	GLOBAL.recorder.on("update",function(data){
+	    wss && wss.broadcast({
+	        type   : "update",
+	        content: data
+	    });
+	});
+
+	return wss;
+}
+
+module.exports = wsServer;

package.json

@@ -11,7 +11,6 @@
     "async-task-mgr": ">=1.1.0",
     "colorful": "^2.1.0",
     "commander": "~2.3.0",
-    "ent": "^2.2.0",
     "express": "^4.8.5",
     "iconv-lite": "^0.4.6",
     "ip": "^0.3.2",

proxy.js

@@ -14,6 +14,8 @@ var http = require('http'),
     requestHandler  = require("./lib/requestHandler"),
     Recorder        = require("./lib/recorder"),
     logUtil         = require("./lib/log"),
+    wsServer        = require("./lib/wsServer"),
+    webInterface    = require("./lib/webInterface"),
     inherits        = require("util").inherits,
     util            = require("./lib/util"),
     path            = require("path"),
@@ -21,11 +23,10 @@ var http = require('http'),
     events          = require("events"),
     express         = require("express"),
     ip              = require("ip"),
-    fork            = require("child_process").fork,
+    ent             = require("ent"),
     ThrottleGroup   = require("stream-throttle").ThrottleGroup,
     iconv           = require('iconv-lite'),
-    Buffer          = require('buffer').Buffer,
+    Buffer          = require('buffer').Buffer;
-    WebSocketServer = require('ws').Server;
 
 
 var T_TYPE_HTTP            = 0,
@@ -84,8 +85,7 @@ function proxyServer(option){
         proxyConfigPort     = option.webConfigPort || DEFAULT_CONFIG_PORT,    //port to ui config server
         disableWebInterface = !!option.disableWebInterface,
         ifSilent            = !!option.silent,
-        wss,
+        webServerInstance;
-        child_webServer;
 
     if(ifSilent){
         logUtil.setPrintStatus(false);
@@ -125,119 +125,43 @@ function proxyServer(option){
                             callback(null);
                         }
                     });
-
                 }else{
                     self.httpProxyServer = http.createServer(requestHandler.userRequestHandler);
                     callback(null);
                 }
             },
 
+            //handle CONNECT request for https over http
             function(callback){
-                //listen CONNECT request for https over http
                 self.httpProxyServer.on('connect',requestHandler.connectReqHandler);
+                callback(null);
+            },
 
-                //start proxy server
+            //start proxy server
+            function(callback){
                 self.httpProxyServer.listen(proxyPort);
                 callback(null);
             },
 
+            //start web socket service
+            function(callback){
+                var ws = new wsServer({port : socketPort});
+                callback(null)
+            },
+
             //start web interface
             function(callback){
                 if(disableWebInterface){
                     logUtil.printLog('web interface is disabled');
                 }else{
-                    //[beta] customMenu
+                    var config = {
-                    var customMenuConfig = proxyRules.customMenu,
+                        port         : proxyWebPort,
-                        menuList    = [],
+                        wsPort       : socketPort,
-                        menuListStr;
+                        ruleSummaery : requestHandler.getRuleSummary(),
-
+                        ip           : ip.address()
-                    if(customMenuConfig && customMenuConfig.length){
-                        for(var i = 0 ; i < customMenuConfig.length ; i++){
-                            menuList.push(customMenuConfig[i].name);
-                        }
-                    }
-                    menuListStr = menuList.join("@@@");
-
-                    //web interface
-                    var args = [proxyWebPort, socketPort, proxyConfigPort, requestHandler.getRuleSummary(), ip.address(),menuListStr];
-                    child_webServer = fork(path.join(__dirname,"./webServer.js"),args);
-
-                    //deal websocket data
-                    var wsDataDealer = function(){};
-                    inherits(wsDataDealer,events.EventEmitter);
-                    var dealer = new wsDataDealer();
-
-                    GLOBAL.recorder.on("update",function(data){
-                        wss && wss.broadcast({
-                            type   : "update",
-                            content: data
-                        });
-                    });
-
-                    dealer.on("message",function(ws,jsonData){
-                        if(jsonData.type == "reqBody" && jsonData.id){
-                            GLOBAL.recorder.getBodyUTF8(jsonData.id, function(err, data){
-                                var result = {};
-
-                                if(err){
-                                    result = {
-                                        type : "body",
-                                        id   : null,
-                                        body : null,
-                                        error: err.toString()
-                                    };    
-                                }else{
-                                    result = {
-                                        type : "body",
-                                        id   : data.id,
-                                        body : data
-                                    };
-                                }
-                                ws.send(JSON.stringify(result));
-                            });
-                        }
-                    });
-
-                    dealer.on("message",function(ws,jsonData){
-                        // another dealer here...
-                    });
-
-                    //web socket interface
-                    wss = new WebSocketServer({port: socketPort});
-                    wss.on("connection",function(ws){
-                        ws.on("message",function(msg){
-                            try{
-                                var msgObj = JSON.parse(msg);
-                                dealer && dealer.emit("message",ws,msgObj);
-                            }catch(e){
-                                var result = {
-                                    type : "error",
-                                    error: "failed to parse your request : " + e.toString()
-                                };
-                                ws.send(JSON.stringify(result));
-                            }
-                        });
-                    });
-                    wss.broadcast = function(data) {
-                        if(typeof data == "object"){
-                            data = JSON.stringify(data);
-                        }
-
-                        for(var i in this.clients){
-                            try{
-                                this.clients[i].send(data);
-                            }catch(e){
-                                logUtil.printLog("websocket failed to send data, " + e, logUtil.T_ERR);
-                            }
-                        }
                     };
 
-                    //watch dog
+                    webServerInstance = new webInterface(config);
-                    setInterval(function(argument) {
-                        child_webServer.send({
-                            type:"watch"
-                        });
-                    },5000);
                 }
                 callback(null);
             },
@@ -247,24 +171,15 @@ function proxyServer(option){
 
                 //kill web server when father process exits
                 process.on("exit",function(code){
-                    child_webServer.kill();
                     logUtil.printLog('AnyProxy is about to exit with code: ' + code, logUtil.T_ERR);
                     process.exit();
                 });
 
                 process.on("uncaughtException",function(err){
-                    child_webServer.kill();
                     logUtil.printLog('Caught exception: ' + err, logUtil.T_ERR);
                     process.exit();
                 });
 
-                var tipText,webUrl;
-                webUrl  = "http://" + ip.address() + ":" + proxyWebPort +"/";
-                tipText = "GUI interface started at : " + webUrl;
-                logUtil.printLog(color.green(tipText));
-
-                // tipText = "[alpha]qr code to for iOS client: " + webUrl + "qr";
-                // logUtil.printLog(color.green(tipText));
                 callback(null);
             }
         ],
@@ -272,6 +187,11 @@ function proxyServer(option){
         //final callback
         function(err,result){
             if(!err){
+                var webTip,webUrl;
+                webUrl = "http://" + ip.address() + ":" + proxyWebPort +"/";
+                webTip = "GUI interface started at : " + webUrl;
+                logUtil.printLog(color.green(webTip));
+
                 var tipText = (proxyType == T_TYPE_HTTP ? "Http" : "Https") + " proxy started at " + color.bold(ip.address() + ":" + proxyPort);
                 logUtil.printLog(color.green(tipText));
             }else{
@@ -288,88 +208,6 @@ function proxyServer(option){
     }
 }
 
-// BETA : UIConfigServer
-function UIConfigServer(port){
-    var self = this;
-
-    var app          = express(),
-        customerRule = {
-            summary: function(){
-                logUtil.printLog("replace some response with local response");
-                return "replace some response with local response";
-            }
-        },
-        userKey;
-
-    port = port || DEFAULT_CONFIG_PORT;
-
-    customerRule.shouldUseLocalResponse = function(req,reqBody){
-        var url = req.url;
-        if(userKey){
-            var ifMatch = false;
-            userKey.map(function(item){
-                if(ifMatch) return;
-
-                var matchCount = 0;
-                if( !item.urlKey && !item.reqBodyKey){
-                    ifMatch = false;
-                    return;
-                }else{
-                    if(!item.urlKey || (item.urlKey && url.indexOf(item.urlKey) >= 0 ) ){
-                        ++matchCount;
-                    }
-
-                    if(!item.reqBodyKey || (item.reqBodyKey && reqBody.toString().indexOf(item.reqBodyKey) >= 0) ){
-                        ++matchCount;
-                    }
-
-                    ifMatch = (matchCount==2);
-                    if(ifMatch){
-                        req.willResponse = item.localResponse;
-                    }
-                }
-            });
-
-            return ifMatch;
-        }else{
-            return false;
-        }
-    };
-
-    customerRule.dealLocalResponse = function(req,reqBody,callback){
-        callback(200,{"content-type":"text/html"},req.willResponse);
-        return req.willResponse;
-    };
-
-    app.post("/update",function(req,res){
-        var data = "";
-        req.on("data",function(chunk){
-            data += chunk;
-        });
-
-        req.on("end",function(){
-            userKey = JSON.parse(data);
-
-            res.statusCode = 200;
-            res.setHeader("Content-Type", "application/json;charset=UTF-8");
-            res.end(JSON.stringify({success : true}));
-
-            requestHandler.setRules(customerRule);
-            self.emit("rule_changed");
-        });
-    });
-
-    app.use(express.static(__dirname + "/web_uiconfig"));
-    app.listen(port);
-
-    self.app = app;
-}
-
-// var configServer = new UIConfigServer(proxyConfigPort);
-// configServer.on("rule_changed",function() {});
-// inherits(UIConfigServer, events.EventEmitter);
-
-
 module.exports.proxyServer        = proxyServer;
 module.exports.generateRootCA     = certMgr.generateRootCA;
 module.exports.isRootCAFileExists = certMgr.isRootCAFileExists;

web/anyproxy_wsUtil.js

@@ -0,0 +1,94 @@
+/*
+web socket util for AnyProxy
+https://github.com/alibaba/anyproxy
+*/
+
+/*
+{
+	baseUrl : ""
+}
+config
+config.baseUrl
+config.port
+config.onOpen
+config.onClose
+config.onError
+config.onGetData
+config.onGetUpdate
+config.onGetBody
+config.onError
+*/
+function anyproxy_wsUtil(config){
+	config = config || {};
+	if(!WebSocket){
+		throw (new Error("webSocket is not available on this browser"));
+	}
+
+	var self = this;
+	var baseUrl    = config.baseUrl || "127.0.0.1",
+		socketPort = config.port || 8003;
+
+	var dataSocket = new WebSocket("ws://" + baseUrl + ":" + socketPort);
+
+	self.bodyCbMap = {};
+	dataSocket.onmessage = function(event){
+		config.onGetData && config.onGetData.call(self,event.data);
+
+		try{
+			var data    = JSON.parse(event.data),
+				type    = data.type,
+				content = data.content,
+				reqRef  = data.reqRef;
+
+			if(type == "update"){
+				config.onGetUpdate && config.onGetUpdate.call(self, content);
+
+			}else if(type == "body"){
+				config.onGetBody && config.onGetBody.call(self, content, reqRef);
+
+				if(data.reqRef && self.bodyCbMap[reqRef]){
+					self.bodyCbMap[reqRef].call(self,content);
+				}
+			}
+
+		}catch(e){
+			config.onError && config.onError.call(self, new Error("failed to parse socket data - " + e.toString()) );
+		}
+	}
+
+	dataSocket.onopen = function(e){
+		config.onOpen && config.onOpen.call(self,e);
+	}
+	dataSocket.onclose = function(e){
+		config.onClose && config.onClose.call(self,e);
+	}
+	dataSocket.onerror = function(e){
+		config.onError && config.onError.call(self,e);
+	}
+
+	self.dataSocket = dataSocket;
+};
+
+anyproxy_wsUtil.prototype.send = function(data){
+	if(typeof data == "object"){
+		data = JSON.stringify(data);
+	}
+	this.dataSocket.send(data);
+};
+
+anyproxy_wsUtil.prototype.reqBody = function(id,callback){
+	if(!id) return;
+
+	var payload = {
+		type   : "reqBody",
+		id     : id
+	};
+	if(!callback){
+		this.send(payload);
+	}else{
+		var reqRef = "r_" + Math.random()*100 + "_" + (new Date().getTime());
+		payload.reqRef = reqRef;
+		this.bodyCbMap[reqRef] = callback;
+		this.send(payload);
+	}
+};

web/detail.js

@@ -40,26 +40,29 @@ define("./detail",['$', 'gallery/underscore/1.6.0/underscore.js'],function(requi
 		'		</section>'+
 		'	<% } %>';
 
+	var cbMap = {};
+
+	//data via web socket
+	var socketPort  = $("#socketPort").val(),
+		baseUrl     = $("#baseUrl").val(),
+		dataSocket  = new WebSocket("ws://" + baseUrl + ":" + socketPort);
+
 	function render(data,cb){
-		var $baseTpl = $(_.template(tpl, data));
+		var resultEl = $(_.template(tpl, data)),
-
+			id       = data._id;
-		cb($baseTpl);
+		try{
-
+			//if finished
-	    // if(data.statusCode){ //if finished
+			var reqRef = "r" + Math.random() + "_" + new Date().getTime();
-	    // 	$.ajax({
+			if(data.statusCode){
-	    // 		url     : "/body?id=" + data._id,
+				//fetch body
-	    // 		headers : {
+				ws.reqBody(id,function(content){
-	    // 			anyproxy_web_req : true
+					$(".J_responseBody", resultEl).html(he.encode(content.body));
-	    // 		},
+					cb(resultEl);
-	    // 		type    : "GET",
+				});
-	    // 		success : function(data){
+			}
-		   //  	    $(".J_responseBody", $baseTpl).html(data);
+		}catch(e){
-		   //  	    cb($baseTpl);
+			cb(resultEl);
-		   //  	}
+		};
-	    // 	});
-	    // }else{
-	    // 	cb($baseTpl);
-	    // }
 	}
 
 	exports.render = render;

web/index.html

@@ -9,15 +9,12 @@
     
 </head>
 <body>
-
 	<div class="topHead">
 		<div class="logoWrapper">
 			<h1>Anyproxy</h1>
 			<img class="logo_bottom anim_rotation" id="J_indicator" src="./logo_bottom.png" width="50" height="50" style="visibility:hidden" />
 		</div>
 
-
-
 		<div class="ctrlWrapper">
 			<a href="#" class="J_statusBtn"><span class="topBtn"><i class="uk-icon-stop"></i>Stop</span></a>
 			<a href="#" class="J_statusBtn btn_disable"><span class="topBtn"><i class="uk-icon-play"></i>Resume</span></a>
@@ -27,7 +24,6 @@
 			<a href="/qr_root" class="J_fetchRootQR" target="_blank"><span class="topBtn"><i class="uk-icon-certificate"></i>QRCode of rootCA.crt</span></a>
 			<!-- <a href="#"><span class="topBtn"><i class="uk-icon-cog"></i>Others</span></a> -->
 
-			<!-- <a href="http://localhost:{{proxyConfigPort}}"><span class="topBtn"><i class="uk-icon-cog"></i>Config Local Response(beta)</span></a> -->
 			<span class="sep">|</span>
 			<a href="https://github.com/alibaba/anyproxy" target="_blank"><span class="topBtn"><i class="uk-icon-external-link-square"></i>Anyproxy(Github)</span></a>
 
@@ -66,12 +62,10 @@
 		</div>
 	</div>
 
-
+	<input type="hidden" id="socketPort" value="{{wsPort}}" />
-	<input type="hidden" id="socketPort" value="{{webSocketPort}}" />
 	<input type="hidden" id="baseUrl" value="{{ipAddress}}" />
 	<input type="hidden" id="customMenu" value="{{menu}}" />
 
-
 	<script type="text/template" id="main_table_row">
 		<td class="data_id"><%= _id %></td>
 		<td><%= method %> <span class="protocol protocol_<%= protocol %>" title="https"><i class="iconfont">&#xf00c9;</i></span> </td>
@@ -83,6 +77,8 @@
 	</script>
 
 
+	<script src="/anyproxy_wsUtil.js"></script>
+	<script src="/he.js"></script>
 	<script src="/list.js"></script>
 </body>
 </html>

web/list.js

@@ -14,180 +14,168 @@ seajs.use(['$', 'Underscore', 'Backbone',"Handlebars","Popup","./detail"], funct
 
 	var isInApp = window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.list;
 
-	$(function(){
+	//record detail
+	var DetailView = function(){
+		var self      = this,
+			$detailEl = $(".J_recordDetailOverlay"),
+			$mask;
 
-		//record detail
+		//init mask
-		var DetailView = function(){
+		$mask = $("<div></div>").addClass("overlay_mask").hide();
-			var self      = this,
+		$("body").append($mask);
-				$detailEl = $(".J_recordDetailOverlay"),
-				$mask;
 
-			//init mask
+		//bind events
-			$mask = $("<div></div>").addClass("overlay_mask").hide();
+		$(document).on("keyup",function(e){
-			$("body").append($mask);
+			if(e.keyCode == 27){ //ESC
-
-			//bind events
-			$(document).on("keyup",function(e){
-				if(e.keyCode == 27){ //ESC
-					self.hideDetail();
-				}
-			});
-
-			$mask.on("click",function(e){
 				self.hideDetail();
+			}
+		});
+
+		$mask.on("click",function(e){
+			self.hideDetail();
+		});
+
+		$(".J_escBtn",$detailEl).on("click",function(e){
+			self.hideDetail();
+		});
+
+		self.showDetail = function(data){
+			Detail.render(data,function(tpl){
+				$(".J_recordDetailOverlayContent",$detailEl).html(tpl);
+			    $detailEl.show();
+			    $mask.show();
 			});
-
-			$(".J_escBtn",$detailEl).on("click",function(e){
-				self.hideDetail();
-			});
-
-			self.showDetail = function(data){
-				Detail.render(data,function(tpl){
-					$(".J_recordDetailOverlayContent",$detailEl).html(tpl);
-				    $detailEl.show();
-				    $mask.show();
-				});
-			};
-
-			self.hideDetail = function(){
-				$detailEl.hide();
-				$mask.hide();
-			};
 		};
-		var detailPanel     = new DetailView();
 
-		//record list
+		self.hideDetail = function(){
-		var RecordModel = Backbone.Model.extend({});
+			$detailEl.hide();
-		var RecordList  = Backbone.Collection.extend({
+			$mask.hide();
-			initialize:function(){
+		};
-				var self = this;
+	};	
+	var detailPanel     = new DetailView();
 
-				self.on("add",function(data){
+	//record list
-					new RecordRowView({
+	var RecordModel = Backbone.Model.extend({});
-						model:data,
+	var RecordList  = Backbone.Collection.extend({
-						detailPanel : detailPanel
+		initialize:function(){
-					});
+			var self = this;
+
+			self.on("add",function(data){
+				new RecordRowView({
+					model:data,
+					detailPanel : detailPanel
 				});
+			});
 
-				self.on("reset",function(){
+			self.on("reset",function(){
-					$(".J_tableBody").empty();
+				$(".J_tableBody").empty();
-				});
+			});
-			}
+		}
-		});
+	});
 
-		var RecordRowView = Backbone.View.extend({
+	var RecordRowView = Backbone.View.extend({
-			tagName : "tr",
+		tagName : "tr",
-			className:function(){
+		className:function(){
-				return this.model.toJSON().id % 2 ? "row_odd" : "row_even";
+			return this.model.toJSON().id % 2 ? "row_odd" : "row_even";
-			},
+		},
-			tpl   : $("#main_table_row").html(),
+		tpl   : $("#main_table_row").html(),
-			initialize:function(data){
+		initialize:function(data){
+			var self = this;
+			self.model.on("change",self.render,self);
+			self.addNewRecord();
+			self.detailPanel = data.detailPanel;
+		},
+		events: {
+			click: function(e){
+				e.stopPropagation();
 				var self = this;
-				self.model.on("change",self.render,self);
+				var detailData = self.model.toJSON();
-				self.addNewRecord();
+				if(!isInApp){
-				self.detailPanel = data.detailPanel;
+					self.detailPanel.showDetail(detailData);
-			},
-			events: {
-				click: function(e){
-					e.stopPropagation();
-					var self = this;
-					var detailData = self.model.toJSON();
-					if(!isInApp){
-						self.detailPanel.showDetail(detailData);
-					}else{ 
-						window.webkit.messageHandlers.list.postMessage(JSON.stringify(detailData));
-					}
-				}
-			},
-			render: function(){
-				var self = this,
-					data = self.model.toJSON();
-				if(!data.statusCode){
-					data.statusCode = "-";
 				}else{ 
-					self.$el.addClass("record_status_done")
+					window.webkit.messageHandlers.list.postMessage(JSON.stringify(detailData));
 				}
-
-				if(!data.mime){
-					data.mime = "-";
-				}
-
-				var html = _.template(self.tpl, data);
-				self.$el.attr("recordId",data.id).empty().html(html);
-
-				return self;
-			},
-			addNewRecord:function(){
-				$(".J_tableBody").prepend(this.render().$el);
 			}
-		});
+		},
+		render: function(){
+			var self = this,
+				data = self.model.toJSON();
+			if(!data.statusCode){
+				data.statusCode = "-";
+			}else{
+				self.$el.addClass("record_status_done")
+			}
 
-		var recList         = new RecordList();
+			if(!data.mime){
+				data.mime = "-";
+			}
 
-		//other controllers
+			var html = _.template(self.tpl, data);
-		$(".J_clearBtn").on("click",function(e){
+			self.$el.attr("recordId",data.id).empty().html(html);
+
+			return self;
+		},
+		addNewRecord:function(){
+			$(".J_tableBody").prepend(this.render().$el);
+		}
+	});
+
+	var recList         = new RecordList();
+
+	//other controllers
+	$(".J_clearBtn").on("click",function(e){
+		e.stopPropagation();
+		e.preventDefault();
+
+		clearLogs();
+	});
+
+	$(document).on("keyup",function(e){
+		if(e.keyCode == 88 && e.ctrlKey){ // ctrl + x
+			clearLogs();
+		}
+	});
+
+	function clearLogs(){
+		recList.reset();
+	}
+
+	//pause btn
+	var ifPause     = false,
+		indicatorEl = $("#J_indicator");
+	(function(){
+		var statusBtn = $(".J_statusBtn");
+		statusBtn.on("click",function(e){
 			e.stopPropagation();
 			e.preventDefault();
 
-			clearLogs();
+			$(".J_statusBtn").removeClass("btn_disable");
-		});
+			$(this).addClass("btn_disable");
 
-		$(document).on("keyup",function(e){
+			if(/stop/i.test($(this).html()) ){
-			if(e.keyCode == 88 && e.ctrlKey){ // ctrl + x
+				ifPause = true;
-				clearLogs();
+				indicatorEl.fadeOut();
+				// indicatorEl.css("visibility","hidden");
+			}else{
+				ifPause = false;
+				indicatorEl.fadeIn();
+				// indicatorEl.css("visibility","visible");
 			}
 		});
+	})();
 
-		function clearLogs(){
+	//invoke AnyProxy web socket util
-			recList.reset();
+	(function(){
-		}
+		try{
+			var ws = window.ws = new anyproxy_wsUtil({
+				baseUrl     : $("#baseUrl").val(),
+				port        : $("#socketPort").val(),
+				onOpen : function(){
+					indicatorEl.css("visibility","visible");
+				},
+				onGetUpdate : function(content){
+					if(ifPause) return;
 
-		//pause btn
-		var ifPause     = false,
-			indicatorEl = $("#J_indicator");
-		(function(){
-			var statusBtn = $(".J_statusBtn");
-			statusBtn.on("click",function(e){
-				e.stopPropagation();
-				e.preventDefault();
-
-				$(".J_statusBtn").removeClass("btn_disable");
-				$(this).addClass("btn_disable");
-
-				if(/stop/i.test($(this).html()) ){
-					ifPause = true;
-					indicatorEl.fadeOut();
-					// indicatorEl.css("visibility","hidden");
-				}else{
-					ifPause = false;
-					indicatorEl.fadeIn();
-					// indicatorEl.css("visibility","visible");
-				}
-			});
-		})();
-
-		//[test]render custom menu
-		var customMenu     = $("#customMenu").val().split("@@@");
-
-		//data via web socket
-		if(!WebSocket){
-			alert("WebSocket is required. Please use a modern browser.");
-			return;
-		}
-		var socketPort = $("#socketPort").val(),
-			baseUrl     = $("#baseUrl").val(),
-			dataSocket  = new WebSocket("ws://" + baseUrl + ":" + socketPort);
-		dataSocket.onopen = function(){
-			indicatorEl.css("visibility","visible");
-		}
-
-		dataSocket.onmessage = function(event){
-			if(ifPause) return;
-			try{
-				var data = JSON.parse(event.data);
-
-				if(data.type == 'update'){
-					var content = data.content;
 					var reqDate = new Date(content.startTime);
 					content.startTimeStr = reqDate.format("hh:mm:ss") + "";
 
@@ -197,22 +185,24 @@ seajs.use(['$', 'Underscore', 'Backbone',"Handlebars","Popup","./detail"], funct
 					}else{
 						recList.add(new RecordModel(content),{merge: true});
 					}
+				},
+				onError     : function(e){
+					console.log(e);
+					indicatorEl.css("visibility","hidden");
+					alert("socket err, please refresh");
+				},
+				onClose     : function(e){
+					console.log(e);
+					indicatorEl.css("visibility","hidden");
+					alert("socket closed, please refresh");	
 				}
+			});
+			window.ws = ws;
 			
-			}catch(e){
+		}catch(e){
-				console.log(e);
+			alert("failed to invoking web socket on this browser");
-			}
 		}
-
+	})();
-		dataSocket.onclose = function(e){}
-
-		dataSocket.onerror = function(e){
-			console.log(e);
-			indicatorEl.css("visibility","hidden");
-			alert("socket err, please refresh");
-		}
-
-	});
 
 	//draggable panel
 	(function(){

web/websocket_sample.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Anyproxy</title>
+    <link rel="icon" type="image/png" href="/favico.png" />
+    <style type="text/css">
+    	.logPanel{
+    		border:  1px solid #AAA;
+    	}
+
+    	.logPanel p{
+    		padding-left: 20px;
+    		margin: 10px;
+    		white-space: nowrap;
+    	}
+    </style>    
+</head>
+<body>
+	<input type="text" id="J_data" placeholder="req id" value="1" / >
+	<button type="button" id="J_sendReq">Send</button>
+	<div class="logPanel" id="J_logPanel"></div>
+
+	<script src="./anyproxy_wsUtil.js"></script>
+	<script type="text/javascript">
+
+	//print log
+	var logPanel = document.getElementById("J_logPanel");
+	function log(data){
+		var thisLog = "<p>" + new Date()+ "<br>" + data + "</p>";
+		logPanel.innerHTML = thisLog + logPanel.innerHTML;
+	}
+
+	//instantiate ws util
+	var ws = new anyproxy_wsUtil({
+		baseUrl : "127.0.0.1",
+		port    : "8003",
+		onGetUpdate : function(content){
+			log("update id " + content.id + " , content :" + JSON.stringify(content));
+		},
+		onError : function(e){
+			console.log(e);
+		}
+	});
+
+	//to get some response body
+	document.getElementById("J_sendReq").addEventListener("click",function(e){
+		var id = document.getElementById("J_data").value;
+		log("request for body id=" + id + "...");
+		ws.reqBody(id,function(content){
+			log("body id " + content.id + " ,content :" + content.body);
+		});
+	});
+
+	</script>
+</body>
+</html>