reconstruct web interface with react.js

web/lib/anyproxy_wsUtil.js

@@ -0,0 +1,95 @@
+/*
+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;
+		}catch(e){
+			config.onError && config.onError.call(self, new Error("failed to parse socket data - " + e.toString()) );
+		}
+
+		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);
+			}
+		}
+	}
+
+	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){
+		var reqRef = "r_" + Math.random()*100 + "_" + (new Date().getTime());
+		payload.reqRef = reqRef;
+		this.bodyCbMap[reqRef] = callback;
+	}
+	this.send(payload);
+};
+
+if(typeof module != "undefined"){
+	module.exports = anyproxy_wsUtil;
+}

web/lib/event.js

@@ -0,0 +1,43 @@
+//Ref : http://jsfiddle.net/JxYca/3/
+var EventManager = function() {
+    this.initialize();
+};
+EventManager.prototype = {
+    initialize: function() {
+        //declare listeners as an object
+        this.listeners = {};
+    },
+    // public methods
+    addListener: function(event, fn) {
+        if (!this.listeners[event]) {
+            this.listeners[event] = [];
+        }
+        if (fn instanceof Function) {
+            this.listeners[event].push(fn);
+        }
+        return this;
+    },
+    dispatchEvent: function(event, params) {
+        // loop through listeners array
+        for (var index = 0, l = this.listeners[event].length; index < l; index++) {
+            // execute matching 'event' - loop through all indices and
+            // when ev is found, execute
+            this.listeners[event][index].call(window, params);
+        }
+    },
+    removeListener: function(event, fn) {
+        // split array 1 item after our listener
+        // shorten to remove it
+        // join the two arrays back together
+        if (this.listeners[event]) {
+            for (var i = 0, l = this.listners[event].length; i < l; i++) {
+                if (this.listners[event][i] === fn) {
+                    this.listners[event].slice(i, 1);
+                    break;
+                }
+            }
+        }
+    }
+};
+
+module.exports = EventManager;