optimize webServer, move it to /lib

2025-07-27 07:45:41 +00:00 · 2015-04-25 10:28:40 +08:00
parent db4ab7d2f9
commit 8e7aef70ae
12 changed files with 817 additions and 451 deletions
--- a/web/anyproxy_wsUtil.js
+++ b/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);
+	}
+};
--- a/web/detail.js
+++ b/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));
-
-		cb($baseTpl);
-
-	    // if(data.statusCode){ //if finished
-	    // 	$.ajax({
-	    // 		url     : "/body?id=" + data._id,
-	    // 		headers : {
-	    // 			anyproxy_web_req : true
-	    // 		},
-	    // 		type    : "GET",
-	    // 		success : function(data){
-		   //  	    $(".J_responseBody", $baseTpl).html(data);
-		   //  	    cb($baseTpl);
-		   //  	}
-	    // 	});
-	    // }else{
-	    // 	cb($baseTpl);
-	    // }
+		var resultEl = $(_.template(tpl, data)),
+			id       = data._id;
+		try{
+			//if finished
+			var reqRef = "r" + Math.random() + "_" + new Date().getTime();
+			if(data.statusCode){
+				//fetch body
+				ws.reqBody(id,function(content){
+					$(".J_responseBody", resultEl).html(he.encode(content.body));
+					cb(resultEl);
+				});
+			}
+		}catch(e){
+			cb(resultEl);
+		};
 	}

 	exports.render = render;
--- a/web/he.js
+++ b/web/he.js
--- a/web/index.html
+++ b/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="{{webSocketPort}}" />
+	<input type="hidden" id="socketPort" value="{{wsPort}}" />
 	<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>
--- a/web/list.js
+++ b/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
-		var DetailView = function(){
-			var self      = this,
-				$detailEl = $(".J_recordDetailOverlay"),
-				$mask;
+		//init mask
+		$mask = $("<div></div>").addClass("overlay_mask").hide();
+		$("body").append($mask);

-			//init mask
-			$mask = $("<div></div>").addClass("overlay_mask").hide();
-			$("body").append($mask);
-
-			//bind events
-			$(document).on("keyup",function(e){
-				if(e.keyCode == 27){ //ESC
-					self.hideDetail();
-				}
-			});
-
-			$mask.on("click",function(e){
+		//bind events
+		$(document).on("keyup",function(e){
+			if(e.keyCode == 27){ //ESC
 				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();
-				});
-			};
-
-			self.hideDetail = function(){
-				$detailEl.hide();
-				$mask.hide();
-			};
-		};	
-		var detailPanel     = new DetailView();
-
-		//record list
-		var RecordModel = Backbone.Model.extend({});
-		var RecordList  = Backbone.Collection.extend({
-			initialize:function(){
-				var self = this;
-
-				self.on("add",function(data){
-					new RecordRowView({
-						model:data,
-						detailPanel : detailPanel
-					});
-				});
-
-				self.on("reset",function(){
-					$(".J_tableBody").empty();
-				});
 			}
 		});

-		var RecordRowView = Backbone.View.extend({
-			tagName : "tr",
-			className:function(){
-				return this.model.toJSON().id % 2 ? "row_odd" : "row_even";
-			},
-			tpl   : $("#main_table_row").html(),
-			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;
-					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")
-				}
-
-				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);
-			}
+		$mask.on("click",function(e){
+			self.hideDetail();
 		});

-		var recList         = new RecordList();
+		$(".J_escBtn",$detailEl).on("click",function(e){
+			self.hideDetail();
+		});

-		//other controllers
-		$(".J_clearBtn").on("click",function(e){
+		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
+	var RecordModel = Backbone.Model.extend({});
+	var RecordList  = Backbone.Collection.extend({
+		initialize:function(){
+			var self = this;
+
+			self.on("add",function(data){
+				new RecordRowView({
+					model:data,
+					detailPanel : detailPanel
+				});
+			});
+
+			self.on("reset",function(){
+				$(".J_tableBody").empty();
+			});
+		}
+	});
+
+	var RecordRowView = Backbone.View.extend({
+		tagName : "tr",
+		className:function(){
+			return this.model.toJSON().id % 2 ? "row_odd" : "row_even";
+		},
+		tpl   : $("#main_table_row").html(),
+		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;
+				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")
+			}
+
+			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);
+		}
+	});
+
+	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(e.keyCode == 88 && e.ctrlKey){ // ctrl + x
-				clearLogs();
+			if(/stop/i.test($(this).html()) ){
+				ifPause = true;
+				indicatorEl.fadeOut();
+				// indicatorEl.css("visibility","hidden");
+			}else{
+				ifPause = false;
+				indicatorEl.fadeIn();
+				// indicatorEl.css("visibility","visible");
 			}
 		});
+	})();

-		function clearLogs(){
-			recList.reset();
-		}
+	//invoke AnyProxy web socket util
+	(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");	
 				}
-
-			}catch(e){
-				console.log(e);
-			}
+			});
+			window.ws = ws;
+			
+		}catch(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(){
--- a/web/websocket_sample.html
+++ b/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>