WebSocket client and server beginnings

ozgurtt · Mar 2, 2011 · c6d2cbd · c6d2cbd
1 parent 6a70de8
commit c6d2cbd
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -58,6 +58,7 @@
 	<script src="js/editor.js"></script>
 	<script src="js/sign.js"></script>
 	<script src="js/perf.js"></script>
+	<script src="js/client.js"></script>
 	<script src="js/tutorial.js"></script>
 	<script src="js/machine.js"></script>
 	<script src="js/init.js"></script>
@@ -114,6 +115,7 @@
 				<div id="unlock" style="cursor: pointer;" align="center">UNLOCK ALL LEVELS</div>
 				<div id="editoron" style="cursor: pointer;" align="center">ENABLE LEVEL EDITOR</div>
 				<div id="perfon" style="cursor: pointer;" align="center">ENABLE PERF MONITOR</div>
+				<div id="connecton" style="cursor: pointer;" align="center">CONNECT TO SERVER</div>
 		</div>
 
 		<div id="lgo" style="position: absolute; top: 0px; width: 100%; visibility: hidden;">

diff --git a/js/client.js b/js/client.js
@@ -0,0 +1,27 @@
+(function(orbium) {
+	orbium.Client = function(url) {
+		var socket = null;
+
+		this.construct = function() {
+			console.log("trying to connect.");
+			socket = new WebSocket(url);
+			socket.onopen = this.opened;
+			socket.onmessage = this.received;
+		};
+
+		this.opened = function() {
+			console.log("connection established.");
+			socket.send("well hello");
+		};
+
+		this.send = function(msg) {
+			socket.send(msg);
+		};
+
+		this.received = function(msg) {
+			console.log("received: "+msg.data);
+		};
+
+		var that = this; this.construct.apply(this, arguments);
+	};
+}(typeof window != "undefined" ? window.orbium = window.orbium || {} : orbium));
diff --git a/js/menu.js b/js/menu.js
@@ -48,6 +48,7 @@
 		var unlock = null;
 		var editoron = null;
 		var perfon = null;
+		var connecton = null;
 
 		var lgo = null;
 		var lgob = null;
@@ -115,6 +116,7 @@
 			unlock = document.getElementById("unlock");
 			editoron = document.getElementById("editoron");
 			perfon = document.getElementById("perfon");
+			connecton = document.getElementById("connecton");
 
 			lgo = document.getElementById("lgo");
 			lgob = document.getElementById("lgob");
@@ -178,6 +180,7 @@
 			unlock.style.fontSize = ""+Math.round(orbium.Tile.size/textFactor)+"px";
 			editoron.style.fontSize = ""+Math.round(orbium.Tile.size/textFactor)+"px";
 			perfon.style.fontSize = ""+Math.round(orbium.Tile.size/textFactor)+"px";
+			connecton.style.fontSize = ""+Math.round(orbium.Tile.size/textFactor)+"px";
 
 			info.style.fontSize = ""+Math.round(orbium.Tile.size/textFactor)+"px";
 			credb.style.fontSize = ""+Math.round(orbium.Tile.size/textFactor)+"px";
@@ -242,6 +245,8 @@
 				function(e) {orbium.menu.editoron();});
 			orbium.Util.attachListener(perfon, "touchstart",
 				function(e) {orbium.menu.perfon();});
+			orbium.Util.attachListener(connecton, "touchstart",
+				function(e) {orbium.menu.connecton();});
 
 			orbium.Util.attachListener(logo, "touchstart",
 				function(e) {orbium.menu.logo();});
@@ -319,6 +324,8 @@
 				function(e) {orbium.menu.editoron();});
 			orbium.Util.attachListener(perfon, "mousedown",
 				function(e) {orbium.menu.perfon();});
+			orbium.Util.attachListener(connecton, "mousedown",
+				function(e) {orbium.menu.connecton();});
 
 			orbium.Util.attachListener(logo, "mousedown",
 				function(e) {orbium.menu.logo();});
@@ -432,7 +439,7 @@
 			menu.style.visibility = "visible";
 
 			dbg.style.visibility = "visible";
-			dbg.style.top = "32%";
+			dbg.style.top = "30%";
 		};
 
 		this.hideDbg = function() {
@@ -894,6 +901,14 @@
 			this.showMain();
 		};
 
+		this.connecton = function() {
+			orbium.client = new orbium.Client("ws://localhost:1991");
+
+			this.hideDbg();
+			this.updateStart();
+			this.showMain();
+		};
+
 		this.credits = function() {
 			this.hideAbout();
 			this.showCreds();
@@ -914,6 +929,7 @@
 		};
 
 		this.about = function() {
+			orbium.client.send("testing! testing!");
 			this.hideMain();
 			this.showAbout();
 		};

diff --git a/js/server.js b/js/server.js
@@ -2,6 +2,8 @@ orbium = {};
 
 (function(orbium) {
 	var net = require("net");
+	var crypto = require("crypto");
+
 	require("./level_show.js");
 	require("./util.js");
 	require("./sprite.js");
@@ -34,9 +36,17 @@ orbium = {};
 
 	var clients = [];
 
+	var send = function(client, msg) {
+	    client.socket.write("\u0000", "binary");
+	    client.socket.write(msg, "utf8");
+	    client.socket.write("\uffff", "binary");
+	}
+
 	var broadcast = function(msg) {
 		for (var i = 0, j = clients.length; i < j; i++) {
-			clients[i].socket.write(msg);
+		    clients[i].socket.write("\u0000", "binary");
+		    clients[i].socket.write(msg, "utf8");
+		    clients[i].socket.write("\uffff", "binary");
 		}
 	}
 
@@ -84,17 +94,88 @@ orbium = {};
 	orbium.machine.startLevel();
 
 	server.on("connection", function (socket) {
+	    socket.setEncoding("binary");
+
+		var handshakeComplete = false;
+
 		var client = {};
 		client.id = orbium.Util.generateUniqeString();
 		client.socket = socket;
 		orbium.Util.addArrayElement(clients, client);
 
-		console.log("connected: "+client.id+", "+clients.length+" clients connected");
-		socket.write("you are: "+client.id+"\r\n");
-		broadcast(""+client.id+" joined\r\n");
-
 		socket.on("data", function(data) {
-			broadcast(""+client.id+" says: "+data);
+			if (!handshakeComplete) {
+				//console.log("REQ:\r\n"+data);
+				var request = (""+data).split("\r\n");
+
+				var k1 = request[5].split(": ")[1];
+				var k2 = request[6].split(": ")[1];
+				//console.log("k1: "+k1);
+				//console.log("k2: "+k2);
+
+				var n1 = parseInt(k1.replace(/[^\d]/g, ''));
+				var n2 = parseInt(k2.replace(/[^\d]/g, ''));
+				//console.log("n1: "+n1);
+				//console.log("n2: "+n2);
+
+				var s1 = k1.replace(/[^ ]/g, '').length;
+				var s2 = k2.replace(/[^ ]/g, '').length;
+				//console.log("s1: "+s1);
+				//console.log("s2: "+s2);
+
+				n1 /= s1;
+				n2 /= s2;
+				//console.log("n1: "+n1);
+				//console.log("n2: "+n2);
+
+				var head = request[8];
+				//console.log("head: "+head);
+				//console.log("head.length: "+head.length);
+
+				var md5 = crypto.createHash("md5");
+
+				md5.update(String.fromCharCode(
+				        n1 >> 24 & 0xFF,
+				        n1 >> 16 & 0xFF,
+				        n1 >> 8  & 0xFF,
+				        n1       & 0xFF));
+
+				md5.update(String.fromCharCode(
+				        n2 >> 24 & 0xFF,
+				        n2 >> 16 & 0xFF,
+				        n2 >> 8  & 0xFF,
+				        n2       & 0xFF));
+
+				md5.update(head);
+
+				var result = md5.digest("binary");
+				//console.log("result: "+result);
+
+				var response = [
+					"HTTP/1.1 101 WebSocket Protocol Handshake",
+					"Upgrade: WebSocket",
+					"Connection: Upgrade",
+					"Sec-WebSocket-Origin: "+request[4].split(": ")[1],
+					"Sec-WebSocket-Location: ws://"+request[3].split(": ")[1]+"/",
+					"",
+					result];
+
+				//console.log("RESP:\r\n"+response.join("\r\n"));
+
+				socket.write(response.join("\r\n"), "binary");
+
+			    socket.setTimeout(0);
+			    socket.setNoDelay(true);
+			    socket.setEncoding("utf-8");
+
+				console.log("connected: "+client.id+", "+clients.length+" clients connected");
+				send(client, "you are: "+client.id+"\r\n");
+				broadcast(""+client.id+" joined\r\n");
+
+				handshakeComplete = true;
+			} else {
+				broadcast(""+client.id+" says: "+data);
+			}
 		});
 
 		socket.on("close", function(had_error) {